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

Jecelyn Yeen

全新 CSS flexbox 偵錯工具

DevTools 現已提供專屬的 CSS flexbox 偵錯工具！

CSS flexbox 偵錯工具

如果網頁上的 HTML 元素套用了 display: flex 或 display: inline-flex，您會在「元素」面板中看到旁邊有 flex 徽章的元素。按一下徽章，切換頁面上 Flex 重疊層的顯示狀態。

在「Styles」窗格中，您可以按一下 display: flex 或 display: inline-flex 旁邊的新圖示，開啟「Flexbox」編輯器。Flexbox 編輯器可讓您快速編輯 Flexbox 屬性。快來親自體驗吧！

此外，「版面配置」窗格還有一個「Flexbox」區段，可顯示頁面上的所有 Flexbox 元素。您可以切換每個元素的疊加層。

「Layout」窗格中的「Flexbox」部分

Chromium 問題：1166710、1175699

新的 Core Web Vitals 重疊內容

透過新的 Core Web Vitals 重疊圖層，更有效地呈現及評估網頁效能。

網站使用體驗核心指標是一項由 Google 推動的計畫，旨在針對不可或缺的品質信號提供統合一致的指南，協助發布商打造出色的網頁使用者體驗。

開啟指令選單，執行「顯示算繪」指令，然後啟用「Core Web Vitals」核取方塊。

目前顯示的疊加層：

Core Web Vitals 重疊內容

Chromium 問題：1152089

「Issues」分頁更新

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

我們已在控制台狀態列中新增問題計數按鈕，以便提高問題警告的可見度。這會取代 管理中心中的問題訊息。

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

Chromium 問題：1140516

回報「受信任的網路活動」問題

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

開啟受信任的網路活動。接著，按一下「管理中心」狀態列中的「問題數量」按鈕，開啟「問題」分頁，即可查看問題。請觀看 Andre 的演講，進一步瞭解如何建立及部署 Trusted Web Activity。

「Issues」分頁中的「Trusted Web Activity」問題

Chromium 問題：1147479

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

主控台現在會將字串格式化為主控台中的有效 JavaScript 字串文字常值。先前，主控台在列印字串時不會轉義雙引號。

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

Chromium 問題：1178530

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

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

Trust Token 是一種新的 API，可協助防範詐欺，並區分機器人和真人，不必進行被動追蹤。瞭解如何開始使用 Trust Tokens。

新的 Trust Tokens 窗格

Chromium 問題：1126824

模擬 CSS color-gamut 媒體功能

模擬 CSS color-gamut 媒體功能

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

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

Chromium 問題：1073887

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

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

PWA 安裝規定警告

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

PWA 說明截斷警告

此外，如果 PWA 的螢幕截圖不符合規定，資訊清單窗格現在會顯示警告訊息。如要進一步瞭解 PWA 的螢幕截圖屬性及其規定，請參閱這篇文章。

PWA 螢幕截圖警告

Chromium 問題：1146450、1169689、965802

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

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

新增「遠端位址空間」欄

Chromium 問題：1128885

提升執行效能

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

DevTools 會收集堆疊追蹤記錄，並附加至控制台訊息或非同步工作，以便開發人員日後在發生問題時使用。由於這項收集作業必須在瀏覽器引擎中同步執行，因此如果堆疊追蹤收集作業速度緩慢，開啟開發人員工具時，網頁的速度可能會明顯變慢。我們已成功大幅降低堆疊追蹤收集作業的額外負擔。

敬請密切留意，我們將在工程網誌中進一步說明實作方式。

Chromium 問題：1069425、1077657

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

框架詳細資料檢視畫面現在會顯示允許和禁止的瀏覽器功能清單，這些功能受權限政策控管。

權限政策是一種網頁平台 API，可讓網站在其自身框架或嵌入的 iframe 中，允許或封鎖瀏覽器功能的使用。

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

Chromium 問題：1158827

「Cookie」窗格中的新 SameParty 欄

「Application」面板中的「Cookies」窗格現在會顯示 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，該屬性已在 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」分頁中自動回報低對比問題

開發人員工具新增實驗性支援功能，可在「Issues」分頁中自動回報對比度問題。

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

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

自動回報低對比問題

Chromium 問題：1155460

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

您現在可以切換至全新的無障礙功能樹狀結構檢視畫面，查看網頁的完整無障礙功能樹狀結構。

目前的無障礙功能窗格只會顯示節點的部分內容，只會顯示從根節點到檢查節點的直接祖系鏈結。新版無障礙樹狀檢視畫面旨在改善這項問題，讓開發人員更容易探索、使用無障礙樹狀檢視畫面，並從中獲得實用資訊。

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

請注意，這是初期實驗。我們計劃隨著時間推移改善及擴充這項功能。

完整的無障礙功能樹狀檢視

Chromium 問題：887173

下載預覽管道

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

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

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

開發人員工具的新功能

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