你還在用 console.log 除錯？

英文 | Giancarlo Buomprisco

譯文 | 梁天培

連結 | juejin。im/post/5d18d6eb6fb9a07edc0b6cc4

前言：Chrome 開發工具

當您的程式碼沒有按照預期執行的時候，您是否還在用 console。log 來進行除錯？如果是，那這篇文章就是為您準備的。

我寫這篇文章的目的是讓您瞭解 Chrome 開發工具提供的高效工具，讓您可以更好、更快地除錯 Javascript 程式碼。

本文主要講述以下幾點內容：

設定斷點以除錯特定行的程式碼

檢視呼叫堆疊

暫停/恢復指令碼執行

設定表示式

開發工具的生產力提示和技巧

除錯執行時程式碼

當代碼出現 bug 或沒有按照預期執行時，我們通常會檢視開發者工具中的 Sources 選項卡，接下來我們將透過不同場景來深入瞭解這個功能模組。

斷點

在閱讀本文之前，您可能習慣於使用控制檯列印某個值來除錯程式碼。但我希望向您介紹一種更高效的方法，一種能更深入程式碼中的方法：斷點。

設定斷點通常是除錯過程的第一步。雖然目前大多數瀏覽器中的內建開發工具，都允許您除錯正在瀏覽的頁面，停止在特定程式碼行上或者在特定語句上執行程式碼，但在本文中，我們將主要講解 Chrome 開發者工具。

什麼是斷點？

通常，您可能希望停止執行程式碼，以便您可以逐行地檢視特定的上下文。

一旦程式碼在斷點處停止，我們就可以透過訪問作用域，檢視呼叫堆疊，甚至在執行時更改程式碼來進行除錯。

如何設定斷點？

由於使用哪種前端技術對除錯來說並不重要，為了更方便地向您解釋斷點，我將除錯用於培訓的一個 Angular 專案。

首先，開啟開發工具並轉到 Sources 選項卡

然後，開啟我們要除錯的檔案

開啟檔案後，我們可以透過單擊需要停止的那行程式碼來設定斷點

小提示：在 Mac 上，使用快捷鍵 ⌘ + O 可以開啟檔案選擇器，您可以在其中找到您需要除錯的檔案。在 Windows 上，可以使用 CTRL + O

如上圖所示，我們可以在一行程式碼上更深入地設定斷點，例如在一行程式碼裡的不同語句。

我們設定了3個斷點：

第一個斷點在程式碼定義時停止執行

第二個斷點將在 priceReceived 函式執行之前停止

第三個斷點將在 priceReceived 被呼叫後立即停止，因此我們也可以檢查箭頭函式的返回值

當呼叫箭頭函式時，執行停止，右側面板 Scope 將顯示當前的上下文，並允許我們訪問所有我們想檢視的值。

如下圖所示，我們可以看到變數 price 的值 。

在下圖中，一旦 priceReceived 執行，第三個斷點就會被使用。

在右側面板中您可以使用 Return value 檢視匿名函式的返回值。

臨時取消斷點

場景：您在程式碼中設定了一堆斷點。

在除錯時，多次重新整理頁面是很常見的操作。

您當前正在除錯的程式碼可能有各種斷點，有時候甚至會達到幾百個。這幾百個斷點可能會浪費您大量的時間。在這種情況下，可以暫時暫停所有斷點的執行，您可以透過切換下圖中的圖示來操作：

執行錯誤時停止

場景：您的程式碼執行產生了錯誤，但您不想設定斷點，因為您不知道何時會丟擲錯誤。

在您的程式碼中丟擲錯誤，這樣就可以檢視程式碼出現了什麼問題。

條件斷點

顧名思義，條件斷點就是僅在條件為真時觸發的斷點。

例如，在上面的示例中，使用者可以在文字區域中輸入非數值。由於 JS 的相容性只會顯示 NaN 而不是丟擲錯誤。

場景：您的程式碼比上面的程式碼更復雜，並且無法確定何時出現 NaN 。

當然，您可以設定一個斷點，但復現錯誤並不容易，可能最終花費半小時來執行程式碼。在這種情況下，您可以使用條件斷點，並僅在出現 NaN 時停止執行程式碼。

如下圖：

右鍵單擊要新增斷點的程式碼行

單擊“ A

dd

conditional breakpoint… ”

新增有效的JS表示式。當然，在呼叫表示式時，您可以引用引數 x 和 y

當表示式為真時，斷點將被觸發

單步執行程式碼

為了充分利用 Dev Tools，值得花一點時間學習開發工具如何幫助我們快速單步執行程式碼，而無需在每一行設定斷點。

使用 Dev Tools 中的 navigator 可以順序逐行執行程式碼。

