DevTools — 如何用善用設置斷點 (breakpoint) 加速 debug?

在 DevTools — 如何在開發者工具上 debug 原始程式碼?一文中，我們談到可以如何透過瀏覽器開發者工具的來源面板 (sources panel)。

在了解可以透過 source map，讓使用框架的程式碼也能在瀏覽器上 debug，接著讓我們來談具體可以如何透過開發者工具的來源面板，讓 debug 變得更容易。而當談到來源面板，就不能不談斷點 (breakpoint) 這個好用的幫手。

假如有用過其他程式語言 (特別是在寫後端時的其他語言)，可能對設置斷點 (breakpoint) 來 debug 並不陌生。可能因為在前端的 debug 過程中，埋 console.log 來看問題相對來說比較容易，所以許多前端工程師，在查找問題時，總是第一時間會在程式碼中放多個 console.log 藉此來觀察不同變數的值的變化。

用 console.log 是個不錯的方法，但資深一點的前端工程師，通常不會只用 console.log，而是會透過設置斷點來 debug。

斷點 (breakpoint) 如其名所稱，是一個可以讓程式執行時被中斷的中途點，只要在程式中埋設斷點，就可以在程式運行到設有斷點的那一行被中斷，而這時開發者就能檢視在中斷的當下相關變數的值是什麼。

使用斷點比起用 console.log 好在哪?

假如先前沒有在用斷點的讀者，可能會問既然 console.log 已經能夠有效協助 debug 了，為什麼還需要斷點呢? 使用斷點有什麼額外的好處?

首先，斷點可以讓程式暫時中止運行，所以開發者可以精確地停在某一個想要檢視的時間點。

舉例來說，在來源面板中可以找到事件監聽器 (event listener) 的斷點設置，這時如果點擊了畫面上的按鈕，就可以很精準地停在該點擊事件之後。但是假如用 console.log，假如程式碼中有寫其他的邏輯，很可能點擊後程式一直跑，導致 console.log 會印出很多東西，讓 debug 時有很多雜訊。

第二個用斷點的好處，是在斷點暫停的片刻下，開發者可以檢查當下各個變數的值 (像下圖這樣，斷點暫停時，只要在開發者工具打下某個變數名稱，就能檢視該變數的值)。但假如用 console.log，想要檢視某個值就要特別寫出來，因此假如要寫多個值，就要在 console.log 中寫很多東西，會很麻煩。

如何設置斷點?

要在程式碼中設置斷點，有兩個簡單的方式能夠做到。第一個是直接在程式碼當中寫 debugger

，像下圖這樣。這個用法就跟在程式碼中埋 console.log 很類似。因此推薦讀者們，假如未來要用

console.log 時，可以試著把它換成 debugger。

另一個設置斷點的方式，是直接在來源面板的某段程式碼中，點擊該行程式碼即可。這個做法甚至不需用打開程式的編輯器，這也是許多資深工程師推薦用斷點的原因，可以更快速的直接針對想要看的程式碼，點擊下去就完成斷點設置，然後就能直接查看該斷點時的各種值是否如預期。

閱讀更多

以上我們介紹了如何用善用設置斷點 (breakpoint) 加速 debug?，關於使用瀏覽器的開發者工具，我們在 E+ 成長計畫中的主題文有更深入、實用的探討。

對更深入了解這個主題，以及其他前後端開發、軟體工程、AI 工程主題感興趣的讀者，歡迎加入 E+ 成長計畫一起成長 (連結)。