如何使用Chrome開發工具來調試動態添加到頁面的head元素的javascript標簽？

Question

我正在嘗試使用Chrome的開發工具來調試頁面上javascript的流程。 我有一個加載了JavaScript的第三方系統，該JavaScript使用以下代碼將SCRIPT標簽動態添加到頁面上的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”時，如何捕獲？

Answer 1

盡管BenG的回答將涵蓋大多數情況，但我的情況卻被每次動態提供的不同文件名所混淆。 我的解決方案是為“腳本第一條語句”添加一個事件偵聽器，然后費力地處理所有其他腳本，直到找到所需的腳本為止。

Answer 2

選項1

我剛剛在指向jQuery Validation的上方使用了您的代碼：

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');

只要開發人員工具處於打開狀態，斷點就會被擊中。