Chrome 96 為開(kāi)發(fā)者工具增加了許多新功能
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ì)按原因分組。
媒體查詢，顯示頁(yè)面中定義的所有媒體查詢，按出現(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)容。