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

Question

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

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

如何从源字符串附加脚本以便我仍然可以在开发工具中调试它？

Answer 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

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

createElement(script)/appendChild how to debug added script?

javascript

debugging

google-chrome-devtools

firefox-developer-tools