使用Chrome做JavaScript程式除錯(JavaScript Debugging with Chrome DevTools)

若您覺得文章寫得不錯，請點選文章上的廣告，來支持小編，謝謝。

Google Chrome 瀏覽器中有 DevTools 的工具可以用來協助開發網頁，官方的說明網頁如下：https://developers.google.com/web/tools/chrome-devtools/。本文將使用官方的加法範例作為說明，開啟範例網頁後，分別在Number 1與Number 2輸入數字，按下Add Number 1 and Number 2按鈕後，會看到錯誤的預期結果：

此時可以開啟DevTools工具：

可以在DevTools加入中斷點，方法如下：

設定好後，按下Add Number 1 and Number 2按鈕，會發現程式停在onClick function的第一行程式碼，可以使用下圖的按鈕來進行除錯。

此時應該會發現程式錯在 updateLabel() function。

原因是因為預期sum會做 Number 1 與 Number 2的數字相加，但卻做字串的合併，解決的方法之一是使用parseInt()函式。

好了，本文就介紹Chrome DevTools的除錯功能到這兒。

參考資料：
[1] https://developers.google.com/web/tools/chrome-devtools/javascript/