在 Chrome DevTools 中調試 JavaScript 入門

找到一系列可一致重現錯誤的操做始終是調試的第一步。javascript

點擊 Open Demo。演示頁面隨即在新標籤中打開。java

git
在 Number 1 文本框中輸入 5。web
在 Number 2 文本框中輸入 1。chrome
點擊 Add Number 1 and Number 2。按鈕下方的標籤顯示 5 + 1 = 51。結果應爲 6。這就是您要修正的錯誤。express

圖 1. 5 + 1 的結果是 51。結果應爲 6。

第 2 步：熟悉 Sources 面板界面

DevTools 可爲更改 CSS、分析頁面加載性能和監控網絡請求等不一樣的任務提供許多不一樣的工具。您可在 Sources 面板中調試 JavaScript。瀏覽器

經過按 Command+Option+I (Mac) 或 Control+Shift+I（Windows、Linux），打開 DevTools。此快捷方式可打開Console 面板。網絡

圖 2. Console 面板
點擊 Sources 標籤。閉包

圖 3. Sources 面板

Sources 面板界面包含 3 個部分：app

圖 4. Sources 面板界面的 3 個部分

File Navigator 窗格。此處列出頁面請求的每一個文件。
Code Editor 窗格。在 File Navigator 窗格中選擇文件後，此處會顯示該文件的內容。
JavaScript Debugging 窗格。檢查頁面 JavaScript 的各類工具。若是 DevTools 窗口布局較寬，此窗格會顯示在 Code Editor 窗格右側。

第 3 步：使用斷點暫停代碼

調試這種問題的經常使用方法是將多個 console.log() 語句插入代碼，以便在執行腳本時檢查相關值。例如：

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

雖然 console.log() 方法能夠完成任務，但斷點能夠更快完成此任務。斷點可以讓您在執行代碼的過程當中暫停代碼，並在此時及時檢查全部相關值。與 console.log() 方法相比，斷點具備一些優點：

使用 console.log()，您須要手動打開源代碼，查找相關代碼，插入 console.log() 語句，而後從新加載此頁面，才能在控制檯中看到這些消息。使用斷點，無需瞭解代碼結構便可暫停相關代碼。
在 console.log() 語句中，您須要明確指定要檢查的每一個值。使用斷點，DevTools 會在暫停時及時顯示全部變量值。有時在您不知道的狀況下，有些變量會影響您的代碼。

簡言之，與 console.log() 方法相比，斷點可幫助您更快地查找和修正錯誤。

若是退一步思考應用的運做方式，您能夠根據經驗推測出，使用與 Add Number 1 and Number 2 按鈕關聯的 click 事件偵聽器時計算的和不正確 (5 + 1 = 51)。所以，您可能須要在 click 偵聽器運行時暫停代碼。 Event Listener Breakpoints 可以讓您完成此任務：

在 JavaScript Debugging 窗格中，點擊 Event Listener Breakpoints 以展開該部分。 DevTools 會顯示 Animation 和 Clipboard 等可展開的事件類別列表。
在 Mouse 事件類別旁，點擊 Expand 。 DevTools 會顯示 click 和 mousedown 等鼠標事件列表。每一個事件旁都有一個複選框。
勾選 click 複選框。 DevTools 如今通過設置能夠在任何 click 事件偵聽器運行時自動暫停。

圖 5. 已啓用 click 複選框
返回至演示頁面，再次點擊 Add Number 1 and Number 2。 DevTools 會暫停演示並在 Sources 面板中突出顯示一行代碼。 DevTools 應在此代碼行暫停：
```
function onClick() {
```
若是是在其餘代碼行暫停，請按 Resume Script Execution ， {:.cdt-inl} 直到在正確的代碼行暫停爲止。

注：若是是在其餘代碼行暫停，可以使用瀏覽器擴展程序在您訪問的每一頁上註冊一個 click 事件偵聽器。使用擴展程序的 click 偵聽器可執行暫停操做。若是是採用無痕模式進行隱私瀏覽，將會停用全部擴展程序，並且您會發現您每次都在正確的代碼行暫停。

Event Listener Breakpoints 只是 DevTools 提供的多種斷點類型之一。您須要記住全部不一樣的類型，由於每種類型最終均可幫助您儘快調試不一樣情景的問題。如需瞭解使用每種類型的時機和方式，請參閱使用斷點暫停代碼。

第 4 步：單步調試代碼

一個常見的錯誤緣由是腳本執行順序有誤。能夠經過單步調試代碼一次一行地檢查代碼執行狀況，準確找到執行順序異常之處。當即嘗試：

