2021 年 10 月 25 日，谷歌開發者工具相關負責人 Jecelyn Yeen 發布了 Chrome 開發者工具在 Chrome 96 版本的功能改進，其中包含新的 CSS 概覽面板、 模擬 Auto Dark   深色 主題、CSS 樣式復制為   JavaScript 等新功能。

預覽功能：新的 CSS 概覽面板

新的開發者工具可以生成一份 CSS 概覽報告，報告中包括：

• 整個頁面的 CSS 元素概覽。（見上圖）
• 顏色概覽   ，顯示頁面中的所有顏色，按用途分組，例如背景顏色、文本顏色等，還會顯示具有低對比度問題的文本。
• 字體顏色概覽， 頁面中的所有字體和出現的次數，按不同的字體大小、字體粗細和行高分組。
• 無效樣式概覽 ，未生效的樣式會 按原因分組。
• 媒體查詢， 顯示 頁面中定義的所有媒體查詢，按出現次數最多的排序。

渲染選項卡更新

模擬 CSS 對比度偏好功能

添加“首選對比度”功能，允許開發者根據用戶在操作系統中選擇的對比度級別來調整 Web 的對比度。有效選項為“更多”、“更少”、“自定義”或“無偏好”。

模擬 Chrome 的自動黑暗主題功能

使用開發者工具模擬自動深色主題，可以查看用戶啟用 Chrome 的自動深色主題時頁面的外觀。

當用戶在操作系統中選擇使用深色主題時，瀏覽器會將自動生成的深色主題應用于淺色主題網站。

CSS 樣式復制為 JavaScript 屬性

上下文菜單中添加了兩個新選項，可以輕松地將 CSS 規則復制為 JavaScript 屬性，適合使用 CSS-in-JS 庫的開發人員。

例如，將復制 padding-left: '1.5rem'  到剪貼板：

Chrome 96 版本還包含更多開發者工具的功能更新，包含新的 API 管理面板、控制臺更新等 ，詳情可點此查看谷歌公告原文 ，了解更多具體更新內容。