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

Jecelyn Yeen

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

使用新的「CSS 總覽」面板，找出網頁上可改進的 CSS。 開啟「CSS 總覽」面板，然後按一下「擷取總覽」，產生網頁的 CSS 報表。

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

CSS 總覽面板為預先發布版功能。Google 團隊正積極努力開發這項功能，歡迎提供意見，協助我們進一步改善。

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

Chromium 問題：1254557

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

長度 CSS 屬性已恢復「複製 CSS」和「以文字編輯」功能。這些體驗在最新版本中無法正常運作。

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

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

如要停用這項功能，請依序前往「設定」 >「實驗」 > 勾選「在『樣式』窗格中啟用 CSS 長度撰寫工具」核取方塊。

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 程式庫，這些快速鍵選項會特別實用。

在「樣式」窗格中，按一下 CSS 規則。您可以選取「以 JS 格式複製宣告內容」複製單一規則，或選取「以 JS 格式複製全部宣告內容」複製所有規則。

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

Chromium 問題：1253635

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

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

Chromium 問題：1214030

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

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

搭配 Chrome 95 的「屬性」窗格強化功能，您現在可以更輕鬆地找到相關屬性。

Chromium 問題：1226262

主控台更新

可選擇在控制台中隱藏 CORS 錯誤

您可以在「控制台」中隱藏 CORS 錯誤。由於系統現在會在「問題」分頁中回報 CORS 錯誤，因此隱藏 Console 中的 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 呼叫等。

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

請注意，「端點」部分目前仍在積極開發中 (暫時不會顯示任何報表端點)。

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

Chromium 問題：1205856

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。