2018年1月27日 星期六

使用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/