我將在下面介紹 Step over next function call 與 Step 的不同。在除錯非同步程式碼時，點選 Step 按鈕將按時間順序移動到下一行。

跳過下一個函式呼叫

Step over next function call 按鈕也會順序執行程式碼，但不會進入函式呼叫。也就是說，函式呼叫將被跳過，除非您在函式中設定了斷點，否則偵錯程式將不會在該函式中停止。

如果您仔細觀察上圖，會發現 multiplyBy 和 renderToDOM 這兩個方法執行時沒有像 Step 那樣進入函式內部。

進入下一個函式呼叫

自 Chrome 68 以來，Step Into Next function call 按鈕的作用發生了改變。它類似於上面提到的 Step 。不同之處在於，當進入非同步程式碼時，它將停止在非同步程式碼中，而不是按時間順序執行的程式碼

如上圖所示：如果按時間順序，第32行應該已經執行，但事實並非如此。偵錯程式在等待2秒後才移動到第29行

退出函式呼叫

假設除錯程式碼時，您不想進入某個函式的內部，Step Out of function call 允許您退出函式並在函式呼叫後的下一行停止。

上圖中發生了什麼？

程式碼在第36行的斷點停了下來

然後跳出了函式 renderToDOM

偵錯程式直接移到第29行並跳過 renderToDOM 函式的剩餘部分

全域性變數和即時輸出

有時，在全域性範圍內儲存某些值（例如元件類，大型陣列或複雜物件）會非常有用。

例如，當您想要傳入不同的引數調到某個元件的方法時，在除錯過程中將這些引數新增到全域性範圍可以節省大量時間。

在上圖中，我將陣列 ［previous， current］ 存為全域性變數。開發者工具會自動分配一個名為 temp{n} 的變數，n 基於先前儲存的變數的數目。

如上圖所示，變數被命名temp2，您可以在控制檯中使用它，因為它現在已是一個全域性變量了！

即時輸出是 Chrome 68 中釋出的一項功能，開發工具允許您在輸入程式碼時在控制檯中顯示執行的結果。

如果您仔細觀察上圖會發現，當我將儲存的變數對映到字串陣列時，我沒有按下 Enter 鍵，但結果立即顯示在下一行。

檢視呼叫堆疊

檢視呼叫堆疊是開發者工具提供的最有用的工具之一：您不僅可以在呼叫它們的函式中來回跳轉，還可以在每個步驟檢查它們的作用域。

假設我們有一個簡單頁面和一個輸入數字的指令碼，並在頁面上呈現數字乘以10。我們將呼叫兩個函式：一個用來做乘法，一個用來將結果渲染到頁面中。

如上圖所示，只需單擊 “Call Stack” 窗格中的函式名稱，我們就可以瀏覽它們的作用域。

如果您仔細觀察會發現，每次我們從一個函式呼叫跳到另一個函式呼叫時，作用域都會保留，我們可以在這裡對每一步進行分析！

Blackbox 指令碼用於展平堆疊

Blackbo

xi

ng 指令碼將透過從堆疊中排除特定的指令碼或某些匹配模式的指令碼來過濾呼叫堆疊。

例如，如果我有99%的時間只調試 userland 中的程式碼感興趣，我可以在 Blackbox 中新增一個模式，將 node_modules 資料夾下的所有指令碼過濾掉。

要透過 Blackbox 過濾一個指令碼，有兩種方法：

右鍵單擊 Sources 選項卡中的 JS 指令碼，然後單擊“Blackbox Script”

轉到Chrome設定頁面，然後轉到 Blackbo

xi

ng 並單擊 A

dd

Pattern… 並輸入您想要加入 Blackbox 的正則，在您想要過濾大量指令碼時很有用。

監視表示式

透過監視表示式，您可以定義一些 Javascript 語句，在開發者工具執行顯示這些語句的結果。這是一個特別有趣的工具，因為您可以寫任何您想要的虛擬情況，只要它是一個有效的Javascript表示式。

例如，您可以編寫一個結果始終為 true 的表示式，當表示式結果為 false 時 ，您就可以發現當前的執行狀態存在問題。

有一個需要注意問題：

當我們使用斷點進行除錯時，監視表示式將被立刻執行，不需要重新整理頁面

如果程式碼在正常執行時，則需要手動單擊重新整理按鈕

結語

瀏覽器開發者工具是除錯複雜程式碼的利器。有時您可能需要比 console。log 更進一步的操作，上面提到的功能將提供深入程式碼底層的除錯體驗。這些工具需要一些練習才能完全掌握，所以如果您對部分功能還不熟悉，請不要放棄，繼續堅持使用它們。

題圖、編輯由公眾號「Web專案聚集地」製作，歡迎

關注

獲取熱門技術博文。