- 主要針對外網資源無法訪問的情況下,查看Chrome新特性 原鏈接
預覽特性: 新的 CSS 概覽面板
使用新的 CSS 概覽面板,可以幫助您確定自己的頁面是否存在可以潛在改善 CSS 的地方。打開 CSS 概覽面板,然后點擊捕獲概覽以便於生成有關頁面 CSS 的報告。
您可以進一步了解該信息。例如,點擊顏色區域中的顏色來查看應用相同顏色的元素列表。點擊一個元素可以在元素面板中打開該元素。

修復以及改善 CSS 長度編輯與復制的體驗
CSS 長度的復制以及文本編輯的用戶體驗問題均已被修復。這兩個功能在上輪發布中出現了一些問題。
此外,您還是可以橫向拖拽光標加減長度數值以及在下拉列表中選擇新的長度單位。這些附加的長度編輯功能不會影響主要的文本編輯體驗。
您可以通過 設置 > 實驗 > Enable CSS length authoring tools in the Styles pane 復選框禁用附加的長度編輯功能。
模擬 CSS prefers-contrast 媒體特性

打開命令菜單,運行 Show Rendering 命令,然后設置帶有模擬 CSS preferred-contrast 媒體特性字樣的下拉菜單。
Emulate the Chrome’s Auto Dark Theme feature模擬 Chrome 的自動深色主題特性
使用 DevTools 模擬自動深色主題以查看頁面在 Chrome 的自動深色主題開啟后的外觀。
Chrome 96 發布了自動深色主題的 Origin Trial (目前只限於 Android 版)。有了該功能,當用戶在操作系統那里選擇深色主題時,瀏覽器將自動為淺色主題網站生成深色主題。
打開命令菜單,運行 Show Rendering 命令,然后設置帶有模擬自動深色模式字樣的下拉菜單。

將樣式窗格里面的 CSS 規則復制為 JavaScript 屬性
右鍵菜單里面新增了兩個選項,方便您將 CSS 規則復制為 JavaScript 屬性。這些快捷選項特別適合那些使用 CSS-in-JS 庫的開發者。
在樣式邊欄中,右鍵點擊 CSS 規則。您可以選擇 將聲明復制為 JS 的選項來復制單個規則或選擇將所有聲明復制為 JS 的選項來復制所有規則。
例如,下面的示例將會把 paddingLeft: '1.5rem' 給復制到剪貼板。

網絡面板新增載荷(Payload)邊欄
當您想查看網絡請求中的 payload 信息時,可以使用網絡面板里面的 Payload 邊欄。此前,payload 信息出現在報頭邊欄里。

優化屬性窗格里面的屬性展示
屬性邊欄現在只展示相關屬性,而不是像之前那樣展示實例的所有屬性。現在移除對 DOM 原型以及方法的展示。
配合 Chrome 95 屬性邊欄的屬性展示改善,您現在可以更輕松地找到相關屬性。

新增選項,用於隱藏控制台里面的 CORS 錯誤
您可以隱藏控制台里面的 CORS 錯誤。由於 CORS 的錯誤已經顯示在問題選項卡那里,隱藏控制台里面的 CORS 錯誤有助於減少混亂。
在控制台里面,點擊設置圖標,然后取消選中 在控制台中顯示 CORS 錯誤 復選框。

控制台正確預覽以及執行 Intl 對象
現在,Intl對象不僅能夠被正確預覽,而且還能夠在控制台里直接查詢。此前,Intl 對象不會被立即查詢。

統一的異步堆棧信息
DevTools 現在能夠實現異步函數的異步堆棧信息與其它異步任務的堆棧信息保持一致。

保留控制台側邊欄
控制台側邊欄將會被保留。在 Chrome 94 中,我們宣布即將棄用控制台側邊欄,並且向開發者尋求反饋以及意見。
現在,我們從棄用通知那里獲得了足夠的反饋,后面我們將致力於改進側邊欄而不是將它移除。

棄用應用程序面板里面的應用程序緩存窗格
由於 Chrome 以及基於 Chromium 的瀏覽器都已移除對 AppCache 的支持,因此應用面板里面的應用緩存邊欄現已被移除。
[實驗] 應用程序面板里面新增 Reporting API 窗格
Reporting API 旨在幫助您監控違規網頁,過時的API調用以及更多。
啟用此實驗后,您現在可以在應用程序面板的新 Reporting API 邊欄里面查看報告狀態。
請注意,Endpoints 部分目前仍在積極開發中(目前沒有 reporting endpoints)。

