小編推薦： Fundebug提供JS、微信小程序、微信小游戲，Node.js和Java錯誤監控。真的是一個很好用的錯誤監控服務，眾多大佬公司都在使用。
為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用于學習。
在我成為一名開發者路上也掉進過一些坑，對于新手來說一個最大的挑戰就是debug。剛開始，我一度認為在控制臺下使用console.log()打印變量是最棒的方法。而實際上，這樣做是相當低效的。我不怕你們嘲笑我，給你們分享一下我曾經是這么干的：
console.log(‘Total Price:’, total) // 查看total的值
console.log(‘Here’) // 打印Here來確認程序執行到這個地方
我想大多數開發者會意識到這不是你應該用來debug的方法，應該有更好的方案！
幸運的是，瀏覽器的Debug工具很好用！在本文我會介紹谷歌開發者工具。
為了更好地跟隨我理解這篇文章的內容，我建議你代開我的示例代碼跟著走。地址: 點擊這里
第一步：復現BUG
我們通過執行一系列的操作來復現bug：
- 一個代碼有bug的計算器，如果你還沒有打開，點擊這里；
- 在Entree 1輸入12；
- 在Entree 2輸入8；
- 在Entree 3輸入10；
- 在Tax輸入10；
- Tip選擇20%；
- 點擊
Calculate Bill。正確的結果應該是39.6，但是計算器的結果卻是14105.09!
第二步：學習使用Source面板
你需要學會熟練使用開發者工具，你可以使用快捷鍵Command+Option+I (Mac) 或則 Control+Shift+I (Linux)來打開。(或則右鍵，選擇檢查選項，就會彈出開發者面板)
當你點擊開發者面板最上面的source標簽，開發者面板會呈現三分的效果，分別是：文件導航器、源代碼編輯器以及最右側的Debug面板。
第三步：設置第一個斷點
在我們設置斷點之前，我來給你演示如果使用console.log()是什么效果：
如果你使用開發者工具，就不用寫一堆的console.log()了。我們可以設置斷點，通過單步調試來查看變量的值。
斷點就是一個你在代碼中添加標記，用來告訴瀏覽器執行到這個位置暫停。
我們將會在整個程序的最開始設置一個斷點。
在最右側的Debugger面板，點擊"Event Listener Breakpoints"，展開"Mouse"，然后選中'click'。
現在如果我們點擊Calculate Bill按鈕，程序會停在第一個函數"onClick()"。如果沒有執行到這里，那么點擊播放按鈕，總會跳到index的第6行。
第四步：單步調試
在整個Debug的過程中，有兩種執行的方式：”step into"和“step over"。
“step into"會進入當前遇到的每一個函數內部，然后一行一行執行；
“step over”則會跳過函數內部的細節，直接執行整個函數。
下面是一個展示例子，在右側的Scope下，所有局部變量的值都顯示出來了。
第五步：在某行設置斷點
可以單步調試代碼是不是很棒？不過一步一步往下執行有點繁瑣。通常，我只想知道在某個位置變量的值，而不是要一步一步執行過去。我們可以在某一行去設置斷點。
作者備注：能夠在代碼任意行設置斷點查看變量值是我停止使用console.log的主要原因。
在文件的左側，顯示文件行數的位置點擊即可設置斷點。
注意：如果你發現無法操作，請先清除掉之前選中的click選項。
你可以看到，右側顯示subtotal的值為10182，并且在代碼旁邊也顯示了變量的值。
我想已經知道BUG的原因了：字符串拼接？
第六步：添加觀察表達式
這個通常用來觀察變量的值在程序的執行過程中的變化，點擊右側的"watch"選項將其展開，你可以輸入變量名或者表達式。
為了演示起見，我們觀察"entree 1"和"typeof entree1"。
通過查看entree1的類型，發現并不是數字而是字符串。那么問題就出在如何獲取這個值的。也許，querySelector()是問題的關鍵。
第七步：修復代碼
通過進一步檢查，確定querySelector()就是問題所在。
如何修復呢？我們可以使用Number函數將字符串轉換為數字，比如Number(getEntree1())。
為了編輯代碼，你需要到“Elements"選項，它在”Sources"的左側。如果你沒有看到JavaScript代碼，你需要展開script標簽。 然后右鍵點擊選擇“edit as html"。
如果你建立了一個workspace，那么代碼會直接保存。不然，可以使用command+s (mac) 或則 control+s (linux)保存一份本地拷貝。
接下來，我們再來試一試看看效果。
關于Fundebug
Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有Google、360、金山軟件、百姓網等眾多品牌企業。歡迎大家免費試用！
