好文分享 — 5 個你可能不知道的 Chrome DevTools 好用功能
“5 Cool Chrome DevTools Features Most Developers Don’t Know About” 整理了 5 個 Chrome DevTools 的好用功能，讀完之後發現 5 個功能裡我有 4 個不知道，而且這 4 個還很好用⋯⋯。
其中 4 個為：
Live Expression
可以即時監看某個值的變化，例如 screen width, 某個 element 或某個 JavaScript variable
Logpoints
可以在不改動 JavaScript 程式碼的情況下插入
console.log(), 運作跟 breakpoints 很類似，也是執行到特定行數時觸發，只是 Logpoints 不會暫停執行，而是繼續執行之前先執行console.log(你設定的變數)Conditional Breakpoints
可以為 breakpoint 設定條件，滿足條件才會觸發 breakpoint
DOM Breakpoints
可以在 DOM 上設定 breakpoint, 觸發條件可以是 DOM 的 subtree 被改動、屬性變動或者 node 被移除，一但觸發就會暫停執行 JavaScript 程式碼，我們就可以知道是哪 1 行程式碼觸發行為
寫本文過程發現， Google Chrome 官方其實有公布 1 篇文章 “Pause your code with breakpoints” , 裡面羅列 Logpoints, Conditional Breakpoint, DOM breakpoints 以外的其他 breakpoints:
- XHR
- Event listener
- Exception
- Function
- Trusted Type
看來是該花點時間學一下，畢竟這些功能有時候在寫網頁爬蟲時很好用！
補充資料
Watch JavaScript values in real time with Live Expressions | Chrome DevTools | Chrome for Developers
DevTools Tips: Breakpoints and logpoints | Blog | Chrome for Developers
Set a breakpoint based on a certain condition | Blog | Chrome for Developers
Pause your code with breakpoints | Chrome DevTools | Chrome for Developers
