在 Chrome DevTools 中除錯 JavaScript 入門

一共兩節（基本上除錯JavaScript夠用了）

本互動式教程循序漸進地教您在 Chrome DevTools 中除錯 JavaScript 的基本工作流程。 雖然教程介紹的是如何除錯一種具體問題，但您學到的一般工作流程對除錯各種型別的 JavaScript 錯誤均有幫助。

如果您使用 console.log() 來查詢和修正程式碼中的錯誤，可以考慮改用本教程介紹的工作流程。 其速度快得多，也更有效。

第 1 步：重現錯誤

重現錯誤始終是除錯的第一步。“重現錯誤”是指找到一系列總是能導致錯誤出現的操作。

您可能需要多次重現錯誤，因此要儘量避免任何多餘的步驟。

請按照以下說明重現您要在本教程中修正的錯誤。

1. 點選 Open Demo。演示頁面在新標籤中開啟。

   OPEN DEMO

2. 在演示頁面上，輸入 5 作為 Number 1。

3. 輸入 1 作為 Number 2。
4. 點選 Add Number 1 and Number 2。
5. 檢視輸入和按鈕下方的標籤。上面顯示的是 5 + 1 = 51。

啊嗚。這個結果是錯誤的。正確結果應為 6。這就是您要修正的錯誤。

第 2 步：使用斷點暫停程式碼

DevTools 讓您可以暫停執行中的程式碼，並對暫停時刻的所有變數值進行檢查。 用於暫停程式碼的工具稱為斷點。 立即試一試：

1. 按 Command+Option+I (Mac) 或 Ctrl+Shift+I（Windows、Linux）在演示頁面上開啟 DevTools。

2. 點選 Sources 標籤。

1. 點選 Event Listener Breakpoints 將該部分展開。DevTools 顯示一個包含 Animation 和 Clipboard
    等可展開事件類別的列表。

1. 在 Mouse 事件類別旁，點選 Expand 。DevTools 顯示一個包含 click 等 Mouse 事件的列表，事件旁有相應的複選框。

2. 選中 click 複選框。

    

   圖 1：DevTools 在演示頁面上開啟，Sources 面板獲得焦點，click 事件偵聽器斷點處於啟用狀態。 如果 DevTools 視窗較大，則 Event Listener Breakpoints 窗格位於右側，而不是像螢幕截圖中那樣位於左下方。

    

