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

全新 CSS Flexbox 偵錯工具

開發人員工具現在提供專用的 CSS Flexbox 偵錯工具！

如果網頁上的 HTML 元素套用了 display: flex 或 display: inline-flex，您可以在「元素」面板中看到旁邊顯示 flex 徽章。按一下標記，即可切換頁面上的彈性疊加顯示畫面。

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

此外，「版面配置」窗格也有「彈性方塊」部分，可顯示網頁上的所有彈性方塊元素。您可以切換各個元素的疊加層。

Chromium 問題：1166710、1175699

新的網站體驗核心指標疊加層

透過全新的 Core Web Vitals 疊加層，更清楚地瞭解及評估網頁效能。

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

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

目前疊加畫面會顯示：

• 最大內容繪製 (LCP)：評估載入效能。為提供良好的使用者體驗，LCP 應該在頁面首次開始載入後，於 2.5 秒內出現。
• 首次輸入延遲時間 (FID)：評估互動性。為了提供良好的使用者體驗，頁面的 FID 應低於 100 毫秒。
• 累計版面配置位移 (CLS)：評估視覺穩定性。為了提供良好的使用者體驗，頁面 CLS 應維持在0.1 以下。

Chromium 問題：1152089

「問題」分頁更新

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

控制台狀態列現在新增了問題計數按鈕，可提高問題警告的能見度。這會取代控制台中的問題訊息。

Chromium 問題：1140516

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

「問題」分頁現在會回報 Trusted Web Activity 問題。這項工具可協助開發人員瞭解及修正網站的「可信任的網頁活動」問題，進而提升應用程式品質。

開啟受信任的網路活動。然後按一下「控制台」狀態列中的「問題數量」按鈕，開啟「問題」分頁，查看問題。觀看 Andre 的演講，進一步瞭解如何建立及部署 Trusted Web Activity。

Chromium 問題：1147479

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

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

Chromium 問題：1178530

「應用程式」面板中的新「Trust Tokens」窗格

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

Trust Token 是一種新 API，可協助防範詐欺及辨別機器人和真人，且不會進行被動追蹤。瞭解如何開始使用 Trust Token。

Chromium 問題：1126824

模擬 CSS color-gamut 媒體功能

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

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

Chromium 問題：1073887

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

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

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

此外，如果 PWA 的螢幕截圖不符合規定，資訊清單窗格現在會顯示警告訊息。如要進一步瞭解 PWA screenshots 屬性和相關規定，請按這裡。

Chromium 問題：1146450、1169689、965802

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

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

Chromium 問題：1128885

提升執行效能

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

如果發生問題，開發人員工具會收集堆疊追蹤記錄，並附加至控制台訊息或非同步工作，供開發人員稍後使用。由於這項收集作業必須在瀏覽器引擎中同步進行，如果堆疊追蹤收集作業速度緩慢，網頁速度可能會大幅降低 (如果開發人員工具已開啟)。我們已大幅減少堆疊追蹤收集作業的負擔。

敬請期待我們發布更詳細的工程網誌文章，說明實作方式。

Chromium 問題：1069425、1077657

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

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

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

Chromium 問題：1158827

「Cookies」窗格中的新 SameParty 欄

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

Chromium 問題：1161427

已淘汰非標準 fn.displayName 支援

已停止支援非標準的 fn.displayName。改用 fn.name。

Chrome 傳統上支援非標準的 fn.displayName 屬性，開發人員可藉此控制顯示在 error.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」設定。

Chromium 問題：1056922

實驗功能

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

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

低對比文字是網頁上最常見的無障礙功能問題，可由系統自動偵測。 在「問題」分頁中顯示這些問題，可協助開發人員更輕鬆地找出問題。

開啟有低對比問題的網頁 (例如這個示範)。接著，點選「控制台」狀態列中的「問題計數」按鈕，開啟「問題」分頁，查看問題。

Chromium 問題：1155460

在「元素」面板中查看完整的無障礙樹狀結構

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

目前的無障礙窗格只會顯示從根節點到檢查節點的直接祖先鏈，節點顯示有限。新版無障礙樹狀檢視畫面旨在改善上述情況，讓開發人員更容易探索及使用無障礙樹狀結構，並從中獲益。

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

請注意，這項實驗尚處於早期階段。我們計畫在日後改善及擴充這項功能。

Chromium 問題：887173

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先版管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前，找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見或要求新功能，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。