前端必看！極具提效的網(wǎng)頁 JS 調(diào)試技巧

作者：前端西瓜哥 2023-03-07 10:44:05

本文講解如何使用瀏覽器提供的工具進(jìn)行 JS 代碼的斷點(diǎn)調(diào)試。

大家好，我是前端西瓜哥。本文講解如何使用瀏覽器提供的工具進(jìn)行 JS 代碼的斷點(diǎn)調(diào)試。

debugger

在代碼中需要打斷點(diǎn)的地方，加上 debugger，表示一個(gè)斷點(diǎn)。瀏覽器代碼執(zhí)行到該位置時(shí)，會(huì)停下來，進(jìn)入調(diào)試模式。

示例代碼：

function a() {
  let a_var = 'a';
  b(a_var);
}

function b(a_var_from_a) {
  debugger;
  console.log(global_var);
  let b_var = 'b';
  c();
}

function c() {
  let c_var = 'c';
}

let module_var = 'module';
var global_var = 'global';

a();

整體就是調(diào)用 a，然后 a 調(diào)用 b，b 調(diào)用 c，然后有各種作用域的變量。

記得打開開發(fā)者工具面板，沒打開的話，debugger 會(huì)靜默失敗。

下面是斷點(diǎn)后的樣子。

現(xiàn)在是 a 函數(shù)調(diào)用了 b 函數(shù)，b 函數(shù)調(diào)用的時(shí)候用 debugger 加了個(gè)斷點(diǎn)，于是我們就停在這里了。

此時(shí)上下文狀態(tài)和調(diào)用站會(huì)保留著，方便我們排查是什么分支導(dǎo)致變量狀態(tài)錯(cuò)誤，比如一個(gè)錯(cuò)誤的條件判斷，讓一個(gè)為 null 的變量沒能變成一個(gè)普通對象，導(dǎo)致訪問它的屬性報(bào)錯(cuò)。

手動(dòng)打斷點(diǎn)

在對應(yīng)的行號點(diǎn)一下就可以了，相當(dāng)于加了個(gè) debugger 關(guān)鍵字。

刷新頁面后，手動(dòng)打的斷點(diǎn)還會(huì)保留。

調(diào)用棧信息

首先是函數(shù)調(diào)用棧信息。

調(diào)用的起始端是一個(gè)匿名函數(shù)，沒有名字的函數(shù)都會(huì)顯示 anonymouse，這里是 script 最外層的直接調(diào)用，所以沒有名字。我本人建議多給匿名函數(shù)起個(gè)名字，可讀性會(huì)更好。但如果你有起名困難癥，不起也好。

匿名函數(shù)，然后調(diào)用了函數(shù) a，函數(shù) a 再調(diào)用了函數(shù) b，然后停下了。之后還會(huì)調(diào)用 c。

看到 b 旁邊的藍(lán)色箭頭沒，它表示我們正在觀測哪個(gè)函數(shù)的上下文，默認(rèn)會(huì)選擇棧頂。

你可以用光標(biāo)選擇你要觀測的函數(shù)下的變量，并且會(huì)高亮對應(yīng)的代碼。

作用域

我們看看某個(gè)函數(shù)的函數(shù)作用域的上下文。

找到 Scope 這個(gè)標(biāo)簽頁，目前我們可以看到有三種類型：Local、Script 和 Global。

首先是 Local，本地作用域。這里對應(yīng) b 函數(shù)的上下文，可以看到（1）傳入的變量，（2）函數(shù)內(nèi)部聲明的變量，以及（3）this 值。

然后是 Script，表示一個(gè)模塊文件的最外層變量，和全局變量不同，只能被模塊文件內(nèi)的文件的代碼訪問。

最后是 Global，全局作用域。

再補(bǔ)充一個(gè)比較常見的閉包作用域。如果一個(gè)函數(shù)是通過閉包產(chǎn)生的，那在 Local 和 Script 還會(huì)有一個(gè)閉包作用域。

