如何使用Chrome开发工具调试动态添加到页面的javascript标记'；头元素是什么？

我正在尝试使用Chrome的开发工具调试页面上的javascript流。我有一个加载javascript的第三方系统，该系统使用一些代码动态地向页面上的HEAD元素添加脚本标记，如：

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”？

选项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 另一个选项是创建如下函数，该函数获取脚本内容，在

调试器

前面加上前缀，并将脚本文本设置为内容：-

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的回答将涵盖大多数情况，但我的情况却被严重混淆，每次动态提供不同的文件名。我的解决方案是为“scriptfirst语句”添加一个事件侦听器，然后费力地处理所有其他脚本，直到找到我想要的脚本

---

谢谢你，本。我的例子更令人恼火，因为它实际上似乎每次都给我一个动态生成的不同文件名。但你的答案似乎对95%的情况都是好的！请参阅我的答案中添加的其他选项。应该会让事情变得更容易：）BenG，再次很好，但我使用的是一个真正锁定的第三方工具。将脚本添加到文件的代码也位于我无权更改的文件中：(