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