如何在瀏覽器的調試器本身中調試動態加載的JavaScript（使用jQuery）？

動態添加的腳本未顯示在瀏覽器的調試器的腳本部分中。如何在瀏覽器的調試器本身中調試動態加載的JavaScript（使用jQuery）？

說明：

我需要使用和已經使用

if(someCondition == true){ 
    $.getScript("myScirpt.js", function() { 
     alert('Load Complete'); 
     myFunction(); 
    }); 
}

使myScript.js可以動態加載在滿足某些條件...... 而myFunction的只能得到之後調用整個腳本加載...

但瀏覽器沒有在其調試器的腳本部分顯示動態加載的myScript.js。

有沒有另外的方法，以便所有的目標可以實現，這將使人們能夠在瀏覽器本身調試動態加載腳本？

來源

2012-02-01 TwiToiT

可能重複[可能通過一些調試器，如WebKit，FireBug或IE8開發工具調試動態加載JavaScript？]（http://stackoverflow.com/questions/1705952/is-possible-to-debug-dynamic- loading javascript-by-some-debugger-like-webkit-fi） – JerryGoyal 2016-01-12 07:27:42

139

您可以爲您的動態加載的腳本命名一個名稱，以便它在Chrome/Firefox JavaScript調試器中顯示。要做到這一點，你把評論在腳本的末尾：然後

//# sourceURL=filename.js

此文件將顯示在「資源」選項卡，filename.js。根據我的經驗，您可以在名稱中使用\，但如果使用/，則會出現奇怪的行爲。

欲瞭解更多信息，請參閱： Breakpoints in Dynamic JavaScript deprecation of //@sourceurl

來源

2013-01-03 00:18:50 Mark

由於這沒有標記爲正確的，所以我在評論以確認這實際上是一種魅力。 – 2013-03-31 23:51:26

我不知道爲什麼這沒有被標記爲正確的答案。 AFIK，這是最好的解決方案。 – kiprainey 2013-05-23 13:51:25

真誠的道歉已經閱讀這個答案這麼晚！ – TwiToiT 2013-07-18 02:52:29

我嘗試使用「//＃sourceURL = filename.js」建議由OP一個變通方法，但它仍然是沒有顯示出來的我在「來源」面板中，除非它在上次生成異常時已經存在於我的選項卡中。

對「調試器」進行編碼線迫使它在該位置中斷。然後，一旦它位於Sources面板的我的選項卡中，我可以像正常一樣設置斷點並刪除「調試器」;線。

來源

2014-05-20 20:55:51 kevinpo

它也可能顯示在Sources選項卡下的（無域）列表中。 – Splaktar 2014-08-19 19:53:24

我還需要使用'debugger;'，DevTools必須在腳本加載時打開。 – Barmar 2015-07-16 16:59:47

注意，源文件出現在源標籤這種方式將出現在（無域）組，如果你想調試它，你需要在你的代碼中添加debugger;線，使該行將被執行（通常在執行源文件開始時），然後在任何你想要的地方添加斷點。

如果您正在調試生產階段，那麼您的代碼中可能沒有debugger;行，您可以通過使用CharlesProxy的本地映射到「通過debbuger行插入源文件的新副本」」。

來源

2016-07-01 10:08:33

這救了我！不管我做了什麼，只要我輸入一個調試器命令，該文件就不會顯示出來。之後，即使在我刪除了調試器命令後，它仍然在頁面重新加載和調試會話中持續存在。 – 2017-03-06 18:34:39

您可以在腳本文件或腳本標記末尾使用//# sourceURL=和//# sourceMappingURL=。

注意：//@ sourceURL和//@ sourceMappingURL已棄用。

來源

2016-09-24 08:33:35 xRavisher

更多棄用信息：https：//developers.google.com/web/updates/2013/06/sourceMappingURL-and-sourceURL-syntax-changed – Pysis 2016-10-14 17:32:39

如何在瀏覽器的調試器本身中調試動態加載的JavaScript（使用jQuery）？

回答

相關問題