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

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

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

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

渲染選項(xiàng)卡更新

模擬 CSS 對(duì)比度偏好功能

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

模擬 Chrome 的自動(dòng)黑暗主題功能

使用開(kāi)發(fā)者工具模擬自動(dòng)深色主題，可以查看用戶啟用 Chrome 的自動(dòng)深色主題時(shí)頁(yè)面的外觀。

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

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

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

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

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