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

Jecelyn Yeen

全新 CSS Flexbox 偵錯工具

開發人員工具現已推出專屬的 CSS Flexbox 偵錯工具！

CSS Flexbox 偵錯工具

如果網頁上的 HTML 元素套用了 display: flex 或 display: inline-flex，在「元素」面板中顯示該元素旁邊就會顯示 flex 徽章。按一下徽章即可切換頁面顯示彈性重疊元素。

在「Styles」窗格中，按一下 display: flex 或 display: inline-flex 旁邊的新圖示，即可開啟「Flexbox」編輯器。Flexbox 編輯器可快速編輯 Flexbox 屬性。你自己試試看！

此外，「Layout」窗格有「Flexbox」區段，可以在頁面上顯示所有 Flexbox 元素。您可以切換每個元素的重疊畫面。

Layout 窗格中的 Flexbox 區段

Chromium 問題：1166710、1175699

全新 Core Web Vitals 重疊元素

透過全新的 Core Web Vitals 疊加資料，以圖表呈現及評估網頁效能。

Core Web Vitals 是 Google 推出的一項計畫，旨在針對提供優質網路使用者體驗的關鍵品質信號，提供統一的指引。

開啟「Command」選單，執行「Show Rendering」指令，然後勾選「Core Web Vitals」核取方塊。

目前顯示的疊加層：

Core Web Vitals 重疊元素

Chromium 問題：1152089

問題分頁更新

已將問題數量移至控制台狀態列

管理中心狀態列現已新增問題數量按鈕，以便改善問題警告的可見度。這項操作會取代管理中心中的問題訊息。

控制台狀態列中的問題數量

Chromium 問題：1140516

回報信任的網路活動問題

「問題」分頁現在會回報受信任的網路活動問題。目的是協助開發人員瞭解並修正網站的「受信任網路活動」問題，改善應用程式品質。

開啟受信任的網路活動。接著，按一下主控台狀態列中的「問題計數」按鈕，開啟「Issues」分頁，即可查看問題。請觀看這場 Andre 的演講，進一步瞭解如何建立及部署受信任的網路活動。

「問題」分頁中有信任的網路活動問題

Chromium 問題：1147479

在控制台中將字串格式設為 (有效) JavaScript 字串常值

現在，Console 會在控制台中將字串格式化為有效的 JavaScript 字串常值。之前，Console 不會在輸出字串時逸出雙引號。

將字串格式設為 (有效) JavaScript 字串常值

Chromium 問題：1178530

「Applications」面板中的「New Trust Tokens」窗格

開發人員工具會在「Application」面板下方的「Trust Tokens」窗格的目前瀏覽內容中，顯示所有可用的信任權杖。

Trust Token 是一種新的 API，可用於打擊詐欺、辨別機器人和真人，而且不需要被動追蹤。瞭解如何開始使用 Trust Token。

新增信任權杖窗格

Chromium 問題：1126824

模擬 CSS color-gamut 媒體功能

模擬 CSS color-gamut 媒體功能

color-gamut 媒體查詢可讓您測試瀏覽器和輸出裝置支援的約略顏色範圍。舉例來說，如果 color-gamut: p3 媒體查詢相符，表示使用者的裝置支援 Display-P3 色彩空間。

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

Chromium 問題：1073887

改良的漸進式網頁應用程式工具

開發人員工具現在會在控制台中顯示更詳細的「漸進式網頁應用程式 (PWA)」安裝警告訊息，以及說明文件的連結。

PWA 安裝警告

如果資訊清單 description 超過 324 個字元，「Manifest」窗格現在會顯示警告訊息。

PWA 說明截斷警告

此外，如果 PWA 的螢幕截圖不符合需求，Manifest 窗格現在會顯示警告訊息。如要進一步瞭解 PWA 螢幕截圖屬性及其相關規定，請參閱這裡。

PWA 螢幕截圖警告

Chromium 問題：1146450、1169689、965802

「網路」面板中新增「Remote Address Space」欄

