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 prefers-contrast 媒體功能

模擬 CSS prefers-contrast 媒體功能

prefers-contrast 媒體功能可用於偵測使用者是否要求網頁中的對比度較高或較低。

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

Chromium 問題：1139777

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

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

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

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

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

Chromium 問題：1243309

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

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

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

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

以 JavaScript 格式複製宣告

Chromium 問題：1253635

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

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

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

Chromium 問題：1214030

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

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

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

「屬性」窗格中的屬性顯示畫面

Chromium 問題：1226262

主控台更新

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

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

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

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

Chromium 問題：1251176

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

Intl 物件現在已提供適當的預覽畫面，並會在控制台中立即評估。先前 Intl 物件並未立即評估。

控制台中的 Intl 物件

Chromium 問題：1073804

一致的非同步堆疊追蹤

主控台現在會回報 async 函式 async 堆疊追蹤，以便與其他非同步工作和呼叫堆疊中顯示的內容保持一致。

非同步堆疊追蹤

Chromium 問題：1254259

保留主控台側欄

主控台側欄將持續存在。在 Chrome 94 中，我們宣布即將淘汰控制台側欄，並請開發人員提供意見和疑慮。

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

主控台側欄

Chromium 問題：1232937、1255586

「Application」面板中已淘汰的「Application cache」窗格

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

Chromium 問題：1084190

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

Reporting API 可協助您監控網頁的安全違規、已淘汰的 API 呼叫等。

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

請注意，「Endpoints」部分目前仍在開發中 (目前不會顯示報表端點)。

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

「Application」面板中的 Reporting API 窗格

Chromium 問題：1205856

下載預覽管道

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

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

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。