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

全新 CSS flexbox 偵錯工具

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

CSS Flexbox 偵錯工具

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

在「Styles」(樣式) 窗格中,按一下 display: flexdisplay: inline-flex 旁邊的新圖示,即可開啟「Flexbox」編輯器。Flexbox 編輯器可讓您快速編輯 Flexbox 屬性。你自己試試看!

此外,「Layout」窗格內有「Flexbox」區段,會顯示頁面上所有的 Flexbox 元素。您可以切換每個元素的疊加層。

「Layout」窗格中的 Flexbox 部分

Chromium 問題:11667101175699

全新網站體驗核心指標重疊

使用全新的 Core Web Vitals 重疊元素,更詳細地呈現及評估網頁效能。

Core Web Vitals 是 Google 推出的一項計畫,旨在針對提供優質網路使用者體驗的重要品質信號提供整合式指引。

開啟「指令選單」、執行「顯示轉譯」指令,然後啟用「Core Web Vitals」核取方塊。

疊加畫面目前會顯示:

網站體驗核心指標重疊

Chromium 問題:1152089

「問題」分頁最新消息

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

Console 狀態列現已新增「問題計數」按鈕,讓問題警告更容易顯示。這會取代控制台中的問題訊息。

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

Chromium 問題:1140516

回報受信任網路活動問題

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

開啟信任的網路活動。接著在「Console」狀態列中按一下「Issues count」按鈕,開啟「Issues」分頁。觀看由 Andre 製作的演講,進一步瞭解如何建立及部署受信任的網路活動。

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

Chromium 問題:1147479

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

現在,Console 會在控制台將字串格式化為有效的 JavaScript 字串常值。先前,Console 不會在列印字串時逸出雙引號。

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

Chromium 問題:1178530

「Application」面板中的全新「Trust Tokens」窗格

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

Trust Token 是一種新的 API,可協助防範詐欺行為,以及在不需要被動追蹤的情況下區分機器人和真人。瞭解如何開始使用信任權杖

新增「Trust Tokens」窗格

Chromium 問題:1126824

模擬 CSS 色彩轉換媒體功能

模擬 CSS 色彩轉換媒體功能

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

開啟「指令選單」,執行「顯示算繪」指令,然後設定「Emulate CSS 媒體功能 color-gamut」下拉式選單。

Chromium 問題:1073887

改善漸進式網頁應用程式工具

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

PWA 安裝性警告

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

PWA 說明截斷警告

此外,如果 PWA 的螢幕截圖不符合需求,「Manifest」窗格現在會顯示警告訊息。進一步瞭解 PWA 螢幕截圖屬性及其需求。

PWA 螢幕截圖警告

Chromium 問題:11464501169689965802

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

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

新的「遠端位址空間」欄

Chromium 問題:1128885

提升執行效能

改善在開啟開發人員工具的情況下載入網頁的效能。在部分極端情況下,效能提升了 10 倍

開發人員工具會收集堆疊追蹤,並附加到主控台訊息或非同步工作中,方便在發生問題時讓開發人員使用。由於此集合必須在瀏覽器引擎中同步進行,因此開啟開發人員工具的堆疊追蹤收集速度緩慢,會大幅減慢網頁速度。我們大幅降低了堆疊追蹤收集的負擔。

有關實作方式的詳細說明,請密切關注後續的工程網誌文章。

Chromium 問題:10694251077657

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

影格詳細資料檢視畫面現在會顯示權限政策控制的允許和禁止瀏覽器功能清單。

權限政策是一個網路平台 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 和開發人員工具堆疊追蹤中顯示的函式偵錯名稱。在上述範例中,呼叫堆疊先前會顯示 noLongerSupport

fn.displayName 替換為可在 ECMAScript 2015 中透過 Object.defineProperty 設定的標準 fn.name,以取代非標準 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

實驗功能

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

開發人員工具會自動在「問題」分頁中回報對比度問題的實驗性支援。

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

開啟含有低對比問題的頁面 (例如這個示範)。接著在「Console」狀態列中按一下「Issues count」按鈕,開啟「Issues」分頁。

自動回報低對比問題

Chromium 問題:1155460

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

您現在可以切換,查看全新改良版頁面的完整無障礙樹狀檢視。

目前的無障礙窗格提供其節點的有限顯示,只會顯示從根節點到已檢查節點的直接祖系鏈結。新的無障礙功能樹狀檢視旨在改善這項功能,讓開發人員更容易瀏覽、實用且更容易使用。

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

請注意,這是早期實驗階段。我們計劃逐步改善及擴充這項功能。

完整的無障礙樹狀檢視

Chromium 問題:887173

下載預覽管道

考慮使用 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