javascript - 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