动态加载的 javascript 不显示在源面板中？答案

【问题标题】：Dynamically loaded javascript doesn't show in sources panel?动态加载的 javascript 不显示在源面板中？
【发布时间】：2012-12-08 17:50:09
【问题描述】：

例如，我有一个 ajax 请求，它返回 <script src='buggy.js'></script>。

问题是，它没有显示在来源或资源面板中。这意味着我不能做所有很酷的事情，比如添加断点和在运行时检查元素。

我只能在 Network 面板下看到 js 文件的来源。

有没有办法让 chrome 将它们添加到源面板？
或者你们如何调试动态添加的脚本？

使用金丝雀。

【问题讨论】：

猜我找到了解决方法stackoverflow.com/questions/9092125/…
那么您的脚本究竟是如何加载的呢？如果您手动将具有 src 属性的脚本标签插入到 DOM 中，那么它应该会出现在源面板中。如果脚本是通过 eval 添加的，或者即使您使用某些 javascript 框架（例如 jQuery）将其插入 DOM，那么您可能需要提供 sourceURL 才能使其工作。

【解决方案1】：

（原始链接已损坏-以下存档链接）

【讨论】：

如果有问题的脚本甚至没有出现在源选项卡中，那实际上是行不通的。
我猜它没有被加载？您可以在“网络”面板中看到它吗？
是的，在我的特殊情况下，它确实显示在网络面板中。此外，如果我“中断异常”并且一些动态代码抛出了异常，调试器确实会中断，并且 sn-p 会显示在一个新选项卡中，该选项卡类似于屏幕截图 here 中的内容。在该选项卡中，似乎可以进行完整调试（变量、步进等）。所以我可以通过引入一个故意的异常并打破它来解决它，由于多种原因，这是次优的。这是在 Chrome 28.0.1500.71 上。
我在 Chrome 30.0.1599.66 上遇到了同样的问题。
链接断开。出于这个原因，SO 更喜欢答案可以独立存在，而不是参考外部来源。

【解决方案2】：

我遇到了同样的问题，但我找到了一个比故意异常更好的解决方法。它仍然需要更改代码，而不仅仅是在 chrome 开发工具中设置断点。

我尝试使用 OP 建议作为解决方法的“//# sourceURL=dynamicScript.js”，但它仍然没有显示给我，除非它在之前的时候已经存在于我的选项卡中产生了异常。

编写“调试器”；线迫使它在那个位置断裂。然后，一旦它出现在“源”面板的选项卡中，我就可以像正常一样设置断点并删除“调试器”；行。

【讨论】：