Chrome DevTool 是 Web 開發中必不可少的生產工具，其功能主要包括調試、性能分析、頁面優化、定制樣式表……網上已經有很多 DevTool 的使用講義，尤其是以調試技巧最為繁多；本文不想贅述這類通識知識，僅僅介紹一些我覺得比較便利的一些小功能。
Dom 斷點
私以為，Dom 斷點是僅次于 JS debug 的重要功能。我是一個維護廿年遺產應用的老碼農，該遺產系統的特點是：無法通過正常途徑找到 JS 的響應入口；但是工作依舊得做，是吧？所以，“通過 Dom 表象定位到觸發事件”就成為了我的常規 Debug 手段。比如，我要查看“刪除元素的事件”，只需要導航到目標 Dom -> 鼠標右鍵 -> Break on -> node removal，接著操作頁面就可以自動幫我定位到相關 JS 代碼了。
monitor 函數
monitor 函數是 Chrome DevTool 自帶的一個監聽器（監聽函數的函數 ??）；可以手動在 Console tab 里添加，或是干脆放在源碼里使用。使用方法很簡單，看個簡單的例子就懂了：
如上圖所示，我們通過 monitor hello 函數，在它被調用時，打印出 function XXX called 的字樣；帶參數時，還能顯示具體內容。
不想監聽了，unmonitor(hello) 即可。
console 輸出
使用 monitor 函數的人還是相對少數，很多人覺得函數體里寫個 console.log 也可以監控，不須要額外的認知。這里不去爭論細節了，效率問題罷了。不過，即便是處處用到的 console 對象，大家也可以關注一些簡單 Practice：
-
console.log 路人皆知，不過打印的時候推薦包個大括號
如下所示，單純“打印兩個值”與“打印鍵值對”相比，在開發體驗上還是有差距的。
console.log -
console.table：以表單形式打印出對象
console.table -
info & warn & error ：log 的三種分級顯示
三種 log 背景色不同，可以通過點
Default levels分級顯示輸出warn & error & info
保留 log
既然說到 log，大家在查看日志的時候有沒有碰到過這類問題：提交表單后當前頁面自動跳轉了，這個過程中的日志還沒來得及細看就全沒了？這時候挺容易奔潰的，不過也別太焦慮，Chrome 早就替大家想好了解決方案。在 Network 標簽下有個 Preserve log 的復選框，勾上就行了。不過這個功能啟動了，clear() 方法就不能用了——畢竟是兩個互斥的操作。
拷貝資源路勁
我經常會拷貝頁面里的靜態資源路徑，然后在新的 tab 里打開查看。傳統的操作是先點 Edit as HTML，然后在編輯框里滑選。最近我發現 Chrome 加了個新功能，叫 Copy link address，直接點擊就復制到剪切板里了。
能拷貝靜態資源路徑，自然也能復制動態資源。這個需要去 Network 標簽里找，右鍵 response 里的資源，有個 copy 下拉選項，Copy link address就在它的二級選項里了；其他二級選項也是挺有用的，大家可以挨個嘗試一下。
命令框
最后再說說 Chrome DevTool 的命令框——快捷鍵 ctrl+shift+p （Windows）或 cmd+P（Mac），這個和 VS Code 是一樣的；里面可以搜索到所有的 DevTool 功能。就說我最常用的一兩個功能吧。
-
截屏
很多人都會裝 Chrome 應用商店里的截屏擴展，事實上它們調的是 DevTool 里的 API。大家在命令框里輸入
Screenshot就可以使用這個功能了。Screenshot -
切換 dock 位置
這個是我個人癖好，沒事就讓 devtool 的 dock 位置跳來跳去。大家可以用鼠標點最右上角的三個點來切換；有時候不想用鼠標了，就試試這個鍵盤操作。
Dock side
小結
前段時間在看人類發展史，其中提到掌握和熟練使用工具是人類進化中的關鍵一步。我個人是非常推崇效率工具的，使用舒適的生產工具能顯著地提升開發體驗，并讓工作變得不那么枯燥。但是，不是所有人都有這種迫切需求的。我就看過很多從業多年的老人，對開發工具的感知處在非常木訥的階段，比如不能區分 IE devtool 和 Chrome devtool 的高下，這個也是挺有趣的。
好了，今天就講了幾個我覺得有點意思的小功能。不知道大家有沒有自己鐘愛的功能呢？也請留言告訴我們。
文章同步發布于an-Onion 的 Github。碼字不易，歡迎點贊。
