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

Jecelyn Yeen

預覽功能：全新「CSS 總覽」面板

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

您可以進一步細查資訊。舉例來說，按一下「色彩」部分中的任一顏色，系統就會列出套用相同顏色的元素清單。按一下元素，在「元素」面板中開啟所需元素。

CSS 總覽面板是預先發布版功能，我們的團隊仍在積極改善這項功能，我們也想聽聽你的意見回饋，以便進一步改善這項功能。

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

CSS 總覽面板

Chromium 問題：1254557

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

針對長度有限的 CSS 資源，系統會還原複製 CSS 和以文字形式編輯功能。這些功能在上一個版本中已失效。

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

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

您可以透過 [設定] > 停用這項功能 >實驗 >[在樣式窗格中啟用 CSS 長度編寫工具] 核取方塊。

Chromium 問題：1259088、1172993

轉譯分頁更新

模擬 CSS 優先使用對比媒體功能

模擬 CSS 優先使用對比媒體功能

偏好對比媒體功能，可用來偵測使用者要求是否提高或降低網頁的對比度。

開啟「Command」選單，執行「Show Rendering」指令，然後設定「Emulate CSS media featurerefers-contrast」下拉式選單。

Chromium 問題：1139777

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

使用開發人員工具模擬自動深色主題，在 Chrome 的 自動深色主題啟用時，輕鬆查看網頁呈現的效果。

Chrome 96 推出了在 Android 裝置上針對 Auto Dark Theme 的來源試用體驗。使用者選擇在作業系統中採用深色主題時，瀏覽器就會為淺色主題網站套用自動產生的深色主題。

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

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

Chromium 問題：1243309

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

內容選單中新增兩個選項，方便您以 JavaScript 屬性的形式複製 CSS 規則。這些快速鍵選項對於使用 CSS-in-JS 程式庫的開發人員來說特別實用。

在「Styles」(樣式) 窗格中，在 CSS 規則上按一下滑鼠右鍵。您可以選取「複製宣告為 JS」來複製單一規則，或是選取「複製所有宣告的 JS」來複製所有規則。

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

以 JavaScript 形式複製宣告

Chromium 問題：1253635

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

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

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

Chromium 問題：1214030

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

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

Chrome 第 95 版中的「屬性」窗格強化功能，可讓您更容易找到相關屬性。

屬性窗格中的屬性顯示

Chromium 問題：1226262

主控台更新

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

您可以在控制台中隱藏 CORS 錯誤。由於系統現在已在「問題」分頁中回報 CORS 錯誤，因此在管理中心隱藏 CORS 錯誤有助於減少干擾。

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

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

Chromium 問題：1251176

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

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

控制台中的 Intl 物件

Chromium 問題：1073804

一致的非同步堆疊追蹤

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

非同步堆疊追蹤

Chromium 問題：1254259

保留控制台側欄

控制台側欄不會再顯示。我們在 Chrome 94 版中宣布即將淘汰 Play 管理中心側欄，並要求開發人員提出意見和疑慮。

我們現已從淘汰通知中收集到足夠的意見回饋，並將努力改善側欄，而非直接移除。

控制台側欄

Chromium 問題：1232937、1255586

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

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

Chromium 問題：1084190

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

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

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

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

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

「應用程式」面板中的 Reporting API 窗格

Chromium 問題：1205856

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。