如何使用Chrome DevTools偵錯JavaScript

不要再使用 console.log！ 學會在 Chrome Developer Tools 中使用斷點來偵錯程式碼。

作為一名新的開發人員，發現和修復 bug 挺難的。 您可能會試圖隨意使用 console.log() 來偵錯程式碼使程式碼正常工作。 不要再這樣了。

這篇文章將講述正確偵錯的方法！ 您將了解如何使用 Chrome 開發人員工具來設定斷點並逐步完成程式碼。這是更有效的在程式碼中查詢和修復 bug 的方法。

本教學將向您展示如何偵錯一個具體 bug，您學到的方法將有助於您偵錯以後遇到的的 JavaScript 錯誤。

步驟 1：重現錯誤

重現錯誤是偵錯的第一步。 “再現錯誤”意味著找到一系列持續導致錯誤出現的動作。 您可能需要重複該錯誤多次，所以嘗試消除任何不必要的步驟。

按照以下說明重現您將在本教學中解決的 bug。

• 這是我們將在本教學中使用的網頁。 確保在新分頁中開啟此頁面： 開啟本頁.
• 在 Number 1 輸入 5。
• 在 Number 2 輸入 1。
• 點選 Add Number 1 and Number 2。
• 看看輸入和按鈕下方的標籤。 顯示 5 + 1 = 51。

哎呦。結果是錯的。 結果應該是 6。 這是您要修復的錯誤。

步驟 2：用斷點暫停程式碼

DevTools 允許您在執行過程中暫停程式碼，並在此時檢查所有變數的值。 暫停程式碼的工具稱為斷點。 現在就試試：

• 返回例子並按 Command + Option + I（Mac）或 Control + Shift + I（Windows，Linux）開啟DevTools。
• 點選 Sources 面板。
• 點選 Event Listener Breakpoints 開啟該面板。DevTools 展示了所有事件的列表， 例如 Animation 和 Clipboard。
• 然後找到 Mouse 事件類別，點選開啟該列表。
• 選中 click 核取方塊。

• 返回例子 ，再次點選 Add Number 1 and Number 2 。DevTools 暫停程式碼，高亮顯示 Sources 面板中一行程式碼。如下：

1. function onClick(){

為什麼？

當你選中 click，你為所有 click 事件設定了一個基於事件的斷點。 當任意節點被點選，並且該節點有一個 click 事件， DevTools 將自動暫停在該節點的 click 事件。

步驟 3：跳到下一行

錯誤的一個常見原因是指令碼以錯誤的順序執行。 通過程式碼，您可以一行一行遍歷程式碼執行，並確定其與預期執行不同的位置。 現在就試試：

• 在 DevTools 的 Sources 面板上，單擊 Step into next function call 按鈕 ，該按鈕允許您逐步執行 onClick() 函數，一次一個函數。 當 DevTools 突出顯示以下程式碼行時停止：

1. if(inputsAreEmpty()){

• 現在點選 Step over next function call 按鈕 ，DevTools 執行 inputsAreEmpty() 而不進入它。 注意DevTools 如何跳過這幾行程式碼。 這是因為 inputsAreEmpty() 返回 false，所以 if 語句的程式碼塊沒有執行。

• 這是跳過函數基本思想。 如果您檢視 get-started.js 中的程式碼，您可以看到該錯誤可能在 updateLabel() 函數中的某個位置。 您可以使用其他型別的斷點來暫停程式碼逐步靠近錯誤的位置，而不是逐步遍歷每行程式碼。

步驟 4： 設定另外的斷點

行斷點是最常見的斷點型別。 當你想暫停某一行程式碼，可以使用行程式碼斷點。 現在就試試：

• 看看 updateLabel() 中的最後一行程式碼，如下所示：
  1. label.textContent = addend1 +' + '+ addend2 +' = '+ sum;
  在這段程式碼的左邊，你可以看到這行程式碼的行號： 32 。 點選 32 。 DevTools 將一個藍色的圖示放在 32 的頂部。 這就意味著這行上有一個行程式碼斷點。 DevTools 現在總是在執行該程式碼行之前暫停。
• 點選 Resume script execution 按鈕 ，該指令碼將繼續執行，直到到達設定斷點的程式碼行為止。
• 看看已經執行的 updateLabel() 中的程式碼行。 DevTools 列印出 “addend1”，“addend2” 和 “sum” 的值。“sum” 的值看起來很可疑。 它似乎被當做一個字串，它應該是一個數位。 這可能是錯誤的原因。

步驟 5：檢查變數值

錯誤的另一個常見原因是當變數或函數產生與預期不同的值。 許多開發人員使用 console.log() 來檢視變數如何變化，但由於兩個原因，console.log() 可能是乏味和無效的。 其一，你可能需要手動編輯你的程式碼大量的呼叫 console.log() 。 其二，您可能不知道哪個變數與錯誤有關，所以您可能需要列印許多變數。

DevTools 的一個 console.log() 替代是 Watch 表示式。 使用監視表示式來監視變數隨時間的變化。 顧名思義，Watch 表示式不僅限於變數。 您可以在 Watch 表示式中儲存任何有效的 JavaScript 表示式。 現在就試試：

• 在 Sources 面板, 點選 Watch。
• 點選 Add Expression 按鈕 。
• 輸入 typeof sum。
• 按回車。 DevTools 顯示 “typeof sum："string"”。 冒號右側的值是您的觀察表示式的結果。

如預測那樣，sum 被當做 string 型別 。

console.log() 的另一個替代方法是控制台。可以使用控制臺來評估任意的 JavaScript 語句。 開發人員通常使用控制台在偵錯時覆蓋變數值。 在您的情況下，控制台可以幫助找到啊修復 bug 的方法。 現在就試試：

• 如果您沒有開啟控制台抽屜，請按 Esc 鍵將其開啟。 它將在您的 DevTools 視窗的底部開啟。
• 在控制台中，輸入 parseInt(addend1)+ parseInt(addend2)。
• 按回車。 DevTools 執行該語句並列印出 “6”，這是您期望演示生成的結果。

步驟 6：修復

您已經確定了該 bug 的潛在修復方法。 剩下的是通過編輯程式碼並重新執行演示來嘗試修復。 您不需要離開 DevTools 來修復 bug。 您可以直接在 DevTools UI 中編輯 JavaScript 程式碼。 現在就試試：

1. 在 DevTools 的 Sources 面板，用 var sum = parseInt(addend1) + parseInt(addend2); 替換 var sum = addend1 + addend2;，這是您當前暫停的一行。
2. 按 Command + S（Mac）或 Control + S（Windows，Linux）儲存更改。 程式碼的背景更改為紅色，表示指令碼已在DevTools 中更改。
3. 點選 Deactivate breakpoints 按鈕 ，它變藍色表示它是啟用的。DevTools 忽略您設定的任何斷點。
4. 點選 Resume script execution 按鈕 ，嘗試使用不同的變數，現在 sum 可以正確計算了。

本文永久更新連結地址：http://www.linuxidc.com/Linux/2017-10/147334.htm