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

轉譯分頁更新

模擬 CSSpreferreds-contrast 媒體功能

模擬 CSSpreferreds-contrast 媒體功能

「偏好對比」媒體功能是用於偵測使用者是否要求增加或降低網頁的對比度。

開啟「指令選單」、執行「顯示算繪」指令，然後設定「Emulate CSS media 功能 likes-contrast」下拉式選單。

Chromium 問題：1139777

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

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

Chrome 96 針對 Android 裝置上的自動深色主題推出了來源試用。透過這項功能，使用者在作業系統中選擇使用深色主題時，瀏覽器會將自動產生的深色主題套用至淺色主題網站。

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

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

Chromium 問題：1243309

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

內容選單新增兩個選項，可讓您輕鬆將 CSS 規則複製為 JavaScript 屬性。這些捷徑選項特別適合使用 CSS-in-JS 程式庫的開發人員。

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

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

以 JavaScript 複製宣告

Chromium 問題：1253635

「Network」面板中新增「酬載」分頁

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

「Network」面板中的「Payload」分頁

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

「Applications」面板中的已淘汰「Applications」快取窗格

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

Chromium 問題：1084190

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

Reporting API 旨在協助您監控網頁的安全性違規事項、已淘汰的 API 呼叫等。

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

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

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

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

Chromium 問題：1205856

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Chrome 80 版

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59