大家好，我是CUGGZ，又到周五啦，提前祝大家周末愉快呀!

Chrome 是前端開發(fā)人員最常用的工具之一，今天就來(lái)看 5 個(gè) Chrome DevTools 實(shí)驗(yàn)性功能，開啟這些隱藏功能，讓你的Chrome更加強(qiáng)大!

本文中使用的 Chrome 瀏覽器版本：99.0.4844.74(正式版本) (arm64)

1. CSS Overview

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

默認(rèn)情況下，該面板是不開啟的，可以通過以下步驟來(lái)開啟此功能：

• 在任意頁(yè)面打開 Chrome 瀏覽器的 DevTools；
• 單擊更多選項(xiàng) -> More tools -> CSS Overview。

那該如何使用 CSS Overview 面板呢?很簡(jiǎn)單，只需要點(diǎn)擊 Capture overview 按鈕來(lái)生成頁(yè)面的 CSS overview報(bào)告即可。如果想重新運(yùn)行CSS Overview，只需點(diǎn)擊左上角的清除圖標(biāo)，然后再點(diǎn)擊 Capture overview 按鈕即可。

CSS Overview 報(bào)告主要由五部分組成：

(1)Overview summary： 頁(yè)面 CSS 的高級(jí)摘要。

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

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

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

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

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

2. 新的字體編輯器工具

Chrome DevTools 提供了一個(gè)實(shí)驗(yàn)性的字體編輯器工具，可以用來(lái)改變字體設(shè)置?？梢杂盟鼇?lái)改變字體、大小、粗細(xì)、行高、字符間距，并實(shí)時(shí)看到變化。

可以通過以下步驟來(lái)開啟此功能：

• 在任意頁(yè)面打開 Chrome 瀏覽器的 DevTools；
• 點(diǎn)擊右上角設(shè)置圖標(biāo) -> 選中左側(cè) Experiments -> 勾選 Enable New Font Editor Tools within Styles Pane；

• 重啟瀏覽器的 DevTools；
• 選擇HTML元素，其中包括想改變的字體，點(diǎn)擊字體圖標(biāo)即可。

3. 雙屏模式

通過啟用雙屏模式，可以在 Chrome DevTools 模擬器的雙屏設(shè)備上調(diào)試你的 web 應(yīng)用。這個(gè)概念對(duì)于開發(fā)需要適配折疊屏手機(jī)的應(yīng)用是非常有用的。

可以通過以下步驟來(lái)開啟此功能：

• 在任意頁(yè)面打開 Chrome 瀏覽器的 DevTools；
• 點(diǎn)擊右上角設(shè)置圖標(biāo) -> 選中左側(cè) Experiments -> 勾選 Emulation: Support dual-screen mode；

• 重啟瀏覽器的 DevTools；
• ①切換到移動(dòng)設(shè)備調(diào)試 -> ②選擇一個(gè)雙屏設(shè)備 -> ③點(diǎn)擊上方的切換雙屏模式。

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

通過 Chrome DevTools Accessibility Tree，可以檢查為每個(gè)DOM元素創(chuàng)建的可訪問性對(duì)象。這項(xiàng)功能與 Elements 選項(xiàng)卡相似，但使用它可以深入探索應(yīng)用的更多可訪問性細(xì)節(jié)。

可以通過以下步驟來(lái)開啟此功能：

• 在任意頁(yè)面打開 Chrome 瀏覽器的 DevTools；
• 點(diǎn)擊右上角設(shè)置圖標(biāo) -> 選中左側(cè) Experiments -> 勾選 Enable the Full accessibility tree view in the Elements pane；

• 重啟瀏覽器的 DevTools；
• 在Elements面板中點(diǎn)擊右上角的無(wú)障礙按鈕，將元素視圖模式切換為無(wú)障礙樹視圖。

5. CSP 違規(guī)斷點(diǎn)

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

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

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

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

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

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

可以通過以下步驟來(lái)開啟此功能：

• 在任意頁(yè)面打開 Chrome 瀏覽器的 DevTools；
• 點(diǎn)擊右上角設(shè)置圖標(biāo) -> 選中左側(cè) Experiments -> 勾選 Show CSP Violations view；

• 重啟瀏覽器的 DevTools；
• 在 CSP Violations Breakpoints 下選擇 Trusted Type Violations即可。

當(dāng)遇到有安全問題的代碼時(shí)，Chrome DevTools 甚至?xí)@示如何修復(fù)該問題。