3. 返回至演示頁面，再次點選 Add Number 1 and Number 2。DevTools 暫停演示並在 Sources 面板中突出顯示一行程式碼。 DevTools 突出顯示的是下面這行程式碼：

   function onClick() {

當您選中 click 複選框時，就是在所有 click 事件上設定了一個基於事件的斷點。 點選了任何節點，並且該節點具有 click 處理程式時，DevTools 會自動暫停在該節點 click 處理程式的第一行。

Note: 這不過是 DevTools 提供的眾多斷點型別中的一種。應使用的斷點型別取決於您要除錯的問題型別。

第 3 步：單步除錯程式碼

一個常見的錯誤原因是指令碼執行順序有誤。 可以通過單步除錯程式碼一次一行地檢查程式碼執行情況，準確找到執行順序異常之處。立即試一試：

1. 在 DevTools 的 Sources 面板上，點選 Step into next function call ，一次一行地單步除錯 onClick() 函式的執行。DevTools 突出顯示下面這行程式碼：

   if (inputsAreEmpty()) {

2. 點選 Step over next function call 。 DevTools 執行 inputsAreEmpty() 但不進入它。 請注意 DevTools 是如何跳過幾行程式碼的。 這是因為 inputsAreEmpty() 求值結果為 false，所以 if 語句的程式碼塊未執行。

這就是單步除錯程式碼的基本思路。如果您看一下 get-started.js 中的程式碼，就能發現錯誤多半出在 updateLabel()函式的某處。您可以不必單步除錯每一行程式碼，而是使用另一種斷點在靠近錯誤位置的地方暫停程式碼。

第 4 步：設定另一個斷點

程式碼行斷點是最常見的斷點型別。如果您想在執行到某一行程式碼時暫停，請使用程式碼行斷點。立即試一試：

1. 看一下 updateLabel() 中的最後一行程式碼，其內容類似於：

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

2. 在這行程式碼的左側，可以看到這行程式碼的行號： 32。點選 32。DevTools 會在 32 上放置一個藍色圖示。 這意味著這行程式碼上有一個程式碼行斷點。 DevTools 現在總是會在執行這行程式碼之前暫停。

3. 點選 Resume script execution 。 指令碼繼續執行，直至到達您設定了斷點的程式碼行。
4. 看一下 updateLabel() 中已執行的程式碼行。

DevTools 列印輸出 addend1、addend2 和 sum 的值。

sum 的值疑似有問題。其求值結果本應是數字，而實際結果卻是字串。 這可能就是造成錯誤的原因。

第 5 步：檢查變數值

另一種常見的錯誤原因是，變數或函式產生的值異常。 許多開發者都利用 console.log() 來了解值隨時間變化的情況，但 console.log() 可能單調乏味而又效率低下，原因有兩個。 其一，您可能需要手動編輯大量呼叫 console.log() 的程式碼。 其二，由於您不一定知曉究竟哪一個變數與錯誤有關，因此可能需要對許多變數進行記錄。

DevTools 為 console.log() 提供的其中一個替代工具是監視表示式。可以使用監視表示式來監視變數值隨時間變化的情況。顧名思義，監視表示式的監視物件不僅限於變數。您可以將任何有效的 JavaScript 表示式儲存在監視表示式中。 立即試一試：

1. 在 DevTools 的 Sources 面板上，點選 Watch。該部分隨即展開。
2. 點選 Add Expression 。
3. 鍵入 typeof sum。

4. 按 Enter。DevTools 顯示 typeof sum: "string"。冒號右側的值就是監視表示式的結果。

    

   圖 1：建立 typeof sum 監視表示式後的“監視表示式”窗格（右下方）。 如果 DevTools 視窗較大，則“監視表示式”窗格位於右側，Event Listener Breakpoints 窗格的上方。

    

正如猜想的那樣，sum 的求值結果本應是數字，而實際結果卻是字串。 這就是演示頁面錯誤的原因。

DevTools 為 console.log() 提供的另一個替代工具是 Console。可以使用 Console 對任意 JavaScript 語句求值。開發者通常利用 Console 在除錯時覆蓋變數值。在您所處的情況下，Console 可幫助您測試剛發現的錯誤的潛在解決方法。 立即試一試：

1. 如果您尚未開啟 Console 抽屜，請按 Escape 將其開啟。 它會在 DevTools 視窗底部開啟。
2. 在 Console 中，鍵入 parseInt(addend1) + parseInt(addend2)。

3. 按 Enter。DevTools 對語句求值並列印輸出 6，即您預料演示頁面會產生的結果。

    

   圖 1：對 parseInt(addend1) + parseInt(addend2) 求值後的 Console 抽屜。

    

第 6 步：應用修正

您已找到錯誤的潛在解決方法。剩下的工作就是編輯程式碼後重新執行演示頁面來測試修正效果。 您不必離開 DevTools 就能應用修正。 您可以直接在 DevTools UI 內編輯 JavaScript 程式碼。 立即試一試：

1. 在 DevTools 的 Sources 面板上的程式碼編輯器中，將 var sum = addend1 + addend2 替換為 var sum = parseInt(addend1) + parseInt(addend2);。它就是您當前暫停位置上面那行程式碼。
2. 按 Command+S (Mac) 或 Ctrl+S（Windows、Linux）儲存更改。程式碼的背景色變為紅色，這表示在 DevTools 內更改了指令碼。
3. 點選 Deactivate breakpoints 。它變為藍色，表示處於活動狀態。 如果進行了此設定，DevTools 會忽略您已設定的任何斷點。
4. 點選 Resume script execution 。
5. 使用不同的值測試演示頁面。現在演示頁面應能正確計算求和。

切記，此工作流程只對執行在瀏覽器中的程式碼應用修正。 它不會為所有執行您的頁面的使用者修正程式碼。 要實現該目的，您需要修正執行在提供頁面的伺服器上的程式碼。

後續步驟

恭喜！現在您已掌握了在 DevTools 中除錯 JavaScript 的基礎知識。

本教程只向您介紹了兩種設定斷點的方法。DevTools 還提供了許多其他方法，其中包括：

• 僅在滿足您指定的條件時觸發的條件斷點。
• 發生已捕獲或未捕獲異常時觸發的斷點。
• 當請求的網址與您提供的子字串匹配時觸發的 XHR 斷點。

為我演示所有斷點

有幾個程式碼單步執行控制元件在本教程中未予說明。 請點選以下連結，瞭解有關它們的更多資訊。

下一節：掌握程式碼單步除錯知識

open content licenses：

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

When you see a page with this notice you are free to use nearly everything on the page in your own creations. For example, you could quote the text in a book, cut-and-paste sections to your blog, record it as an audiobook for the visually impaired, or even translate it into Swahili. Really. That's what open content licenses are all about. We just ask that you give us attribution when you reuse our work.