Chrome DevTools 中一些非常實用的功能和調試技巧

今天來分享 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 樣式的修改都會直接改動本地文件，頁面重新加載，使用的資源也是本地資源，達到持久化的效果。

詳見：點擊這里

7. 全局搜索代碼

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

8. 事件監聽器的斷點

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

9. DOM 操作的斷點

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

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

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

10. 異步請求的斷點

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

11. CSS Overview

在 Chrome 的管理面板中，開啟 CSS Overview 面板之后，就可以查看當前網站的樣式信息了，包括顏色信息、字體信息、媒體查詢等。當我們需要優化頁面的 CSS 時，這個功能就派上用場了。除此之外，還可以使用該功能方便地查看其他優秀網站的樣式信息。

默認情況下，該面板是不開啟的，可以通過以下步驟來開啟此功能：

1. 在任意頁面打開 Chrome 瀏覽器的 DevTools；
2. 單擊更多選項?->?More tools?->?CSS Overview。

那該如何使用 CSS Overview 面板呢？很簡單，只需要點擊?Capture overview?按鈕來生成頁面的 CSS overview報告即可。如果想重新運行CSS Overview，只需點擊左上角的清除圖標，然后再點擊?Capture overview?按鈕即可。

CSS Overview 報告主要由五部分組成：

（1）Overview summary：?頁面 CSS 的高級摘要

（2）Colors：?頁面中的所有顏色。顏色按背景顏色、文本顏色等用途分組。它還顯示了具有低對比度問題的文本。

每種顏色都是可點擊的。我們可以單擊它以獲取使用該顏色的元素列表。將鼠標懸停在列表中的元素上就可以突出顯示頁面中對應的元素。單擊列表中的元素就可以在“Elements”面板中打開該元素。

（3）Font info：字體信息，?頁面中的所有字體及其出現，按不同的字體大小、字體粗細和行高分組。與顏色部分類似，可以單擊以查看受影響元素的列表。

（4）Unused declarations：?未使用的聲明，包含所有無效的樣式，按原因分組。

（5）Media queries：?媒體查詢，頁面中定義的所有媒體查詢，按出現次數最高的排序。單擊可以查看受影響元素的列表。

12. CSP 違規斷點

Chrome DevTools CSP 違規斷點可以捕捉到與CSP違規有關的可能的異常，并在代碼中指出這些異常。

CSP 即內容安全策略，它允許限制網站中的某些行為以提高安全性。例如，CSP 可用于禁止內聯腳本或禁止eval，這兩者都可以減少跨站腳本 (XSS)攻擊的攻擊面。

一個特別新的 CSP 是可信類型 (TT)策略，它支持動態分析，可以系統地防止對網站的一大類注入攻擊。為了實現這一點，TT 支持網站監管其 JavaScript 代碼，只允許將某些類型的東西分配給 DOM 接收器，例如 innerHTML。

網站可以通過包含特定的 HTTP 標頭來激活內容安全策略。例如，標頭content-security-policy: require-trusted-types-for ‘script’; trusted-types default激活頁面的 TT 策略。

目前，調試 TT 違規的唯一方法是在 JS 異常上設置斷點。由于強制 TT 違規將觸發異常，因此此功能可能會很有用。但是，在現實的場景中，需要對 TT 違規進行更細粒度的控制。特別是，我們希望僅在 TT 違規（而不是其他異常）上中斷，也在僅報告模式下中斷，并區分不同類型的 TT 違規。

啟用該功能將為應用程序增加一個額外的安全層，減少跨站腳本（XSS）等漏洞。

那該如何啟用該功能呢？可以通過以下步驟來開啟此功能：

1. 在任意頁面打開 Chrome 瀏覽器的 DevTools；
2. 點擊右上角設置圖標 -> 選中左側?Experiments?-> 勾選?Show CSP Violations view；
3. 重啟瀏覽器的 DevTools；
4. 在?CSP Violations Breakpoints?下選擇?Trusted Type Violations?即可。

當遇到有安全問題的代碼時，Chrome DevTools 甚至會顯示如何修復改問題。

13. 新的字體編輯器工具

Chrome DevTools 提供了一個實驗性的字體編輯器工具，可以用來改變字體設置?？梢杂盟鼇砀淖?strong>字體、大小、粗細、行高、字符間距，并實時看到變化。

那該如何啟用該功能呢？可以通過以下步驟來開啟此功能：

1. 在任意頁面打開 Chrome 瀏覽器的 DevTools；
2. 點擊右上角設置圖標 -> 選中左側?Experiments?-> 勾選?Enable New Font Editor Tools within Styles Pane；
3. 重啟瀏覽器的 DevTools；
4. 選擇HTML元素，其中包括想改變的字體，點擊字體圖標即可。

14. 雙屏模式

通過啟用雙屏模式，可以在 Chrome DevTools 模擬器的雙屏設備上調試你的 web 應用。這對于開發要適配折疊屏手機的應用是非常有用的。

那該如何啟用該功能呢？可以通過以下步驟來開啟此功能：

1. 在任意頁面打開 Chrome 瀏覽器的 DevTools；
2. 點擊右上角設置圖標 -> 選中左側?Experiments?-> 勾選?Emulation: Support dual-screen mode；
3. 重啟瀏覽器的 DevTools；
4. ①切換到移動設備調試 -> ②選擇一個雙屏設備 -> ③點擊上方的切換雙屏模式。

15. 完整的可訪問性樹視圖

通過 Chrome DevTools Accessibility Tree，可以檢查為每個DOM元素創建的可訪問性對象。這項功能與 Elements 選項卡相似，但使用它可以深入探索應用的更多可訪問性細節。

那該如何啟用該功能呢？可以通過以下步驟來開啟此功能：

1. 在任意頁面打開 Chrome 瀏覽器的 DevTools；
2. 點擊右上角設置圖標 -> 選中左側?Experiments?-> 勾選 Enable the Full accessibility tree view in the Elements pane；
3. 重啟瀏覽器的 DevTools；
4. 在Elements面板中點擊右上角的無障礙按鈕，將元素視圖模式切換為無障礙樹視圖。

結語

以上就死今天為大家分享的關于前端開發使用Chrome DevTools 調試的一些非常實用的功能和調試技巧，希望對大家有用。