Google chrome devtools 在chrome开发者工具中调试plunker

我在Plunker中创建了一个javascript文件，我想调试它。当我打开“源代码”面板时，我看不到我创建的js文件。我只看到很多Plunker js文件。请给我一些建议。谢谢

您有两个主要选项可以深入到您创建的源文件

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

默认情况下，预览程序在plunker webapp中的

中运行。通过单击预览窗口右上角的蓝色展开图标，可以要求plunker在单独的窗口中显示预览器。如果在弹出窗口中打开开发工具，则只会看到源文件

2。右键单击预览并点击inspect元素

---

这样做可以让您使用嵌入式实时预览，并为您提供向下钻取与代码关联的DOM的快捷方式。

另一种方法是将其放入javascript文件中

调试器

---

并使控制台保持打开状态，这将迫使调试器不仅停止在那里，而且还要打开文件

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

• 开放式开发工具（F12）
• 开源
• 查找run.plnkr.co
• 展开此项以显示一个名称神秘的目录

---

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

我找到的一个更快的方法就是简单地抓取你的plnk的唯一的id

在正常的“编辑”模式下，URL类似于

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

只需将此id-P0fqZG6G6khKKrtfBkDP附加到URL即可

http://run.plnkr.co/plunks/

因此成为

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

• 在新的chrome窗口中打开新的URL

• 在chrome中点击F12，瞧，为您的plnk调试本机angular JS

---

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

这幅画抵得上千言万语。。。 F12，然后选择源；plunkerPreviewTarget有源代码