代码之家 › 专栏 › 技术社区 › exebook

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

firefox-developer-tools google-chrome-devtools debugging javascript

exebook · 技术社区 · 6 年前

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

我正在添加这样的脚本,注意没有 src 但是 innerHTML 相反,根据需要获取脚本 XMLHttpRequest . 不幸的是,这个脚本没有出现在开发工具中,没有出现在chrome中,也没有出现在firefox中。

如何附加源字符串中的脚本,以便我仍然可以在devtools中调试它?

1 回复 | 直到 6 年前

Ajanth 6 年前

为了能够在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);

现在,如果在dev控制台中打开source选项卡,您将在(无域)部分(通常)下找到test_name.js文件。我刚在Chrome版本67.0.x中验证过

我相信Firefox也会有同样的效果,

也可以参考这些链接,

Chrome Dev Tools

sourceMappingURL and sourceURL syntax changed

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

推荐文章

João Otero · 我在这个Javascript数组行为中遗漏了什么?[副本]

2 年前

darwhite · Dom未在web浏览器for web中显示所有内容。WhatsAppcom[关闭]

2 年前

Felkru · 为什么我的内容在devtools响应大小中没有完全填满

3 年前

edjm · 如何使用浏览器调试器控制台窗口显示箭头函数=>{…}房产?

3 年前

ioliano · 是否有可能像Chrome开发者网络一样在android中嗅探请求?

6 年前

Hamdi Alp · 镀铬。存储同步设置和获取失败

6 年前

toshi · 如何安装debuggerWorker。反应本机调试器上的js?

6 年前

Oak · 我可以从devtools控制台截图吗?

6 年前

Stephan Ahlf · 如何找出触发HTML导航的位置

6 年前

VELFR · 如何在使用Papa解析框架将CSV文件转换为JSON时处理“未定义”错误?

7 年前