/

JavaScript 調試指南

JavaScript 調試指南

透過瀏覽器的開發者工具調試 JavaScript 的方法

調試是程序設計師必備的核心技能之一。

有時候即使我們盡了最大的努力，但程序還是不能正確運行，比如說它崩潰了、運行緩慢或打印了錯誤信息。

當你編寫的程序不能按照期望的方式運行時，你該怎麼辦呢？

你需要開始調試。

找出問題可能出在哪裡

第一步總是觀察發生了什麼，並試圖確定問題的根源所在。這是環境問題？是你給程序提供的輸入有問題？它是由於內存使用過多而導致一次性崩潰？還是每次運行都出現這個問題？

在確定問題出自何處之後，你可以開始檢查具體的代碼部分。

閱讀代碼

在調試方面，最簡單的方法之一就是閱讀你自己編寫的代碼。用聲音朗讀。我們自己的聲音有一種神奇的作用，但無法在靜音時產生。

很多時候我都是通過這種方式找出問題所在的。

使用控制台

如果閱讀代碼沒有給你任何提示，下一個合理的步驟就是在你的代碼中添加一些可以提供一些線索的行。

在 JavaScript 前端代碼中，你通常會使用 alert() 和 console.log （和它的其他應用）。

考慮以下代碼：

1
2
3
const a = calculateA()
const b = calculateB()
const result = a + b

結果不正確計算，所以你可以在計算結果之前添加 alert(a) 和 alert(b)，當代碼執行時瀏覽器將彈出兩個警告窗口。

1
2
3
4
5
const a = calculateA()
const b = calculateB()
alert(a)
alert(b)
const result = a + b

如果傳給 alert() 的是一個字符串或一個數字，這樣操作是沒有問題的。但一旦涉及到數組或對象等較復雜的數據類型，使用 alert() 就會變得很困難了，這時候你需要使用控制台 API。我們可以先從 console.log() 開始：

1
2
3
4
5
const a = calculateA()
const b = calculateB()
console.log(a)
console.log(b)
const result = a + b

這將在瀏覽器開發者工具的 JavaScript 控制台中打印出值。在這裡我說明的是在 Chrome DevTools 中進行調試，但一般的概念適用於所有瀏覽器，只是在支持的功能方面有些差異。

參閱 Chrome DevTools 的詳細概述

Chrome DevTools

console.log() 的結果將打印到 JavaScript 控制台中。這是一個在每個瀏覽器中更或多少通用的工具:

瀏覽器控制台

該工具非常強大，可以打印複雜的對象或數組，並且可以檢查它們的每個屬性。

在控制台 API帖子中，你可以看到所有的選項和其工作方式的詳細信息，所以我在這裡不進行詳細解釋。

調試器

調試器是瀏覽器開發人員工具中最強大的工具，它位於“源代碼”面板中：

調試器

屏幕的頂部顯示文件導航器。

你可以選擇任何文件並在右側查看它。這對於設置斷點非常重要，我們稍後會看到。

屏幕的底部部分是實際的調試器。

斷點

當瀏覽器加載一個頁面時，JavaScript 代碼會執行到遇到斷點為止。

此時執行會停止，你可以檢查正在運行的程序的一切。

你可以查看變量的值，並逐行恢復程序的執行。

首先，斷點是什麼？簡單來說，斷點是放在代碼中的一個 breakpoint 指令。當瀏覽器遇到它時，它就會停止。

這在開發過程中是一個不錯的選擇。另一個選擇是在源代碼面板中打開該文件，然後點擊要添加斷點的行號：

添加斷點

再次點擊斷點將刪除它。

在添加斷點之後，你可以重新加載頁面，當它找到斷點時，代碼將停在該執行點。

在你添加斷點時，你可在“斷點”面板中看到 form.js 在第 7 行有斷點。你可以在那裡看到所有的斷點，並且可以暫時禁用它們。

還有其他類型的斷點：

  • XHR/fetch 斷點：當發送任何網絡請求時觸發
  • DOM 斷點：當 DOM 元素發生更改時觸發
  • 事件監聽器斷點：當某些事件發生時觸發，比如鼠標點擊

斷點

作用域

在這個示例中，我在事件監聽器內設置了斷點，所以我必須提交一個表單才能觸發它：

觸發斷點

現在，作用域中的所有變量都被打印出來，並顯示其相應的值。你可以通過雙擊它們來編輯這些變量。

觀察變量和表達式

在 作用域 面板的右側是 觀察 面板。

它有一個 + 按鈕，可以用於添加任何表達式。例如添加 name 將打印出 name 變量的值，例如 Flavio。你還可以添加 name.toUpperCase()，它將打印出 FLAVIO ：

觀察表達式

恢復執行

現在腳本都已暫停，因為斷點停止了執行。

在“設置在斷點處”的橫幅上方有一組按鈕，它們可以改變此狀態。

第一個按鈕是藍色的。點擊它將恢復正常的腳本執行。

第二個按鈕是 逐個跳轉，它使腳本執行恢復到下一行，然後再次停止。

下一個按鈕執行 逐步進入 操作：進入被執行的函數，讓你可以進一步了解其細節。

逐步退出 是相反的：回到調用此函數的外部函數。

這些都是在調試過程中控制流程的主要方式。

編輯腳本

在這個工具中，您可以編輯任何腳本，包括停止在其執行過程中的腳本。只需編輯文件，然後在 Mac 上按下 cmd-S，Windows/Linux 上按下 ctrl-S。

當然，除非您本地工作並在開發工具中設置了工作區，否則更改不會持久保存到磁盤。這是一個更高級的主題。

檢查調用堆棧

調用堆棧 很好地顯示了你深入 JavaScript 代碼的函數層級。你可以通過點擊每個函數名稱來向上移動堆棧：

調用堆棧

黑盒子腳本

通常情況下，你使用的是某些庫，你不想 “跳轉進入” 库中的代碼，你完全相信它們，不想再看到它們在調用堆棧中的代碼，這就是上面的 validator.min.js。它用於電子郵件驗證。

我相信它能很好地完成工作，所以我可以在通話堆棧中右擊它，然後點擊 加入黑盒子腳本。從那時起，不可能跳轉到這個腳本代碼，你只需專注於你自己的應用程式代碼。

使用瀏覽器開發者工具調試 Node.js

由於 Node.js 是基於 Chrome 的相同引擎 V8，你可以把兩者連接在一起，並使用 Chrome DevTools 檢查 Node.js 應用程序的執行。

打開您的終端並運行

1
node —-inspect

node-inspect

然後在 Chrome 中輸入此 URL：about://inspect。

node-link-browser

在 Node 目標旁邊點擊“在瀏覽器中打開專用的 DevTools” 鏈接，你就可以使用瀏覽器 DevTools 在瀏覽器中訪問 Node.js：

node-console

確保點擊它，而不是下面的 inspector 鏈接，因為當我們重新啟動時，該工具會自動重新連接到 Node.js 實例 - 非常方便！

tags: [“JavaScript”, “debugging”, “DevTools”]