在函數(shù)中訪問一個(gè)變量，其實(shí)就是沿著這條鏈路去查找最先找到的那個(gè)，如果找不到就會(huì)拿到 undefined。

當(dāng)然除了這些，還有不少，比如塊作用域（Block）、捕獲作用域（Catch Block）、Eval 作用域、With 塊作用域等，篇幅原因，不一一介紹了。

執(zhí)行下一步

實(shí)際我們還要看看代碼是否如預(yù)期進(jìn)入我們希望的分支并拿到正確的值，所以需要讓代碼一點(diǎn)點(diǎn)執(zhí)行下去，觀察狀態(tài)的變化。

瀏覽器提供了各種執(zhí)行下一步代碼的方式。

我們一個(gè)個(gè)過一遍。

Resume 恢復(fù)腳本執(zhí)行

首先是最左邊這個(gè) 矩形+三角形的藍(lán)色按鈕，它表示 結(jié)束當(dāng)前斷點(diǎn)，恢復(fù)腳本運(yùn)行。

但如果往下執(zhí)行，又遇到一個(gè)斷點(diǎn)，那又會(huì)進(jìn)入調(diào)試模式。

于是在長循環(huán)的情況下，就出不來了（悲）。

這時(shí)候惱羞成怒的西瓜哥有個(gè)辦法，長按這個(gè)按鈕，然后出現(xiàn)一個(gè)停止按鈕，點(diǎn)它會(huì) 結(jié)束所有的斷點(diǎn)。

或者更常見的做法是，只在特定判斷條件下的打斷點(diǎn)，比如：

todoItems.forEach(item => {
  // item 不可能為 null，我們來看看發(fā)生甚么事了
  if (!item) {
    debugger;
  }
  // ...
})

Step over 跳過下一個(gè)函數(shù)

然后是跳過下一個(gè)函數(shù)。就是遇到下一個(gè)要執(zhí)行的函數(shù)，就不進(jìn)去了，執(zhí)行完它繼續(xù)往下運(yùn)行。

為什么要跳過函數(shù)？因?yàn)楹瘮?shù)里面有很多代碼，或者里面又調(diào)用了其他函數(shù)，要走好久才能回到當(dāng)前函數(shù)。

如果我們只是想看當(dāng)前函數(shù)的完整邏輯，那就跳過其下的函數(shù)執(zhí)行。

Step into 進(jìn)入下一個(gè)函數(shù)

如果走著走著遇到一個(gè)函數(shù)，進(jìn)入這個(gè)函數(shù)。

注意，瀏覽器環(huán)境自帶的 api 方法是進(jìn)不去的。

Step out 跳出當(dāng)前函數(shù)

如果你不想再看當(dāng)前函數(shù)的執(zhí)行了，想回到調(diào)用它的函數(shù)，就可以選擇這個(gè)方式。

Step 下一步

就是普通的下一步，它會(huì)嚴(yán)格遵守代碼的執(zhí)行順序，比較常用。

Step into 和 Step 的區(qū)別

Step into 和 Step 在大體的表現(xiàn)上有些相同，遇到函數(shù)是會(huì)進(jìn)入函數(shù)內(nèi)部的，但在異步代碼下，行為有一些不同。

Step into 在遇到一個(gè)異步代碼的回調(diào)函數(shù)，會(huì)直接掛起并讓后面的同步代碼繼續(xù)跑，直到這個(gè)異步函數(shù)被執(zhí)行，然后進(jìn)入這個(gè)函數(shù)。

而 Step 則符合代碼的執(zhí)行順序，先執(zhí)行后面的同步代碼，然后再執(zhí)行異步函數(shù)。

我們用一個(gè)實(shí)例演示一下。代碼為：

window.onclick = () => {
  debugger;
  setTimeout(() => {
    console.log('inside');
    console.log('p1', performance.now() / 1000);
  }, 2000);
  console.log('p2', performance.now() / 1000);
  console.log('p3', performance.now() / 1000);
};

Step into 的表現(xiàn)：