如何使用Chrome开发者工具调试动态添加到页面头部元素的javascript标签？

Question

我正在尝试使用Chrome的开发者工具来调试页面上JavaScript的流程。我有一个第三方系统，它加载JavaScript并动态地向页面的HEAD元素添加SCRIPT标签，使用类似以下代码的方式：

var head= document.getElementsByTagName("head")[0];
var el = document.createElement('script');
el.type = 'text/javascript';
el.src = 'https://address.com/anotherjsscript.js';
head.appendChild(el);

我该如何捕获动态加载的 "anotherjsscript.js" 并对其进行调试？

- Dave Potts

Answer 1

尽管BenG的回答可以涵盖大多数情况，但我的情况非常复杂，每次动态提供不同的文件名。我的解决方案是添加一个“脚本第一语句”的事件监听器，然后费力地逐个查找其他脚本，直到找到我想要的那个。

- Dave Potts

Answer 2

选项1

我刚刚使用了您上面提供的代码，指向jQuery验证：

var head= document.getElementsByTagName("head")[0];
var el = document.createElement('script');
el.type = 'text/javascript';
el.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js';
head.appendChild(el);

第一次让页面运行后，在网络选项卡下会看到请求，右键单击脚本并选择在源面板中打开：

然后添加您的断点，并再次刷新页面：

接下来应该被触发。

选项2

另一个选项是创建以下函数，该函数获取脚本内容，添加debugger并将脚本文本设置为内容：

function debugScript(url){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", url, false );
    xmlHttp.send( null );
    var script = 'debugger; ' + xmlHttp.responseText;
    var head = document.getElementsByTagName("head")[0];
    var el = document.createElement('script');
    el.type = 'text/javascript';
    el.text = script;
    head.appendChild(el);
}

debugScript('https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js');

只要开发者工具打开，断点就会被触发。

- BenG

---

谢谢BenG。我的例子更加难以理解，因为它似乎每次都会动态生成一个不同的文件名。尽管如此，你的答案对于95%的情况仍然是有效的！ - Dave Potts

请查看我在答案中添加的另一种选项，这样做会让您的工作更加轻松 :) - BenG

BenG，你又来了，但是我正在使用一个非常严格限制的第三方工具。添加脚本到文件中的代码也在一个我无法更改的文件中 :( - Dave Potts