今天來(lái)分享 10 個(gè) Chrome DevTools 實(shí)用調(diào)試功能!

1. 保留日志

當(dāng)我們刷新完頁(yè)面之后，通常控制臺(tái)的Console面板就會(huì)被清空。如果想保留控制臺(tái)的日志，就可以在設(shè)置中勾選Preserve log選項(xiàng)以保留控制臺(tái)中的日志。

2. 代碼覆蓋率

我們可以打開(kāi)設(shè)置，在Experiments中勾選Record coverage while performance tracing選項(xiàng)。

在面板下方的Coverage面板中點(diǎn)擊紅色按鈕以記錄頁(yè)面的代碼覆蓋率：

代碼覆蓋率使用動(dòng)態(tài)分析法來(lái)收集代碼運(yùn)行時(shí)的覆蓋率，讓開(kāi)發(fā)者知道有代碼在頁(yè)面上真正的使用。動(dòng)態(tài)分析是指在應(yīng)用運(yùn)行狀態(tài)下收集代碼執(zhí)行數(shù)據(jù)的過(guò)程，換句話說(shuō)，覆蓋率數(shù)據(jù)就是在代碼執(zhí)行過(guò)程中通過(guò)標(biāo)記收集到的。

3. 顯示重繪

在瀏覽器的開(kāi)發(fā)者工具中可以通過(guò)開(kāi)啟顯示重繪選項(xiàng)以查看頁(yè)面在執(zhí)行操作時(shí)哪些元素會(huì)發(fā)生重繪。

在控制臺(tái)右上角三個(gè)點(diǎn)中的 More tools 選項(xiàng)中開(kāi)啟 Rendering 選項(xiàng)卡：

在 Rendering(渲染)選項(xiàng)卡中開(kāi)啟 Paint flashing：

當(dāng)刷新頁(yè)面時(shí)，顯示綠色的區(qū)域就是重新繪制區(qū)域。

4. 檢查動(dòng)畫(huà)

Chrome 的開(kāi)發(fā)者工具不僅可以調(diào)試樣式，還可以調(diào)試動(dòng)畫(huà)，可以在控制臺(tái)右上角三個(gè)點(diǎn)中的 More tools 選項(xiàng)中開(kāi)啟 Animations 選項(xiàng)卡：

當(dāng)頁(yè)面的動(dòng)畫(huà)執(zhí)行時(shí)，就會(huì)在時(shí)間軌道上查看所有的動(dòng)畫(huà)，點(diǎn)擊其中一個(gè)動(dòng)畫(huà)可以懂得執(zhí)行過(guò)程以及時(shí)間軸：

我們可以在時(shí)間軸上定位到任一時(shí)刻的動(dòng)畫(huà)幀，也可以拖動(dòng)左右兩端的圓點(diǎn)來(lái)修改動(dòng)畫(huà)的延遲和周期，修改之后可以在屬性面板看到對(duì)應(yīng)的 CSS 樣式。

5. 截圖

Chrome瀏覽器內(nèi)置了截圖功能，可以在瀏覽器開(kāi)發(fā)者工具中使用 Ctrl+Shift+P(Windows)或者Command+Shift+P(Mac)快捷鍵打開(kāi)搜索來(lái)查找screenshot：

這里有四個(gè)選項(xiàng)：

• 第一個(gè)：截取自選區(qū)域;
• 第二個(gè)：截取整個(gè)網(wǎng)頁(yè);
• 第三個(gè)：截取當(dāng)前節(jié)點(diǎn);
• 第四個(gè)：截取當(dāng)前屏幕。

截圖完成后自動(dòng)下載到下載目錄，打開(kāi)瀏覽器的下載框或本機(jī)的下載目錄即可看到圖片。

6. Local Overrides

我們可以使用本地資源覆蓋網(wǎng)頁(yè)所使用的資源，比如可以使用本地 CSS 文件覆蓋網(wǎng)頁(yè)的css文件，修改樣式。將本地的文件夾映射到網(wǎng)絡(luò)，在Chrome開(kāi)發(fā)者功能里面對(duì)CSS樣式的修改都會(huì)直接改動(dòng)本地文件，頁(yè)面重新加載，使用的資源也是本地資源，達(dá)到持久化的效果。

詳見(jiàn)：https://developer.chrome.com/blog/new-in-devtools-65/#overrides

7. 全局搜索代碼

Chrome瀏覽器為我們提供了全局搜索的概念，可以點(diǎn)擊開(kāi)發(fā)者工具右上角的三個(gè)點(diǎn)，點(diǎn)擊Search選項(xiàng)，在Search面板中搜索所需關(guān)鍵字即可，點(diǎn)擊搜索結(jié)果即可跳到對(duì)應(yīng)文件的代碼行：

8. 事件監(jiān)聽(tīng)器的斷點(diǎn)

有時(shí)應(yīng)用會(huì)在用戶發(fā)生交互時(shí)出現(xiàn)問(wèn)題，這時(shí)我們就可以添加事件監(jiān)聽(tīng)器添加斷點(diǎn)來(lái)捕獲這些事件以檢查交互時(shí)的問(wèn)題。可以在Source面板右側(cè)的Event Listener Breakpoints中勾選相應(yīng)的事件：

9. DOM 操作的斷點(diǎn)

當(dāng)頁(yè)面的內(nèi)容發(fā)生變化時(shí)，如果想要知道是哪些腳本影響了它，就可以給DOM設(shè)置斷點(diǎn)。我們可以右鍵點(diǎn)擊需要設(shè)置斷點(diǎn)的DOM元素，在彈出的菜單中點(diǎn)擊Break on以選擇合適的斷點(diǎn)。

可以看到，Break on中有三個(gè)選項(xiàng)：

• Subtree Modifications：子節(jié)點(diǎn)(內(nèi)容、屬性)修改通知，常用在子節(jié)點(diǎn)內(nèi)容發(fā)生變化后，來(lái)定位源碼;
• Attributes Modifications：當(dāng)前節(jié)點(diǎn)的屬性修改通知，常用在節(jié)點(diǎn)的 className 等屬性被修改后，來(lái)定位源碼了;
• Node Removal：當(dāng)前節(jié)點(diǎn)移動(dòng)時(shí)通知，常用在節(jié)點(diǎn)被移除時(shí)，定位源碼。

10. 異步請(qǐng)求的斷點(diǎn)

XHR breakpoints 可以用于異步請(qǐng)求的斷點(diǎn)，點(diǎn)擊加號(hào)即可添加斷點(diǎn)規(guī)則，輸入請(qǐng)求 的 URL 地址(片段)，會(huì)在請(qǐng)求地址包含對(duì)應(yīng)字符串的異步請(qǐng)求發(fā)出的位置自動(dòng)停止：