英文 | 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 時停止執行代碼。

如下圖：

• 右鍵單擊要添加斷點的代碼行

• 單擊“ Add 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 腳本用于展平堆棧

Blackboxing 腳本將通過從堆棧中排除特定的腳本或某些匹配模式的腳本來過濾調用堆棧。

例如，如果我有99%的時間只調試 userland 中的代碼感興趣，我可以在 Blackbox 中添加一個模式，將 node_modules 文件夾下的所有腳本過濾掉。

要通過 Blackbox 過濾一個腳本，有兩種方法：

• 右鍵單擊 Sources 選項卡中的 JS 腳本，然后單擊“Blackbox Script”

• 轉到Chrome設置頁面，然后轉到 Blackboxing 并單擊 Add Pattern… 并輸入您想要加入 Blackbox 的正則，在您想要過濾大量腳本時很有用。

監視表達式

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

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

有一個需要注意問題：

• 當我們使用斷點進行調試時，監視表達式將被立刻執行，不需要刷新頁面

• 如果代碼在正常運行時，則需要手動單擊刷新按鈕

結語

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

題圖、編輯由公眾號「Web項目聚集地」制作，歡迎關注獲取熱門技術博文。

總結

以上是生活随笔為你收集整理的console 一行_你还在用 console.log 调试？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。