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 複選框。

Chrome DevTools調試JavaScript的使用技巧

返回例子 ,再次點擊 Add Number 1 and Number 2 。DevTools 暫停代碼,高亮顯示 Sources 面板中一行代碼。如下:

function onClick() {

為什麼?

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

步驟 3:跳到下一行

錯誤的一個常見原因是腳本以錯誤的順序執行。 通過代碼,您可以一行一行遍歷代碼執行,並確定其與預期執行不同的位置。 現在就試試:

  • 在 DevTools 的 Sources 面板上,單擊 Step into next function call 按鈕

Chrome DevTools調試JavaScript的使用技巧

  • ,該按鈕允許您逐步執行 onClick() 函數,一次一個函數。 當 DevTools 突出顯示以下代碼行時停止:

if (inputsAreEmpty()) {
  • 現在點擊 Step over next function call 按鈕

Chrome DevTools調試JavaScript的使用技巧

  • ,DevTools 執行 inputsAreEmpty() 而不進入它。 注意DevTools 如何跳過這幾行代碼。 這是因為 inputsAreEmpty() 返回 false,所以 if 語句的代碼塊沒有執行。

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

步驟 4: 設置另外的斷點

行斷點是最常見的斷點類型。 當你想暫停某一行代碼,可以使用行代碼斷點。 現在就試試:

  • 看看 updateLabel() 中的最後一行代碼,如下所示:

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

在這段代碼的左邊,你可以看到這行代碼的行號: 32 。 點擊 32 。 DevTools 將一個藍色的圖標放在 32 的頂部。 這就意味著這行上有一個行代碼斷點。 DevTools 現在總是在執行該代碼行之前暫停。

  • 點擊 Resume script execution 按鈕

Chrome DevTools調試JavaScript的使用技巧

  • ,該腳本將繼續執行,直到到達設置斷點的代碼行為止。

  • 看看已經執行的 updateLabel() 中的代碼行。 DevTools 打印出 “addend1”,“addend2” 和 “sum” 的值。“sum” 的值看起來很可疑。 它似乎被當做一個字符串,它應該是一個數字。 這可能是錯誤的原因。

步驟 5:檢查變量值

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

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

  • 在 Sources 面板, 點擊 Watch。

  • 點擊 Add Expression 按鈕

Chrome DevTools調試JavaScript的使用技巧

  • 輸入 typeof sum。

  • 按回車。 DevTools 顯示 “typeof sum:"string"”。 冒號右側的值是您的觀察表達式的結果。

Chrome DevTools調試JavaScript的使用技巧

如預測那樣,sum 被當做 string 類型 。

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

  • 如果您沒有打開控制檯抽屜,請按 Esc 鍵將其打開。 它將在您的 DevTools 窗口的底部打開。

  • 在控制檯中,輸入 parseInt(addend1)+ parseInt(addend2)。

  • 按回車。 DevTools 執行該語句並打印出 “6”,這是您期望演示生成的結果。

Chrome DevTools調試JavaScript的使用技巧

步驟 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. ,嘗試使用不同的變量,現在 sum 可以正確計算了。 點擊 Deactivate breakpoints 按鈕,它變藍色表示它是激活的。DevTools 忽略您設置的任何斷點。

  4. 點擊 Resume script execution 按鈕,嘗試使用不同的變量,現在 sum 可以正確計算了。

相關推薦

推薦中...