Chrome DevTools中的這些操作，你都知道嗎？

作者：CUGGZ 2022-11-10 09:00:41

系統(tǒng) 瀏覽器

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

大家好，我是 CUGGZ。

今天來分享 Chrome DevTools 中一些非常實用的功能和調(diào)試技巧！

1. 保留日志

2. 代碼覆蓋率

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

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

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

3. 顯示重繪

在瀏覽器的開發(fā)者工具中可以通過開啟顯示重繪選項以查看頁面在執(zhí)行操作時哪些元素會發(fā)生重繪。在控制臺右上角三個點中的 More tools 選項中開啟 Rendering 選項卡：

開啟 Rendering（渲染）選項后，開啟 Paint flashing：

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

4. 檢查動畫

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

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

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

5. 截圖

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

這里有四個選項：

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

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

6. Local Overrides

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

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

7. 全局搜索代碼

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

8. 事件監(jiān)聽器的斷點

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

9. DOM 操作的斷點

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

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

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

10. 異步請求的斷點

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

11. CSS Overview

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

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

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

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

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

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

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

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

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

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

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

12. CSP 違規(guī)斷點

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

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

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

網(wǎng)站可以通過包含特定的 HTTP 標(biāo)頭來激活內(nèi)容安全策略。例如，標(biāo)頭content-security-policy: require-trusted-types-for 'script'; trusted-types default激活頁面的 TT 策略。

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

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