在 chrome 开发者工具中调试 plunker答案

【问题标题】：debugging plunker in chrome developer tools在 chrome 开发者工具中调试 plunker
【发布时间】：2017-06-03 01:22:00
【问题描述】：

我在 Plunker 中创建了一个 javascript 文件，我想对其进行调试。当我打开“源”面板时，我没有看到我创建的 js 文件。我只看到很多 Plunker js 文件。请指教。谢谢

【问题讨论】：

【解决方案1】：

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

调试器；

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

【讨论】：

【解决方案2】：

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

1.使用预览面板的弹窗模式

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

2。右键单击预览并点击 inspect element

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

【讨论】：

【解决方案3】：

图片值千言万语... F12 然后选择来源； plunkerPreviewTarget 有源码

【讨论】：

【解决方案4】：

我发现一种更快的方法是简单地获取您的 plnk 的唯一 id。

在普通 'edit' 模式下，URL 将类似于

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

只需将此 id - P0fqZG6G6khKKrtfBkDP 附加到 URL

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

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：