作者｜Parag Zaveri
譯者｜奚甜甜
對於初級開發人員來說，代碼調試是一個不小的挑戰。本文通過案例實戰介紹使用瀏覽器自帶的調試工具替代 console.log() 打印來定位 bug 的方法。
自從成為一名開發人員，我遇到了很多的困難。對於一名初級開發人員來說，最常見的一個挑戰就是代碼調試。最開始，當我發現可以在 chrome 的控制檯中通過 console.log() 打印值來定位 bug 的時候，我以為我找到了代碼調試的聖盃，結果卻證明這種方法非常低效。以下是一些經典的案例供大家調侃：
console.log(‘Total Price:’, total) // 確認該值是否已儲存；
console.log(‘Here’) // 確認某個函數是否執行。
我想大部分開發人員應該已經意識到這並不是最理想的調試方法，肯定有更好的方法。
非常令人開心的是，瀏覽器自帶的調試工具就是一個更好的方法。以下將以 Chrome 開發者工具為例具體分析。
在這篇文章中，我將會介紹如何打斷點，單步執行代碼，監聽表達式以及在 Chrome 開發者工具中修改代碼。
為了更好的理解這篇文章，您需要使用以下案例所需要的代碼塊。（點擊這裡：https://chromedevtoolsdemo.herokuapp.com/）
第一步：重現 bug
首先需要做的是重現 bug：
- 示例是一個簡單的小費計算器。如果您還沒有打開示例代碼，請點擊這裡（https://chromedevtoolsdemo.herokuapp.com/）
- 在 Entree 1 框中輸入 12
- 在 Entree 2 框中輸入 8
- 在 Entree 3 框中輸入 10
- 在 Tax 框中輸入 10
- 選擇 20% 的小費比值
- 點擊 Calculate Bill 按鈕
計算後的值應為 39.6，但是我們得到的結果卻是 14105.09，兩個值相差非常的大！
第二步：學會使用 Sources 面板
為了能夠在 Chrome 中調試這個案例，您必須習慣使用它的開發者工具欄。Mac 系統同時按住 Command+Option+I 按鈕，Linux 系統同時按住 Control+Shift+I 即可打開 Chrome 瀏覽器的開發者工具。
點擊頂部的 Sources 面板之後，下面會出現三個調試面板。從左往右依次是文件導航器，源代碼編輯器以及調試窗口。在開始第三步之前，您可以點擊熟悉下它們。
第三步：設置第一個斷點
在向您展示如何設置第一個斷點之前，我先通過 console.log() 打印來演示下我要表達的意思。很明顯，這個程序在執行的時候進行了計算操作。我們可以通過以下操作來調試程序。
幸運的是，在瀏覽器的開發者工具中，我們只需要簡單的設置一個斷點，然後逐步執行代碼，就可以直接在瀏覽器中看到每一步的值，再也不需要執行上面那些繁瑣的操作。
瀏覽器會找到我們所設置的斷點，當代碼執行到斷點處的時候，瀏覽器會暫停代碼的執行，這樣您就可以自行調試了。接下來我們來說說如何設置斷點。
在上述案例中，我們會在執行最開始的時候，通過設置鼠標事件來設置斷點。
在調試窗口中展開“Event Listener Breakpoints”，在下拉框裡面展開“Mouse”，然後勾選”click”按鈕。
現在，當你點擊 Calculate Bill 按鈕的時候，調試器將在第一個函數”onClick()”的第一行代碼暫停。如果 bug 不在這裡，點擊工具欄的播放按鈕即可跳過這次暫停。
第四步：逐步執行代碼
在所有的調試工具中，開發者都有兩種方式來執行代碼。我們既可以“進入”，也可以“跳過”後面的一個函數調用。
選擇“進入”，瀏覽器將會逐步執行函數內的每一行代碼。
進入下一個函數
選擇“跳過”，瀏覽器將會跳過整個函數，但是這並不影響函數的執行。
跳過下一個函數
以下是單步執行代碼的示例。可以看到前三個 Entree 框的值顯示在右側的 Scope 窗口中。
第五步：設置代碼行斷點
瀏覽器逐步執行代碼的能力非常炫酷，對吧？但是您是否覺得有點麻煩？通常來說，我們只想要知道特定的值。想要解決這個麻煩，我們可以設置代碼行斷點。
作者備註：正是代碼行斷點方法讓我拋棄了 console.log() 方法，並從此愛上了 Chrome 開發者工具。
設置代碼行斷點，只需要點擊您想要查看更多信息的代碼行數字編號即可。然後像往常一樣運行代碼，瀏覽器會自動在你設置斷點的那一行暫停執行，而不需要逐步執行每一個函數。
注意：如果遇到了問題，請先檢查是否取消選中了鼠標下的單擊複選框。
如您所見，3 個數據小計之後的值顯示為”10812”。我輸入的值在右邊的 Scope 窗口中顯示，同時代碼行中也有相應的提示。
嗯…我想我應該已經知道問題出現在哪裡了，有可能是字符串拼接導致的問題。
接下來，讓我們監聽表達式來驗證我的想法。
第六步：監聽表達式
我們現在已經知道三個輸入框的值並沒有正確相加，那麼讓我們監聽下這三個值。
監聽表達式會提供有關代碼中任何給定變量或表達式的更多信息。
如何“監聽”特定的值？點擊頂部 Watch 面板，面板展開後再點擊右邊的加號，然後就可以輸入您想要監聽的變量名稱或者是表達式名稱了。
以上示例中，我們需要監聽第一個 Entree 框的值，以及值的類型。
我想我終於找到了問題所在。第一個輸入框的值存儲的是字符串類型！問題似乎發生在獲取輸入框值的時候，或許，querySelector() 方法才是罪魁禍首，另外的兩個值也應該受到這個方法的影響了。接下來我們將進一步調試，然後在開發者工具欄中修改我們的代碼。
第七步：修改代碼
經過進一步的瞭解，問題確實出在 querySelector() 方法上！
那麼我們如何解決這個問題呢？如 74 行代碼所示，我們可以簡單地使用像 Number(getEntree1()) 這樣的方法將獲取到的字符串強制轉換為數值。
想要修改代碼，您需要打開”sources”左邊的”elements”面板。如果沒有看到 javascript 代碼，打開 script 標籤即可。然後在面板上右鍵選擇”edit as html”，就可以開始修改了。
如果您使用的是工作區，就可以輕鬆地保存並立即查看更新的代碼。如果不是，您將需要使用 command + s(mac) 或者 control+s(linux) 命令保存網頁的本地副本。
然後，您可以打開本地副本查看更新了。
搞定！
本文中的調試方法靈感來自於 Kayce Basques 的文章”在 Chrome 開發者工具中開啟調試 Javascript”，該方法已被 developers.google.com 所採用。
演示代碼：
https://github.com/paragzaveri/chromeDevTools
英文原文：
https://medium.com/datadriveninvestor/stopping-using-console-log-and-start-using-your-browsers-debugger-62bc893d93ff
閱讀更多 InfoQ 的文章
