By Parag Zaveri | Oct 1, 2018
當我開始我的軟體開發工程師之旅時，發現在這個過程中經歷了許多困難。其中一個最常見的困難就是每個新手都會遇到的-除錯。起初，當我發現可以開啟控制檯檢視console.log()輸出的值以定位bug，我像是發現聖地一樣哈皮。但是這種方法是低效的。來幾個我喜歡並且比較幽默的例子：
console.log(‘Total Price:’, total) //In an effort to see if the value was storedconsole.log(‘Here’) //If my program execution reached a certain function複製程式碼我想大多數開發者開始意識到這並不是除錯你程式的好方法。還有更好的方式。
這個好方法就是瀏覽器的除錯工具。在本文中，我使用chrome開發者工具。
在這篇文章中，我將介紹如何使用斷點，單步執行程式碼，設定監視表示式以及在Chrome開發者工具中應用修復程式。
為了更好地完成本教程，你需要使用我的例項程式碼。點選這裡(需要翻牆)
第一步：重現bug
我們首先執行一系列會出bug的操作。
1、在本例中，我們使用有bug的小費計算器。
2、在‘Entree1’輸入12
3、在‘Entree2’輸入8
4、在‘Entree3’輸入10
5、在‘Tax’輸入10
6、在‘Tip’處選擇20%
7、點選計算賬單按鈕，一共應該是39.6，然而，我們得到不同的答案，結果是14105.09。。。yikes！
第二步：學習使用資源面版
在chrome中除錯，你需要開啟開發者工具。按下Command+Option+I (Mac) 或者 Control+Shift+I (Linux)就可以開啟了.
開啟資源面版，如上圖。檔案導航欄、原始碼編輯器、除錯欄。在第三步之前熟悉熟悉吧。
第三步：設定你的斷點
在使用斷點之前，讓我先用console來除錯。很明顯，可以通過以下操作來除錯：
幸運的事，在瀏覽器上不需要再像這樣開發了。相反，我們可以設定斷點一步一步地看我們程式碼的執行情況。
來看看如何設定斷點，斷點是瀏覽器查詢的內容，以便知道何時暫停程式碼的執行並允許您有機會對其進行除錯。
出於教學目的，我們使用設定滑鼠事件在程式的最開始設定斷點。
在偵錯程式那一欄上，展開“事件偵聽器斷點”的檢視。 從那裡，展開“滑鼠”。 然後勾選“點選”按鈕。
現在，當你單擊Calculate Bill按鈕時，偵錯程式將在第一個函式“onClick（）”的第一行暫停執行。 如果偵錯程式位於其他任何位置，請按下播放按鈕，偵錯程式將跳過它。
第四步：開始除錯
在所有除錯工具中，都有兩個執行程式碼的按鈕。開發者可以進入函式裡面或者跳過函式。
不遺漏每一個方法的每一行程式碼。
跳過方法
這是我單步執行程式碼的示例。 在範圍選項卡下，前三個輸入框的值顯示在右側。
第五步：在行數那裡設定斷點
真是太好用了，但是有個問題。這樣設定斷點有點太笨了，通常我們只需要在某個地方檢視。有個好的方法，可以在某一行的行數那裡設定斷點
作者的畫外音：這個功能讓我徹底拋棄console方法並愛上了除錯工具。
只要點選程式碼行號就可以設定程式碼行斷點了。然後執行你的程式碼，偵錯程式就會停在你設定斷點的地方。
提示：如果遇到問題，請確保取消選中滑鼠下的單擊核取方塊。
如你所見，我的subtotal值顯示為“10812”。我的entree值在皮膚顯示了出來並且也計算出來了。
emmm。。。似乎是進行了字串拼接。
讓我們再看幾個表示式搞清楚整個流程。
第六步：建立監視表示式
現在我們知道我們的entree值並沒有正確加在一起，讓我們在每一個值上設定監視表示式。
監視表示式將提供有關程式碼中任何給定變數或表示式的更多資訊。
要將值定義為“監視”，請單擊最頂部的監視窗格，並在開啟後單擊+符號。 在這裡，你可以鍵入變數名稱或其他表示式。
在這個例子中，我將設定在我第一個entree值上監視值和型別。
Aha！我想我找到bug了。我的第一個值儲存為字串！似乎是querySelector方法搞的鬼。也可以搞搞其他的值。讓我們更進一步除錯然後在DevTools中改我們的程式碼。
第七步：修復
經過進一步的審查，querySelector方法絕對是罪魁禍首。
那麼我們如何解決這個問題呢？ 好吧，我們可以簡單地使用例如Number（getEntree1（））將字串強制轉換為數字值，如第74行所示。
為了實際編輯程式碼，您需要轉到’sources’左側的’elements’皮膚。 如果您看不到javascript程式碼，則需要擴充套件指令碼標記。 從那裡，右鍵單擊程式碼並選擇“編輯為html”。
如果你使用的是工作區，則可以輕鬆儲存程式碼並立即檢視。如果不是，則需要使用名令command+s (mac) or control+s (linux)來儲存。
然後你可以看你的原生程式碼的變化。
小老弟你康康～～
本文的除錯方法受到Kayce Basques這篇文章的啟示.