開啟這些隱藏功能，讓你的Chrome更加強大！
大家好，我是CUGGZ，又到周五啦，提前祝大家周末愉快呀!
Chrome 是前端開發人員最常用的工具之一，今天就來看 5 個 Chrome DevTools 實驗性功能，開啟這些隱藏功能，讓你的Chrome更加強大!
本文中使用的 Chrome 瀏覽器版本：99.0.4844.74(正式版本) (arm64)
1. CSS Overview
在 Chrome 的管理面板中，開啟CSS Overview面板之后，就可以查看當前網站的樣式信息了，包括顏色信息、字體信息、媒體查詢等。當我們需要優化頁面的 CSS 時，這個功能就派上用場了。除此之外，還可以使用該功能方便地查看其他優秀網站的樣式信息。
默認情況下，該面板是不開啟的，可以通過以下步驟來開啟此功能：
- 在任意頁面打開 Chrome 瀏覽器的 DevTools；
- 單擊更多選項 -> 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： 媒體查詢，頁面中定義的所有媒體查詢，按出現次數最高的排序。單擊可以查看受影響元素的列表。
2. 新的字體編輯器工具
Chrome DevTools 提供了一個實驗性的字體編輯器工具，可以用來改變字體設置?？梢杂盟鼇砀淖冏煮w、大小、粗細、行高、字符間距，并實時看到變化。
可以通過以下步驟來開啟此功能：
- 在任意頁面打開 Chrome 瀏覽器的 DevTools；
- 點擊右上角設置圖標 -> 選中左側 Experiments -> 勾選 Enable New Font Editor Tools within Styles Pane；
- 重啟瀏覽器的 DevTools；
- 選擇HTML元素，其中包括想改變的字體，點擊字體圖標即可。
3. 雙屏模式
通過啟用雙屏模式，可以在 Chrome DevTools 模擬器的雙屏設備上調試你的 web 應用。這個概念對于開發需要適配折疊屏手機的應用是非常有用的。
可以通過以下步驟來開啟此功能：
- 在任意頁面打開 Chrome 瀏覽器的 DevTools；
- 點擊右上角設置圖標 -> 選中左側 Experiments -> 勾選 Emulation: Support dual-screen mode；
- 重啟瀏覽器的 DevTools；
- ①切換到移動設備調試 -> ②選擇一個雙屏設備 -> ③點擊上方的切換雙屏模式。
4. 完整的可訪問性樹視圖
通過 Chrome DevTools Accessibility Tree，可以檢查為每個DOM元素創建的可訪問性對象。這項功能與 Elements 選項卡相似，但使用它可以深入探索應用的更多可訪問性細節。
可以通過以下步驟來開啟此功能：
- 在任意頁面打開 Chrome 瀏覽器的 DevTools；
- 點擊右上角設置圖標 -> 選中左側 Experiments -> 勾選 Enable the Full accessibility tree view in the Elements pane；
- 重啟瀏覽器的 DevTools；
- 在Elements面板中點擊右上角的無障礙按鈕，將元素視圖模式切換為無障礙樹視圖。
5. 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)等漏洞。
可以通過以下步驟來開啟此功能：
- 在任意頁面打開 Chrome 瀏覽器的 DevTools；
- 點擊右上角設置圖標 -> 選中左側 Experiments -> 勾選 Show CSP Violations view；
- 重啟瀏覽器的 DevTools；
- 在 CSP Violations Breakpoints 下選擇 Trusted Type Violations即可。
當遇到有安全問題的代碼時，Chrome DevTools 甚至會顯示如何修復該問題。
