What's 開發人員工具的新功能 (Chrome 96)

預先發布版功能：全新 CSS 總覽面板

使用新的「CSS 總覽」面板，找出網頁上可能有的 CSS 改善項目。 開啟「CSS 總覽」面板，然後點選「擷取總覽」，即可產生網頁 CSS 的報表。

您可以進一步深入瞭解這些資訊。舉例來說，只要在「顏色」部分按一下某個顏色，即可查看套用相同顏色的元素清單。按一下元素，即可在「元素」面板中開啟該元素。

「CSS 總覽」面板為預先發布版功能，我們的團隊仍在積極開發這項功能，歡迎提供意見回饋，協助我們進一步改善。

如要進一步瞭解「CSS 總覽」面板，請參閱這篇文章。

Chromium 問題：1254557

已還原並改善 CSS 長度編輯和複製體驗

針對長度較長的 CSS 資源，系統會還原複製 CSS 和以文字形式編輯功能。這些體驗在最新版本中無法正常運作。

此外，您可以拖曳調整單位值，並透過下拉式選單更新單位類型。這項外掛程式長度編寫功能不應影響主要的文字編輯體驗。

如有任何問題，請透過 goo.gle/length-feedback 回報。

如要停用這項功能，請依序前往「Settings」 >「Experiments」 >「Enable CSS length authoring tools in the Styles pane」核取方塊。

Chromium 問題：1259088、1172993

算繪分頁更新

模擬 CSS prefers-contrast 媒體功能

prefers-contrast 媒體功能可用於偵測使用者是否要求網頁中的對比度增加或減少。

開啟指令選單，執行顯示算繪指令，然後設定模擬 CSS 媒體功能 prefers-contrast 下拉式選單。

Chromium 問題：1139777

模擬 Chrome 的自動深色主題功能

使用開發人員工具模擬自動套用深色主題，輕鬆查看啟用 Chrome 自動套用深色主題後的網頁外觀。

Chrome 96 推出了 Android 版自動深色主題的來源試用。有了這項功能，當使用者在作業系統中選擇深色主題後，瀏覽器就會將自動產生的深色主題套用至淺色主題網站。

開啟「指令選單」，執行「顯示算繪」指令，然後設定「模擬自動深色模式」下拉式選單。

Chromium 問題：1243309

在「樣式」窗格中以 JavaScript 格式複製宣告

我們在內容選單中新增了兩個選項，方便您將 CSS 規則複製為 JavaScript 屬性。這些捷徑選項非常實用，特別適合使用 CSS-in-JS 程式庫的開發人員。

在「Styles」窗格中，按一下 CSS 規則的滑鼠右鍵。您可以選取「Copy declaration as JS」複製單一規則，或選取「Copy all declarations as JS」複製所有規則。

舉例來說，以下範例會將 paddingLeft: '1.5rem' 複製到剪貼簿。

Chromium 問題：1253635

「網路」面板中的新「酬載」分頁

檢查含有酬載的網路要求時，請使用「網路」面板中的新「酬載」分頁。先前，您可以在「Headers」分頁下找到酬載資訊。

Chromium 問題：1214030

改善「屬性」窗格中的屬性顯示方式

「Properties」窗格現在只會顯示相關的屬性，而不會顯示執行個體的所有屬性。已移除 DOM 原型和方法。

搭配 Chrome 95 中的屬性窗格增強功能，您現在可以更輕鬆地找出相關屬性。

Chromium 問題：1226262

主控台更新

在主控台中隱藏 CORS 錯誤的選項

您可以在控制台中隱藏 CORS 錯誤。由於 CORS 錯誤現在會在「Issues」分頁中回報，因此隱藏 管理中心中的 CORS 錯誤有助於減少雜亂。

在控制台中，按一下「設定」圖示，然後取消勾選「在控制台中顯示 CORS 錯誤」核取方塊。

Chromium 問題：1251176

在控制台中正確預覽及評估 Intl 物件

Intl 物件現在有適當的預覽，您可以在控制台中積極評估。先前，系統並未立即評估 Intl 物件。

Chromium 問題：1073804

一致的非同步堆疊追蹤

控制台現在會回報 async 函式的 async 堆疊追蹤，使其與其他非同步工作一致，並且與呼叫堆疊中顯示的結果一致。

Chromium 問題：1254259

保留主控台側欄

控制台側欄不會再顯示。在 Chrome 94 中，我們宣布即將淘汰控制台側欄，並請開發人員提供意見和疑慮。

我們現在已收到足夠的淘汰通知意見回饋，因此會著手改善側欄，而非移除側欄。

Chromium 問題：1232937、1255586

「應用程式」面板中已淘汰的應用程式快取窗格

由於 Chrome 和其他採用 Chromium 的瀏覽器已不再支援 AppCache，因此應用程式面板中的「應用程式快取」窗格現已移除。

Chromium 問題：1084190

[實驗功能] 應用程式面板中的新 Reporting API 窗格

Reporting API 的用途是協助您監控網頁安全性違規情形、已淘汰的 API 呼叫等。

啟用這項實驗後，您現在可以在「Application」面板中的新版「Reporting API」窗格中查看報表狀態。

請注意，「端點」部分目前仍處於開發階段 (目前不會顯示報表端點)。

如要進一步瞭解 Reporting API，請參閱這篇文章。

Chromium 問題：1205856

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

與 Chrome 開發人員工具團隊聯絡

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「更多選項」>「說明」>「回報開發人員工具的問題」，然後使用 more_vert 回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。