一共兩節（基本上調試JavaScript夠用了）
本互動式教程循序漸進地教您在 Chrome DevTools 中調試 JavaScript 的基本工作流程。 雖然教程介紹的是如何調試一種具體問題，但您學到的一般工作流程對調試各種類型的 JavaScript 錯誤均有幫助。
如果您使用 <code>console.log()</code> 來查找和修正代碼中的錯誤，可以考慮改用本教程介紹的工作流程。 其速度快得多，也更有效。
重制錯誤始終是調試的第一步。“重制錯誤”是指找到一系列總是能導緻錯誤出現的操作。
您可能需要多次重制錯誤，是以要盡量避免任何多餘的步驟。
請按照以下說明重制您要在本教程中修正的錯誤。
點選 Open Demo。示範頁面在新标簽中打開。
OPEN DEMO
在示範頁面上，輸入 <code>5</code> 作為 Number 1。
輸入 <code>1</code> 作為 Number 2。
點選 Add Number 1 and Number 2。
檢視輸入和按鈕下方的标簽。上面顯示的是 <code>5 + 1 = 51</code>。
啊嗚。這個結果是錯誤的。正确結果應為 <code>6</code>。這就是您要修正的錯誤。
DevTools 讓您可以暫停執行中的代碼，并對暫停時刻的所有變量值進行檢查。 用于暫停代碼的工具稱為斷點。 立即試一試：
按 Command+Option+I (Mac) 或 Ctrl+Shift+I（Windows、Linux）在示範頁面上打開 DevTools。
點選 Sources 标簽。
點選 Event Listener Breakpoints 将該部分展開。DevTools 顯示一個包含 Animation 和 Clipboard 等可展開事件類别的清單。
在 Mouse 事件類别旁，點選 Expand
。DevTools 顯示一個包含 click 等 Mouse 事件的清單，事件旁有相應的複選框。
選中 click 複選框。
圖 1：DevTools 在示範頁面上打開，Sources 面闆獲得焦點，click 事件偵聽器斷點處于啟用狀态。 如果 DevTools 視窗較大，則 Event Listener Breakpoints 窗格位于右側，而不是像螢幕截圖中那樣位于左下方。
傳回至示範頁面，再次點選 Add Number 1 and Number 2。DevTools 暫停示範并在 Sources 面闆中突出顯示一行代碼。 DevTools 突出顯示的是下面這行代碼：
<code>function onClick() {</code>
當您選中 click 複選框時，就是在所有 <code>click</code> 事件上設定了一個基于事件的斷點。 點選了任何節點，并且該節點具有 <code>click</code> 處理程式時，DevTools 會自動暫停在該節點 <code>click</code> 處理程式的第一行。
Note: 這不過是 DevTools 提供的衆多斷點類型中的一種。應使用的斷點類型取決于您要調試的問題類型。
一個常見的錯誤原因是腳本執行順序有誤。 可以通過單步調試代碼一次一行地檢查代碼執行情況，準确找到執行順序異常之處。立即試一試：
在 DevTools 的 Sources 面闆上，點選 Step into next function call
，一次一行地單步調試 <code>onClick()</code> 函數的執行。DevTools 突出顯示下面這行代碼：
<code>if (inputsAreEmpty()) {</code>
點選 Step over next function call
。 DevTools 執行 <code>inputsAreEmpty()</code> 但不進入它。 請注意 DevTools 是如何跳過幾行代碼的。 這是因為 <code>inputsAreEmpty()</code> 求值結果為 false，是以 <code>if</code> 語句的代碼塊未執行。
這就是單步調試代碼的基本思路。如果您看一下 <code>get-started.js</code> 中的代碼，就能發現錯誤多半出在 <code>updateLabel()</code>函數的某處。您可以不必單步調試每一行代碼，而是使用另一種斷點在靠近錯誤位置的地方暫停代碼。
代碼行斷點是最常見的斷點類型。如果您想在執行到某一行代碼時暫停，請使用代碼行斷點。立即試一試：
看一下 <code>updateLabel()</code> 中的最後一行代碼，其内容類似于：
<code>label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;</code>
在這行代碼的左側，可以看到這行代碼的行号： 32。點選 32。DevTools 會在 32 上放置一個藍色圖示。 這意味着這行代碼上有一個代碼行斷點。 DevTools 現在總是會在執行這行代碼之前暫停。
點選 Resume script execution
。 腳本繼續執行，直至到達您設定了斷點的代碼行。
看一下 <code>updateLabel()</code> 中已執行的代碼行。
DevTools 列印輸出 <code>addend1</code>、<code>addend2</code> 和 <code>sum</code> 的值。
<code>sum</code> 的值疑似有問題。其求值結果本應是數字，而實際結果卻是字元串。 這可能就是造成錯誤的原因。
另一種常見的錯誤原因是，變量或函數産生的值異常。 許多開發者都利用 <code>console.log()</code> 來了解值随時間變化的情況，但 <code>console.log()</code> 可能單調乏味而又效率低下，原因有兩個。 其一，您可能需要手動編輯大量調用 <code>console.log()</code> 的代碼。 其二，由于您不一定知曉究竟哪一個變量與錯誤有關，是以可能需要對許多變量進行記錄。
DevTools 為 <code>console.log()</code> 提供的其中一個替代工具是監視表達式。可以使用監視表達式來監視變量值随時間變化的情況。顧名思義，監視表達式的監視對象不僅限于變量。您可以将任何有效的 JavaScript 表達式存儲在監視表達式中。 立即試一試：
在 DevTools 的 Sources 面闆上，點選 Watch。該部分随即展開。
點選 Add Expression
。
鍵入 <code>typeof sum</code>。
按 Enter。DevTools 顯示 <code>typeof sum: "string"</code>。冒号右側的值就是監視表達式的結果。
圖 1：建立 <code>typeof sum</code> 監視表達式後的“監視表達式”窗格（右下方）。 如果 DevTools 視窗較大，則“監視表達式”窗格位于右側，Event Listener Breakpoints 窗格的上方。
正如猜想的那樣，<code>sum</code> 的求值結果本應是數字，而實際結果卻是字元串。 這就是示範頁面錯誤的原因。
DevTools 為 <code>console.log()</code> 提供的另一個替代工具是 Console。可以使用 Console 對任意 JavaScript 語句求值。開發者通常利用 Console 在調試時覆寫變量值。在您所處的情況下，Console 可幫助您測試剛發現的錯誤的潛在解決方法。 立即試一試：
如果您尚未打開 Console 抽屜，請按 Escape 将其打開。 它會在 DevTools 視窗底部打開。
在 Console 中，鍵入 <code>parseInt(addend1) + parseInt(addend2)</code>。
按 Enter。DevTools 對語句求值并列印輸出 <code>6</code>，即您預料示範頁面會産生的結果。
圖 1：對 <code>parseInt(addend1) + parseInt(addend2)</code> 求值後的 Console 抽屜。
您已找到錯誤的潛在解決方法。剩下的工作就是編輯代碼後重新運作示範頁面來測試修正效果。 您不必離開 DevTools 就能應用修正。 您可以直接在 DevTools UI 内編輯 JavaScript 代碼。 立即試一試：
在 DevTools 的 Sources 面闆上的代碼編輯器中，将 <code>var sum = addend1 + addend2</code> 替換為 <code>var sum = parseInt(addend1) + parseInt(addend2);</code>。它就是您目前暫停位置上面那行代碼。
按 Command+S (Mac) 或 Ctrl+S（Windows、Linux）儲存更改。代碼的背景色變為紅色，這表示在 DevTools 内更改了腳本。
點選 Deactivate breakpoints
。它變為藍色，表示處于活動狀态。 如果進行了此設定，DevTools 會忽略您已設定的任何斷點。
使用不同的值測試示範頁面。現在示範頁面應能正确計算求和。
切記，此工作流程隻對運作在浏覽器中的代碼應用修正。 它不會為所有運作您的頁面的使用者修正代碼。 要實作該目的，您需要修正運作在提供頁面的伺服器上的代碼。
恭喜！現在您已掌握了在 DevTools 中調試 JavaScript 的基礎知識。
本教程隻向您介紹了兩種設定斷點的方法。DevTools 還提供了許多其他方法，其中包括：
僅在滿足您指定的條件時觸發的條件斷點。
發生已捕獲或未捕獲異常時觸發的斷點。
當請求的網址與您提供的子字元串比對時觸發的 XHR 斷點。
為我示範所有斷點
有幾個代碼單步執行控件在本教程中未予說明。 請點選以下連結，了解有關它們的更多資訊。
下一節：掌握代碼單步調試知識
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.