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

Jecelyn Yeen

全新 CSS Flexbox 偵錯工具

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

CSS Flexbox 偵錯工具

如果網頁上的 HTML 元素套用 display: flex 或 display: inline-flex， 就能在「元素」面板中看到 flex 標記。按一下徽章可以切換顯示 Flex 疊加在頁面上。

在「Styles」窗格中，按一下 display: flex 或 開啟 display: inline-flex 以開啟 Flexbox 編輯器。Flexbox 編輯器可快速進行編輯 Flexbox 屬性你自己試試看！

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

Layout 窗格中的 Flexbox 區段

Chromium 問題：1166710、1175699

全新 Core Web Vitals 重疊元素

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

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

開啟指令選單，執行顯示轉譯指令，然後啟用核心網路 Vitals 核取方塊。

目前顯示的疊加層：

Core Web Vitals 重疊元素

Chromium 問題：1152089

問題分頁更新

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

管理中心狀態列現在新增了問題數量按鈕，以提高問題的能見度 問題警告這項操作會取代管理中心中的問題訊息。

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

Chromium 問題：1140516

回報信任的網路活動問題

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

開啟受信任的網路活動。接著點按「問題數量」開啟「問題」分頁 按鈕，即可查看問題。觀看 Andre 的演講以瞭解詳情 進一步瞭解如何建立及部署「信任的網路活動」。

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

Chromium 問題：1147479

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

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

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

Chromium 問題：1178530

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

開發人員工具會在新版 Trust 中的目前瀏覽內容中，顯示所有可用的 Trust Token 權杖窗格，位於應用程式面板下方。

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

新增信任權杖窗格

Chromium 問題：1126824

模擬 CSS color-gamut 媒體功能

模擬 CSS color-gamut 媒體功能

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

開啟「指令選單」、執行「顯示轉譯」指令，然後設定「Emulate CSS」 媒體功能色域下拉式選單。

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 (透過 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

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

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

目前的無障礙功能窗格僅會顯示部分節點， 將根節點從根節點導向到檢查的節點。新的無障礙功能樹狀檢視 改善這部分，並讓開發人員更容易探索、實用，以及更方便使用無障礙功能樹狀結構 。

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

請注意，這只是初期實驗階段，我們計劃改進並擴充這項功能 長期下來。

完整的無障礙樹狀檢視

Chromium 問題：887173

下載預覽頻道

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

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

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

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

開發人員工具新功能

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