如何使用Chrome DevTools調試JavaScript

這篇文章主要介紹了如何使用Chrome DevTools調試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  面板中一行代碼。如下：

function onClick() {

為什么?

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

步驟 3：跳到下一行

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

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

if (inputsAreEmpty()) {

• 現在點擊 Step over next function call 按鈕，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 按鈕，該腳本將繼續執行，直到到達設置斷點的代碼行為止。

• 看看已經執行的 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 可以正確計算了。 

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用Chrome DevTools調試JavaScript”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!