在chrome开发人员工具中调试plunker

Question

我在Plunker中创建了一个javascript文件，我想调试它。当我打开'Sources'面板时，我没有看到我创建的js文件。我只看到很多Plunker js文件。请指教。谢谢

Answer 1

另一种方法是将它放在你的javascript文件中

  

调试器;

并让控制台保持打开状态，这将强制调试器不仅停在那里而且还打开文件。

Answer 2

您有两个主要选项可深入查看您创建的源文件。

<强> 1。使用预览面板的弹出窗口模式

默认情况下，预览器在plunker webapp内的<iframe>内运行。您可以通过单击预览窗口右上角的蓝色展开图标，让plunker在单独的窗口中显示预览器。如果您为弹出窗口打开开发工具，则只会看到您的源文件。

<强> 2。右键单击预览并点击检查元素

这样做可以让您使用嵌入式实时预览，并为您提供一个快捷方式，可以深入查看与您的代码相关的DOM。

Answer 3

图片胜过千言万语...... F12然后选择来源; plunkerPreviewTarget有源代码

Answer 4

我发现更快捷的方法就是抓住你的plnk中唯一的 id 。

在正常 '编辑' 模式下，网址会像

一样

http://plnkr.co/edit/P0fqZG6G6khKKrtfBkDP?p=preview

只需将此 id - P0fqZG6G6khKKrtfBkDP 附加到网址

http://run.plnkr.co/plunks/因此成为

<强> http://run.plnkr.co/plunks/P0fqZG6G6khKKrtfBkDP/

重要提示：确保添加尾随 /

• Open new URL in a new chrome window
• Hit F12 in chrome, voila native angular JS debugging for your plnk

注意：然后，您可以继续在plnkr中进行编辑，保存并在调试时简单地刷新此URL，以维护您的活动调试会话。

Answer 5

这可能会有所改变，但目前在Windows 10,64位Chrome 47.0.2526.111 m上，您可以通过以下方式找到这些源文件：

• 打开开发人员工具（F12）
• 开源
• 寻找run.plnkr.co
• 展开此按钮以显示具有隐藏名称的单个目录

在里面，你会找到你的文件，这样你就可以开始调试了