Chrome開發者工具Debug入門

譯者按： 手把手教你擺脫console.log，掌握高級的debug方法。

• 原文: Learn How To Debug JavaScript with Chrome DevTools

• 譯者: Fundebug

為了保證可讀性，本文採用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。

作為一個剛入門的開發者，找到BUG的根源並修復通常要花費不少功夫。往往會嘗試在代碼中隨機用console.log列印變數值來尋找問題。

這篇文章教會你正確的Debug姿勢。你將會學會使用谷歌開發者工具(Chrome Developer Tools)來設置斷點並單步執行代碼。相比於列印日誌，這樣會高效得多。

本文針對一種特定類型的問題來演示如何使用谷歌開發者工具Debug，該方法同樣適用於其它通用問題。

第一步：復現BUG

Debugging的第一步往往是復現bug。「復現BUG」是指找到一個行為序列可以100%觸發bug。你需要復現bug很多遍，因此，盡量消除不必要的步驟。

參照下面的流程來複現這篇文章將要修復的一個bug：

• 這裡有一個我們要使用到的網頁。在新的標籤打開它：打開Demo

• 在Number 1的輸入框輸入5

• 在Number 2的輸入框輸入1

• 點擊Add Number 1 and Number 2按鈕

• 在下方會輸出5 + 1 = 51

應該輸出為6, 而不是51。

Fundebug的JavaScript錯誤監控插件能夠捕獲各種前端BUG，並且記錄用戶行為，可以幫助你及時發現和復現BUG。

第二步：使用斷點來暫停代碼執行

谷歌開發者工具可以讓你終端代碼執行，並查看此時所有的變數值。用來中斷執行的工具叫做breakpoint。如下操作：

• 回到Demo頁面，打開開發者工具(Mac: Command + Option + I, Window, Linux: Control + Shift + I)。

• 點擊Source標籤

• 點擊Event Listener Breakpoints，將裡面的內容展開。開發者工具會展開一列，其中包含Animation，Clipboard

• 將滑鼠移到Mouse前面, 點擊三角展開裡面的內容

• 選中click

• 回到demo，點擊Add Number 1 and Number 2。開發者工具會將Demo的執行暫停，並且在Source部分高亮如下代碼：

function onClick() {

為什麼？

當你在Event Listener Breakpoints選擇了Mouse click, 那麼所有的點擊事件都會被設置斷點。因此，任何一個節點被點擊，並且該節點有定義點擊事件，那麼開發者工具(DevTools)會自動在該點擊事件Handler的第一行處暫停。

第三步：單步執行調試代碼

一個常見的bug是：腳本的執行順序錯誤。單步調試讓你一步一步跟著代碼的執行邏輯走，一次移動一行代碼，那麼你就會清楚代碼是按照哪個的順序執行的。我們來試一下：

• 在開發者工具的Source面板，點擊第三個(Step into next function call)，

Step into next function call

該按鈕引導你單步執行定義的點擊事件，一次一行。點擊后，第15行代碼高亮：

• 現在點擊第二個(Step over next function call)按鈕

Step over next function call

該按鈕會跳過當前要執行的函數inutsAreEmpty，而不是進入該函數。同時直接跳到第19行，因為當前輸入框不為空。

這就是單步調試代碼的基本思路。如果你仔細閱讀get-started.js，會發現bug可能就隱藏在updateLabel函數的某個地方。除了使用單步調試以外，你還可以使用另一種斷點。

第四步：設置另一個斷點

如果你想在某一行設置斷點，可以使用行斷點(line-of-code breakpoint)。

• 找到updateLabel函數的最後一行，

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

在代碼的左邊，你可以看到顯示的行號32。點擊32，開發者工具會在行號出顯示一個藍色的標記。該標記表示行斷點設置成功。代碼總會在執行到這一行的時候中斷。

• 點擊第一個Resume script execution按鈕

Resume script execution button

代碼會持續執行到第32行。

• 在左側，Local部分已經將addend1，addend2和sum的值都顯示出來了。

  你就會發現它們都是字元串，字元串相加就是將它們拼接起來，然而我們想要的是數字求和。

第五步：檢查變數值

另一個常見的情況就是變數或則函數的返回值和期望值不一樣。很多開發者都使用console.log來查看值的變化，但是使用console.log很麻煩而且非常低效。首先，你需要手動添加很多console.log，其次，在你還不清楚哪個變數會引發bug之前，你需要把很多變數值列印出來。

谷歌開發者工具一個很好的功能就是觀察表達式(Watch Expressions)，可以一直監控變數值的變化。觀察表達式不僅可以用於觀察變數值，你可以用來監控任意表達式。我們來試一試：

• 在開發者面板下的Source面板，點擊Watch,展開裡面的內容(初次展開為空)。

• 點擊右側的+號(Add Expression)

Add Expression button

• 輸入typeof sum

• 敲擊回車鍵。開發者面板會顯示typeof sum: "string"。

正如我們推測：sum的類型是字元串。

console.log的另一個替代品是直接使用Console。我么可以使用Console來執行任意的JavaScript表達式。開發者通常使用Console來重寫變數值來debug。我們可以使用Console來驗證可能的解決方案。

• 如果Console沒有顯示出來，敲擊ESC鍵來打開。它會在開發者面板的最下方打開。

• 在Console中輸入parseInt(addend1) + parseInt(addend2)

• 敲擊回車鍵，輸出6。

第六步：修復BUG

我們已經找到了潛在的修復方案，無需離開開發者面板，我們可以直接在開發者面板編輯源代碼。

• 在開發者工具的Source面板，將源代碼中var sum = addend1 + addend2替換為var sum = parseInt(addend1) + parseInt(addend2);。

• 保存改動(Mac: Command + S, Window, Linux: Control + S)。

• 點擊第五個Deactivate breakpoints按鈕

Deactivate breakpoints button

該按鈕取消所有設置的斷點。

• 點擊第一個Resume script execution按鈕

Resume script execution button

輸入不同的值試一試，看看是否可以正常執行。

本文脫胎於Kayce Basques的一篇文章Get Started with Debugging JavaScript in Chrome DevTools。

原文作者：fundebug