createElement(script)/appendChild 如何调试添加的脚本？答案

【问题标题】：createElement(script)/appendChild how to debug added script?createElement(script)/appendChild 如何调试添加的脚本？
【发布时间】：2018-11-27 10:47:08
【问题描述】：

    var js = document.createElement("script");
    js.type = "text/javascript";
    js.innerHTML = layout[i].text;
    document.body.appendChild(js);

我正在添加这样的脚本，请注意没有src，而是innerHTML，而是使用XMLHttpRequest 按需获取脚本。不幸的是，该脚本没有出现在开发工具中，没有出现在 Chrome 中，也没有出现在 Firefox 中。

如何从源字符串附加脚本，以便我仍然可以在 devtools 中调试它？

【问题讨论】：

我不明白，当 src 丢失时如何获取脚本？或者您是否正在寻找要出现的内联脚本？在这种情况下，layout[i].text 的内容是什么？
@lustoykov 脚本源代码是用XMLHttpRequest获取的
您可以将debugger; 添加到脚本文本中，这样它会在开发工具中自动暂停。

标签： javascript debugging google-chrome-devtools firefox-developer-tools

【解决方案1】：

为了能够在 Chrome 中调试动态添加的脚本，您需要在要调试的脚本末尾附加 //# sourceURL=test_file_name.js，如下所示

var js = document.createElement("script");
js.type = "text/javascript";
js.innerHTML = layout[i].text + "//# sourceURL=test_file_name.js";
document.body.appendChild(js);

现在，如果您在开发控制台中打开源选项卡，您将在（无域）部分（通常）下找到 test_file_name.js。我刚刚在 Chrome 版本 67.0.X 中验证了它

我相信 Firefox 也应该如此，

也请参考这些链接，

Chrome Dev Tools

sourceMappingURL and sourceURL syntax changed

更新： 这在 Firefox 中不起作用。针对这个问题创建了几个错误，但到目前为止还没有修复，script tag using sourceURL doesn't appear in debugger sources pane

【讨论】：

是的，刚刚找到那个bug的链接，不知道有没有解决办法