使用「網路」面板中的新 Remote Address Space 欄，查看每個網路資源的網路 IP 位址空間。

新增「遠端位址空間」欄

Chromium 問題：1128885

提升執行效能

開發人員工具開啟後，頁面載入效能現已提升。在某些極端的情況下，效能提升了 10 倍。

開發人員工具會收集堆疊追蹤並附加至主控台訊息或非同步工作，供開發人員日後在發生問題時使用。由於這個集合必須在瀏覽器引擎中同步進行，因此在開發人員工具開啟時，緩慢堆疊追蹤收集作業可能會大幅減慢頁面的速度。我們已大幅降低堆疊追蹤收集作業的負擔。

請密切留意有關實作程序的詳細工程網誌文章。

Chromium 問題：1069425、1077657

在「頁框詳細資料」檢視畫面中顯示允許/不允許的功能

畫面詳細資料檢視畫面現在會顯示權限政策控管的許可和不允許瀏覽器功能清單。

權限政策是一種網路平台 API，可讓網站在獨立頁框或內嵌的 iframe 中允許或禁止使用瀏覽器功能。

根據權限政策允許/禁止的功能

Chromium 問題：1158827

「Cookie」窗格中新增「SameParty」欄

「應用程式」面板中的「Cookie」窗格現在會顯示 Cookie 的 SameParty 屬性。SameParty 屬性是新的布林值屬性，用於表示是否應在對相同第一方集合來源的要求中加入 Cookie。

SameParty 資料欄

Chromium 問題：1161427

已淘汰的非標準 fn.displayName 支援

已淘汰非標準 fn.displayName 的支援功能。改用 fn.name。

displayName 使用範例

Chrome 過去支援非標準 fn.displayName 屬性，讓開發人員可以針對 error.stack 和開發人員工具堆疊追蹤中顯示的函式，控管偵錯名稱。在上述範例中，Call Stack 先前會顯示 noLongerSupport。

將 fn.displayName 替換為標準 fn.name，標準 fn.name 是在 ECMAScript 2015 中透過 Object.defineProperty 進行設定，可取代非標準 fn.displayName 屬性。

對 fn.displayName 的支援往往不穩定，且在所有瀏覽器引擎中無法一致。這能降低堆疊追蹤收集速度，因此無論實際是否使用 fn.displayName，開發人員一律須支付費用。

名稱用法範例

Chromium 問題：1177685

「設定」選單中將淘汰 Don't show Chrome Data Saver warning

Chrome 數據節省模式已淘汰，因此 Don't show Chrome Data Saver warning 設定已遭移除。

淘汰「不要顯示 Chrome 數據節省模式警告」設定

Chromium 問題：1056922

實驗功能

自動在「問題」分頁中回報低對比問題

開發人員工具已自動在「問題」分頁中針對回報對比問題新增實驗性支援。

低對比文字是網路上最常自動偵測到的無障礙功能問題。在「問題」分頁顯示這些問題，有助於開發人員更快發現這些問題。

開啟含有低對比問題的頁面 (例如這個示範)。接著，按一下主控台狀態列中的「問題計數」按鈕，開啟「Issues」分頁，即可查看問題。

自動回報低對比問題

Chromium 問題：1155460

「元素」面板中的完整無障礙樹狀檢視

您現在可以切換，查看經過改良的新版無障礙功能樹狀檢視完整的頁面。

目前的「無障礙功能窗格」僅會顯示部分節點的部分內容，只會顯示根節點與檢查節點之間的直接祖系鏈結。新的無障礙樹狀檢視旨在改善其效能，並讓開發人員更容易探索、實用，且更容易使用。

啟用實驗後，「Elements」面板中會顯示新的按鈕，按一下即可切換現有 DOM 樹狀結構和完整的無障礙樹狀結構。

請注意，這只是初期實驗階段，我們會持續改善及擴充這項功能。

完整的無障礙樹狀檢視

Chromium 問題：887173

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google 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