[程式設計] 為什麼你應該用 debugger 而不是 console.log

開發 JavaScript 專案時，很常使用console.log作為除錯的主要方式，但是使用debugger可以帶來更好的效果。

不會忘了

不可否認的是console.log確實是一個非常方便的除錯工具，但是多數開發者應該都有這樣的經驗——在除錯結束後，忘了把console.log給刪除，然後就開始commit了，程式碼自然也跟著進入git伺服器。

但是debugger比較沒有這樣的問題，因為它會讓瀏覽器在執行到debugger時立即暫停，這樣的情況的是非常明顯的，讓開發者比較不容易忘了在除錯後把它移除。

少打字 瀏覽器除錯器

'debugger'.length < 'console.log()'.length === true只是一個最表象的好處。它更深層的意義在於瀏覽器除錯工具的強大，讓開發者可以減少很多除錯時間。大家應該都有類似的經驗——一開始以為問題出在變數a，印出來後發現不是，繼續變換若干個變數後，最後才找到出狀況的變數。

但是debugger的暫停效果配合瀏覽器除錯工具可以讓開發者直接檢視當下不同變數的狀態。開發者可以快速的在不同變數資料來回檢視。不需要重新再使用console.log印出不同的變數。

時間暫停器

debugger就像是男人夢寐以求的「時間暫停器」，只要你下了debugger，瀏覽器執行到這裡時就會無條件的暫停，同時把當下的狀態也會保留下來。除此之外，你還可以透過瀏覽器除錯工具所提供的那些強大功能來檢視目前專案程式碼執行的狀態，通常面板內會有三大區塊，分別是「來源區」——可以看到原始碼、「程式碼內容區」——就像是一個編輯器，在這裡透過滑鼠懸浮在變數上就可以看到它的狀態、「工具區」——有很多工具可以用來追蹤和檢視專案程式碼。（Introduction to Firefox Debugger）

無限迴圈

偶爾或許會寫出一些無窮迴圈的狀況吧？這時看到瀏覽器分頁整個當住，記憶體不斷飆高，該怎麼辦好？果斷下debugger吧！除錯工具會立即停止，同時讓開發者以多種步進的方式來執行程式碼，這樣可以更快的抓到肇因。

如果你還沒習慣，沒關係，現在開始就嘗試使用debugger作為除錯時的主要方式吧。