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

CSS-in-JS 架構樣式編輯

「樣式」窗格現在更妥善地支援透過 CSS 物件建立的樣式 Model (CSSOM) API。許多 CSS-in-JS 架構和程式庫都會在內部使用 CSSOM API， 建構樣式

您也可以使用「可建構的樣式表」編輯在 JavaScript 中新增的樣式。可建造 使用 Shadow DOM 時，樣式表是建立及發布可重複使用樣式的新方式。

舉例來說，先前使用 CSSStyleSheet (CSSOM API) 新增的 h1 樣式無法編輯。 「樣式」窗格現在提供可編輯的設定：

Chromium 問題 #946975

Lighthouse 面板中的 6 號燈塔

Lighthouse 面板現在執行 Lighthouse 6。請觀看 Lighthouse 6.0 版新功能， 所有重大異動的摘要。如需所有變更的完整清單，請參閱 6.0.0 版本資訊。

Lighthouse 6.0 為報表推出了三項新指標：Largest Contentful Paint (LCP)、 累計版面配置位移 (CLS) 和總封鎖時間 (TBT)。LCP 和 CLS 是 Google 新推出的 Core Web Vitals 和 TBT 是另一項 Core Web Vitals 的「First Input」的研究室測量 Proxy 延遲。

效能分數公式也經過重新加權，以更準確地反映載入中 無須專人管理

Chromium 問題 #772558

首次有效繪製 (FMP) 淘汰

Lighthouse 6.0 版已淘汰首次有效繪製 (FMP) 功能。系統也已從 效能面板。我們建議針對 FMP 取代 Largest Contentful Paint。請參閱第一 有意義的繪製內容：說明這項功能遭到淘汰的原因。

Chromium 問題 #1096008

支援新版 JavaScript 功能

開發人員工具現已進一步支援部分最新的 JavaScript 語言功能：

• 選用的鏈結語法自動完成 - 立即在主控台中進行屬性自動完成 支援選用的鏈結語法，例如name?. 現在適用於 name. 和 name[。
• 私人欄位的語法醒目顯示功能 - 私人類別欄位現已正確執行 。
• Nullish CoalEscing 運算子的語法醒目顯示 - 開發人員工具現已可正確執行美化排版 「來源」面板中的空值凝結運算子

Chromium 問題 #1083214、#1073903、#1083797

「資訊清單」窗格中新增應用程式捷徑警告

應用程式捷徑可讓使用者在網頁應用程式中快速啟動常見或建議工作。

如果發生下列情況，資訊清單窗格會顯示警告：

• 應用程式捷徑圖示小於 96x96 像素
• 應用程式捷徑圖示和資訊清單圖示不是正方形 (因為系統會忽略這些圖示)

Chromium 問題 #955497

「時間」分頁中的 Service Worker respondWith 事件

「網路」面板的「時間」分頁現在包含 Service Worker respondWith 事件。respondWith 是服務工作處理程序 fetch 事件處理常式執行到 fetch 處理常式的 respondWith 承諾已解決。

Chromium 問題 #1066579

一致顯示「運算」窗格

「元素」面板中的「運算」窗格現在一律以窗格形式顯示在所有可視區域中 大小。以往當寬度和寬度 開發人員工具可視區域較小

Chromium 問題 #1073899

WebAssembly 檔案的位元碼偏移

開發人員工具現在會使用位元碼偏移來顯示 Wasm 解散的行數。如此一來 更清楚地查看二進位資料，且與 Wasm 執行階段的方式更一致 參照位置

Chromium 問題 #1071432

來源面板中按行複製及剪下內容

如果在來源面板編輯器未選取任何項目的情況下執行複製或剪下作業，開發人員工具就會複製 或剪下目前的行內容例如，在下方影片中，遊標停在影片結尾 第 1 行。按下剪下的鍵盤快速鍵後，整個行會複製到剪貼簿， 已刪除。

Chromium 問題 #800028

控制台設定更新

將控制台訊息取消分組

現在起，控制台「設定」中的「類似群組」切換鈕會套用到重複的郵件。先前 此範例僅適用於類似郵件

舉例來說，先前開發人員工具並未將 hello 訊息取消分組 (即使類似群組) 未勾選。現在，hello 訊息會取消分組：

Chromium 問題 #1082963

保留「僅限所選內容」設定

在「控制台設定」中，「僅限所選內容」設定現在會保留。先前設定 會在您每次關閉並重新開啟開發人員工具時重設。這項變更會使設定行為 與其他 Play 管理中心的設定選項一致

Chromium 問題 #1055875

效能面板更新

效能面板中的 JavaScript 編譯快取資訊

JavaScript 編譯快取資訊現在一律會顯示在 效能面板。先前，如果程式碼有程式碼快取，開發人員工具不會顯示任何相關資訊 未使用快取

Chromium 問題 #912581

效能面板中的導覽時間對齊方式

「效能」面板會根據錄製開始在尺規中顯示時間。這有 改變了使用者導覽的錄製內容，開發人員工具現在會顯示相對於時間的尺度時間 改為導覽至導覽區

我們還為 DOMContentLoaded、First Paint、First Contentful Paint 和 Largest 更新時間 與導覽開始相關的內容繪製事件 PerformanceObserver回報的時間。

Chromium 問題 #974550

中斷點、條件中斷點和記錄點的新圖示

「來源」面板針對中斷點、條件中斷點和記錄點提供全新設計。 中斷點採用新版旗幟設計，色彩更明亮鮮豔。新增圖示 區分條件中斷點和記錄點

Chromium 問題 #1041830

下載預覽頻道

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

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

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

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

開發人員工具新功能

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