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

Question

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

score 38 · Accepted Answer

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

调试器；

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

score 20 · Accepted Answer

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

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

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

2.右键单击预览并点击检查元素

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

score 5 · Accepted Answer

5

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

于 2017-06-02T17:22:00.033 回答

score 2 · Accepted Answer

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

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

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

只需将此id - P0fqZG6G6khKKrtfBkDP附加到 URL

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

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

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

score 0 · Accepted Answer

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

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

5 回答 5