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

預(yù)覽功能：新的 CSS 概覽面板

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

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

渲染選項卡更新

模擬 CSS 對比度偏好功能

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

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

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

當(dāng)用戶在操作系統(tǒng)中選擇使用深色主題時，瀏覽器會將自動生成的深色主題應(yīng)用于淺色主題網(wǎng)站。

CSS 樣式復(fù)制為 JavaScript 屬性

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

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

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