[Javascript] 火狐(Firefox)中的javascript偵錯方式

javascript 並不是很容易偵錯的語言，但那是以前，現在有很多瀏覽器支持很多的工具。此文以火狐為例，因為我喜歡火狐，雖然他這近一直亂當機。

alert偵錯方法

用一個alert()的函數把你想顯示的變數跳出來：

alert( some_value );

優點是1在跳出來的同時程式是暫停的狀態等你按下確定再繼續 2可以用來測試alert前的程式碼有沒有錯誤，如果有錯誤，就不會執行到這個alert的函式

但是缺點很致命，就是要看一個變數就得去改一次alert要顯示的程式碼，看到的東西如果是物件，就只會得到一個object，資訊很少。

設定方便性：==========| 高
資訊掲露性：==| 低
除錯難易度：===| 不易

console.log偵錯方法

這種方法是少部分人會用的方法，前提是必需支援console的瀏覽器才有效，他使用console.log的方法，把變數值印在瀏覽器的console中：

console.log( some_value);

此時只要程式有執行到這一行，會在主控台(console)中顯示，火狐可用「工具」-->「網頁開發者」-->「網頁工具箱」-->點上面的「主控台頁籤」。

優點是資料詳細，右側的小視窗中也可以看到物件的內容，也可以藉此發現"隱藏的錯誤"(就是運作看能來正常，但事實上會有不確定的因素，以下圖為的第一行警告)，這算是除錯的首選。

設定方便性：==========| 高
資訊掲露性：==========| 高
除錯難易度：========| 佳

console.log +firebug 偵錯方法

同上，但這次不使用火狐原生提供的主控台，而是使用這種「firebug」附加元件，可按F12叫出，雖然看起來功能很多，但以js偵錯來說我還是比較推薦火狐原生提供的主控台，清楚明暸。

設定方便性：======| 中
資訊掲露性：==========| 高
除錯難易度：=======| 佳

使用 debugger 設定中斷點

從[1]讀到，javascript 提供一個設定中斷點的功能，可以用來取代我之前用的 alert()，叫 debugger;

請參看下圖中的第313行

這個指令在一般瀏覽的情況下並不會影響 JavaScript 的執行，但當瀏覽器本身已經進入指令碼偵錯模式的話，就會讓偵錯工具在 debugger 指令這一行進入中斷點 (Breakpoint)，

在此中斷點系統會將變數儲存以供除錯，算是非常方便的用法。

結論

1. 火狐原生的開發者工具很好用，請善用。

2. debugger 可以設定中斷點。

參考資料

[1] Will will will 善用 JavaScript 的 debugger 指令讓網頁主動進入中斷點

原文 2016-08-22 00:33:23