在撰寫程式遇到 Bug 時，可以下 console 指令，印出資料，確認程式邏輯。但這個過程需要不斷猜測可能錯誤的地方，再補上多個 console 指令，效率不佳。因此查找錯誤邏輯時，應該可以使用更好的工具，也就是 Chrome DevTools 的設置斷點功能，來協助我們查找。
本文章為節錄 Chrome DevTools 文件，重新整理後的重點筆記。
範例：Demo: Get Started Debugging JavaScript with Chrome DevTools
➤ 認識面板
打開面板
- 在網頁中點選右鍵 → 檢查
- 快捷鍵
Mac：Command+Option+I
Windows 或 Linux：Control+Shift+I
切換至 Source tab
Source tab 即為 Debugger 介面。大致可分為三大區塊
- 第一區塊：File Navigator。列出頁面請求的每個文件。
- 第二區塊：Code Editor。點擊 File Navigator 中的任一文件，文件內容會顯示在此處。
- 第三區塊：JavaScript Debugging。Debugger 的各種工具。
➤ 認識設置斷點的多種方法
斷點，指的是程式碼運行時，欲中斷的地方。中斷後即可利用 Debugger 的各種工具，逐行檢視程式碼或是以 function 為單位檢視程式碼，並可查看當下 scope 當中的 Local 及 Global 值，逐步找出錯誤邏輯。
有以下七種設置斷點的方式：
- Line-of-code：指定某一行程式碼
- Conditional line-of-code：指定某一行程式碼，並設置特定條件。
- DOM：指定 DOM 節點，當 DOM 節點被更改或是刪除時。
- XHR：指定字串。當該字串包含於 XHR URL 時。
- 事件監聽器：指定欲中斷的事件，例如滑鼠事件中的 click
- 例外：造成錯誤捕獲或是未捕獲的程式碼
- 功能：指定程式碼中的特定功能，每次調用時，就停止。
以下以筆者較常使用的兩個斷點方式介紹， Line-of-code、事件監聽器。
Line-of-code
點擊程式碼行號，並可以於 JavaScript Debugging 區塊中的 Breakpoints 看見添加的斷點。
若想刪除設置，可再點擊一次行號，或是從 JavaScript Debugging 區塊中的 Breakpoints 點擊右鍵 → Remove breakpoint 。
若將斷點設置於函數第一行，則相當於功能斷點的用途。
事件監聽器
點擊 JavaScript Debugging 區塊當中的 Event Listener Breakpoints。即可勾選欲作為斷點的事件。
例如 Click 事件，可於 Mouse 事件中找到。以 Chrome DevTools 文件範例為例(Demo: Get Started Debugging JavaScript with Chrome DevTools)。勾選了 Click 事件後，點選畫面中的 Button，則可進入 Debugger 模式，如以下畫面所示。
➤ 認識 Debugger 的工具
設置好斷點後，接下來需要檢視程式碼。有以下幾種檢視方式：
按鈕 1
執行程式碼直到遇到斷點。當設置多個斷點時，可以於一個斷點當下，按下此按鈕，會快速執行至下一個斷點。若已無下一個斷點，則執行至結束。
按鈕 2
執行完目前所在的程式碼行，並跳至下一行。如果目前所在的程式碼行為方法呼叫，也會執行並略過方法的執行過程，直接跳至執行完方法後的下一行程式碼。
如以下範例，將斷點設置於 let some = getSome() ，則會完全跳過 getSome 的逐步執行過程，跳至 return some + a 。
此按鈕用於確定某個方法沒有問題，不需要逐行查看時。
function addSome(a){
let some = getSome() //設置斷點
return some + a
}function getSome(a){
return 5
}console.log(addSome(3))
按鈕 3
逐行檢視程式碼
按鈕 4
執行程式碼當前位置所在的函數剩餘部分，並跳至下一個語句。以上述範例為例子，將斷點設置於 let some = getSome() ，則會完全跳過 addSome 的逐步執行過程，跳至 console.log(addSome(3)) 。
➤ 其他
查看或編輯局部、必包、全局屬性
每一次程式碼運行時，都可以從 JavaScript Debugging 區塊中的 scope 查看屬性值。例如當程式碼執行至 alert(name); 時，可看見以下屬性，亦可以直接使用滑鼠雙擊修改屬性值。
function test() {
var name = "Closure";
function displayName() {
alert(name);
}
displayName();
}test();
查看當前的 call stack
以上述範例為例子，當程式碼執行至 alert(name); 時，可於 JavaScript Debugging 區塊中 Call Stack 查看當下的 call stack，如下圖：
觀測自定義的 JavaScript 表達式的值
在功能中，可能有一些關鍵值，會在因各個函數的執行而有所變化。這時可以特別觀測此值。
例如有以下程式碼，欲持續觀測 num 的值。
let num = 1function a(){
num = num + 1 // 設置斷點
b()
}function b(){
num = num + 2
c()
}function c(){
num = num + 3
console.log(num)
}a()
點擊 JavaScript Debugging 區塊中 Scope 旁的 Watch → 點選加號→輸入欲觀測的值，例如 num，亦可以依照需求輸入其他表達式，例如 num > 3。
隨著程式碼的執行，可看見 num 的變化。
以上是今天的小分享，有任何問題都歡迎留言指教，謝謝 😊
