chrome瀏覽器如何斷點調試非同步載入的JS，chrome斷點非同步js

chrome瀏覽器如何斷點調試非同步載入的JS，chrome斷點非同步js

前言

在我們日常開發中，常常利用chrome強大的控制台Sources下面進行代碼斷點調試，但是通過$.getScript等非同步載入JS的方式在Sources裡面就是找不到，那如何進行debug斷點調試呢？下面來一起看看。

這是我們用Sources斷點調試的執行個體圖：

圖中我們可以看到，在index.js中我們通過$.getScript引入test.js，看看錶現如何：

我們在Network中看到test.js已經成功引入，但是它卻屬於XHR類請求，這樣我們在Sources必然找不到它。

不出所料，Sources裡果然沒有發現test.js的蹤跡！高潮來了，那還怎麼進行斷點調試呢？？？

我知道兩個方案，先來最簡單的：

方案一： 在test.js代碼的頭部或者尾部加上//@ sourceURL=test.js，然後在(no domain)裡面找到它進行調試，看看結果：

方案二： 把$.getScript這種非同步方式換成建立script標籤同步載入的方式，直接：

總結

控制台斷點對我們進行代碼檢查、功能檢測、資料查看等等需求太有用了，我們盡量用斷點替換那煩人的console.log吧，以上就是這篇文章的全部內容，希望對大家的學習和工作能有所協助，如果有疑問大家可以留言交流。