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

Jecelyn Yeen

CSS-in-JS 架構樣式編輯

「樣式」窗格現在更支援編輯透過 CSS 物件模型 (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 其中 2 項，而 TBT 是另一項 Core Web Vitals 的「First Input Delay」的研究室測量 Proxy。

效能分數公式也經過重新加權，以更準確地反映使用者的載入體驗。

Lighthouse 6.0 版中的全新成效指標

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 承諾已設定完成時。

Service Worker「responseWith」

Chromium 問題 #1066579

一致顯示「運算」窗格

「元素」面板中的「運算」窗格現在會以窗格一致地顯示在所有可視區域大小中。先前，當開發人員工具可視區域的寬度較小時，「Computed」窗格會合併在「Styles」窗格中。

Chromium 問題 #1073899

WebAssembly 檔案的位元碼偏移

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

位元碼偏移

Chromium 問題 #1071432

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

執行複製或剪下時，如果「來源面板編輯器」中沒有選取項目，開發人員工具會複製或剪下目前的行內容。例如，在下方影片中，遊標位於第 1 行的結尾。按下剪下的鍵盤快速鍵後，整個行會複製到剪貼簿並刪除。

Chromium 問題 #800028

控制台設定更新

將控制台訊息取消分組

現在起，控制台「設定」中的「類似群組」切換鈕會套用到重複的郵件。先前只會套用至類似訊息。

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

Chromium 問題 #1082963

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

在「控制台設定」中，「僅限所選內容」設定現在會保留。在之前，每次您關閉及重新開啟開發人員工具，系統都會重設相關設定。這項變更會讓設定行為與其他主控台設定選項一致。

僅限所選內容

Chromium 問題 #1055875

效能面板更新

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

「Performance」(效能) 面板的「Summary」(摘要) 分頁現會顯示 JavaScript 編譯快取資訊。先前，如果未執行程式碼快取，開發人員工具不會顯示程式碼快取的相關資訊。

JavaScript 編譯快取資訊

Chromium 問題 #912581

「效能」面板會根據錄製開始在尺規中顯示時間。現在記錄方式已變更為使用者導覽的錄製內容，開發人員工具現在會顯示相對於導覽的尺規時間。

在「效能」面板中保持一致導覽時間

我們還更新了 DOMContentLoaded、First Paint、First Contentful Paint 和 Largest Contentful Paint 事件的時間，以配合導覽開始，也就是說，這些時間符合 PerformanceObserver 回報的時間。

Chromium 問題 #974550

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

「Sources」面板提供中斷點、條件中斷點和記錄點的全新設計。中斷點採用新版旗幟設計，色彩更明亮鮮豔。圖示會加入可區分條件中斷點和記錄點的圖示。

中斷點

Chromium 問題 #1041830

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google 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