今天來分享 10 個 Chrome DevTools 實用調試功能!

1. 保留日志

當我們刷新完頁面之后，通?？刂婆_的Console面板就會被清空。如果想保留控制臺的日志，就可以在設置中勾選Preserve log選項以保留控制臺中的日志。

2. 代碼覆蓋率

我們可以打開設置，在Experiments中勾選Record coverage while performance tracing選項。

在面板下方的Coverage面板中點擊紅色按鈕以記錄頁面的代碼覆蓋率：

代碼覆蓋率使用動態分析法來收集代碼運行時的覆蓋率，讓開發者知道有代碼在頁面上真正的使用。動態分析是指在應用運行狀態下收集代碼執行數據的過程，換句話說，覆蓋率數據就是在代碼執行過程中通過標記收集到的。

3. 顯示重繪

在瀏覽器的開發者工具中可以通過開啟顯示重繪選項以查看頁面在執行操作時哪些元素會發生重繪。

在控制臺右上角三個點中的 More tools 選項中開啟 Rendering 選項卡：

在 Rendering(渲染)選項卡中開啟 Paint flashing：

當刷新頁面時，顯示綠色的區域就是重新繪制區域。

4. 檢查動畫

Chrome 的開發者工具不僅可以調試樣式，還可以調試動畫，可以在控制臺右上角三個點中的 More tools 選項中開啟 Animations 選項卡：

當頁面的動畫執行時，就會在時間軌道上查看所有的動畫，點擊其中一個動畫可以懂得執行過程以及時間軸：

我們可以在時間軸上定位到任一時刻的動畫幀，也可以拖動左右兩端的圓點來修改動畫的延遲和周期，修改之后可以在屬性面板看到對應的 CSS 樣式。

5. 截圖

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

這里有四個選項：

• 第一個：截取自選區域;
• 第二個：截取整個網頁;
• 第三個：截取當前節點;
• 第四個：截取當前屏幕。

截圖完成后自動下載到下載目錄，打開瀏覽器的下載框或本機的下載目錄即可看到圖片。

6. Local Overrides

我們可以使用本地資源覆蓋網頁所使用的資源，比如可以使用本地 CSS 文件覆蓋網頁的css文件，修改樣式。將本地的文件夾映射到網絡，在Chrome開發者功能里面對CSS樣式的修改都會直接改動本地文件，頁面重新加載，使用的資源也是本地資源，達到持久化的效果。

詳見：https://developer.chrome.com/blog/new-in-devtools-65/#overrides

7. 全局搜索代碼

Chrome瀏覽器為我們提供了全局搜索的概念，可以點擊開發者工具右上角的三個點，點擊Search選項，在Search面板中搜索所需關鍵字即可，點擊搜索結果即可跳到對應文件的代碼行：

8. 事件監聽器的斷點

有時應用會在用戶發生交互時出現問題，這時我們就可以添加事件監聽器添加斷點來捕獲這些事件以檢查交互時的問題?？梢栽赟ource面板右側的Event Listener Breakpoints中勾選相應的事件：

9. DOM 操作的斷點

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

可以看到，Break on中有三個選項：

• Subtree Modifications：子節點(內容、屬性)修改通知，常用在子節點內容發生變化后，來定位源碼;
• Attributes Modifications：當前節點的屬性修改通知，常用在節點的 className 等屬性被修改后，來定位源碼了;
• Node Removal：當前節點移動時通知，常用在節點被移除時，定位源碼。

10. 異步請求的斷點

XHR breakpoints 可以用于異步請求的斷點，點擊加號即可添加斷點規則，輸入請求 的 URL 地址(片段)，會在請求地址包含對應字符串的異步請求發出的位置自動停止：