在 DevTools 的 Sources 面板上，點擊 Step into next function call ，{:.devtools-inline} 以便一次一行地單步調試 onClick() 函數的執行。 DevTools 突出顯示下面這行代碼：
```
if (inputsAreEmpty()) {
```
點擊 Step over next function call {:.devtools-inline}。 DevTools 執行但不進入 inputsAreEmpty()。請注意 DevTools 是如何跳過幾行代碼的。這是由於 inputsAreEmpty() 求值結果爲 false，因此 if 語句的代碼塊未執行。

這就是單步調試代碼的基本思路。若是看一下 get-started.js 中的代碼，您會發現錯誤多半出在 updateLabel() 函數的某處。您可使用另外一種斷點來暫停較接近很可能出錯位置的代碼，而不是單步調試每一行代碼。

第 5 步：設置代碼行斷點

代碼行斷點是最多見的斷點類型。若是您想在執行到某一行代碼時暫停，請使用代碼行斷點：

看一下 updateLabel() 中的最後一行代碼：

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

在這行代碼的左側，您能夠看到這行代碼的行號是 32。點擊 32。 DevTools 會在 32 上方放置一個藍色圖標。這意味着這行代碼上有一個代碼行斷點。 DevTools 如今始終會在執行此行代碼以前暫停。
點擊 Resume script execution {:.devtools-inline}。腳本將繼續執行，直到第 32 行。在第 29 行、第 30 行和第 31 行上，DevTools 會在各行分號右側輸出 addend1、addend2 和 sum 的值。

圖 6. DevTools 在第 32 行代碼行斷點處暫停

第 6 步：檢查變量值

addend1、addend2 和 sum 的值疑似有問題。這些值位於引號中，這意味着它們是字符串。這個假設有助於說明錯誤的緣由。如今能夠收集更多信息。 DevTools 可提供許多用於檢查變量值的工具。

方法 1：Scope 窗格

在某代碼行暫停時，Scope 窗格會顯示當前定義的局部和全局變量，以及各變量值。其中還會顯示閉包變量（若是適用）。雙擊變量值可進行編輯。若是不在任何代碼行暫停，則 Scope 窗格爲空。

圖 7. Scope 窗格

方法 2：監視表達式

Watch Expressions 標籤可以讓您監視變量值隨時間變化的狀況。顧名思義，監視表達式不只限於監視變量。您能夠將任何有效的 JavaScript 表達式存儲在監視表達式中。當即嘗試：

點擊 Watch 標籤。
點擊 Add Expression 。
輸入 typeof sum。
按 Enter 鍵。 DevTools 會顯示 typeof sum: "string"。冒號右側的值就是監視表達式的結果。

圖 8. 建立 typeof sum 監視表達式後的 Watch Expression 窗格（右下方）。若是 DevTools 窗口較大，Watch Expression 窗格位於右側 Event Listener Breakpoints 窗格的上方。

正如猜測，sum 的求值結果本應是數字，而實際結果倒是字符串。如今已肯定這就是錯誤的緣由。

方法 3：控制檯

除了查看 console.log() 消息之外，您還可使用控制檯對任意 JavaScript 語句求值。對於調試，您可使用控制檯測試錯誤的潛在解決方法。當即嘗試：

若是您還沒有打開 Console 抽屜式導航欄，請按 Escape 將其打開。該導航欄將在 DevTools 窗口底部打開。
在 Console 中，輸入 parseInt(addend1) + parseInt(addend2)。此語句有效，由於您會在特定代碼行暫停，其中 addend1 和 addend2 在範圍內。
按 Enter 鍵。 DevTools 對語句求值並打印輸出 6，即您預計演示頁面會產生的結果。

圖 9. 對 parseInt(addend1) + parseInt(addend2) 求值後的 Console 抽屜式導航欄。

第 7 步：應用修正方法

您已找到修正錯誤的方法。接下來就是嘗試經過編輯代碼並從新運行演示來使用修正方法。您沒必要離開 DevTools 就能應用修正。您能夠直接在 DevTools UI 內編輯 JavaScript 代碼。當即嘗試：

點擊 Resume script execution {:.devtools-inline}。
在 Code Editor 中，將第 31 行 var sum = addend1 + addend2 替換爲 var sum = parseInt(addend1) + parseInt(addend2)。
按 Command+S (Mac) 或 Control+S（Windows、Linux）以保存更改。
點擊 Deactivate breakpoints {:.devtools-inline}。其將變爲藍色，表示處於活動狀態。在完成此設置後，DevTools 會忽略您已設置的任何斷點。
嘗試使用不一樣的值運行演示。如今演示能夠正確計算。