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

Jecelyn Yeen
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 面板現在執行 Lighthouse 6。如要查看所有重大變更的摘要，請參閱「Lighthouse 6.0 的新功能」；如要查看所有變更的完整清單，請參閱 v6.0.0 版本資訊。

Lighthouse 6.0 在報表中導入了三項新指標：最大內容繪製 (LCP)、累積版面配置位移 (CLS) 和總封鎖時間 (TBT)。LCP 和 CLS 是 Google 推出的 2 項新 Core Web Vitals，而 TBT 則是另一項 Core Web Vitals 的實驗室評估代理值，即 First Input Delay。

我們也重新調整了效能分數公式，以更準確地反映使用者的載入體驗。

Lighthouse 6.0 中的新成效指標

Chromium 問題 #772558

畫面首次有效顯示所需時間 (FMP) 淘汰

在 Lighthouse 6.0 中，首次有效顯示所需時間 (FMP) 已遭淘汰。也已從「成效」面板中移除。建議您以最大內容繪製取代 FMP。如要瞭解為何淘汰此指標，請參閱「畫面首次有效顯示所需時間」。

Chromium 問題 #1096008

支援新的 JavaScript 功能

DevTools 現在可更妥善地支援部分最新的 JavaScript 語言功能：

  • 可選鏈結語法自動完成功能：控制台中的屬性自動完成功能現在支援可選鏈結語法，例如 name?. 除了 name. 和 name[ 之外，現在也能正常運作。
  • 私人欄位的語法醒目顯示 - 私人類別欄位現在會在「來源」面板中正確醒目顯示語法並以美化格式顯示。
  • Nullish 合併運算子的語法醒目顯示：DevTools 現可在「Sources」面板中正確顯示 nullish 合併運算子。

Chromium 問題 #1083214、#1073903、#1083797

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

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

資訊清單窗格現在會在以下情況顯示警告：

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

應用程式捷徑警告

Chromium 問題 #955497

時間軸分頁中的 Service Worker respondWith 事件

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

Service Worker `respondWith`

Chromium 問題 #1066579

一致顯示「Computed」窗格

「元素」面板中的「已計算」窗格現在會在所有檢視畫面大小中一致顯示為窗格。先前，如果 DevTools 可視區域的寬度較窄，則「Computed」窗格會與「Styles」窗格合併。

Chromium 問題 #1073899

WebAssembly 檔案的位元碼偏移量

DevTools 現在會使用位元碼偏移量，顯示 Wasm 解組的列號。這樣一來，您就能更清楚地查看二進位資料，並與 Wasm 執行階段參照位置的方式更為一致。

位元碼偏移

Chromium 問題 #1071432

在「來源」面板中逐行複製及剪下

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

Chromium 問題 #800028

主控台設定更新

取消分組相同的主控台訊息

主控台設定中的「將類似訊息分組」切換鈕現在可套用於重複訊息。這項功能先前只適用於類似的訊息。

舉例來說，先前 DevTools 即使未勾選「Group similar」，也不會取消群組 hello 的群組。hello 訊息現在已取消分組：

Chromium 問題 #1082963

儲存「僅限所選內容」設定

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

僅限所選內容

Chromium 問題 #1055875

效能面板更新

「Performance」面板中的 JavaScript 編譯快取資訊

JavaScript 編譯快取資訊現在會一律顯示在「效能」面板的「摘要」分頁中。在此之前，如果程式碼快取未發生，開發人員工具不會顯示任何與程式碼快取相關的內容。

JavaScript 編譯快取資訊

Chromium 問題 #912581

「Performance」面板會根據錄製開始時間，在標尺中顯示時間。對於使用者瀏覽的錄製內容，現在已改為在 DevTools 中顯示與導覽相關的標尺時間。

在「成效」面板中對齊導覽時間

我們也更新了 DOMContentLoaded、首次繪製、首次顯示內容所需時間和 Largest Contentful Paint 事件的時間，以便與導覽開始時間相對應，也就是說，這些時間會與 PerformanceObserver 回報的時間相符。

Chromium 問題 #974550

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

「Sources」面板針對中斷點、條件中斷點和記錄點提供全新設計。中斷點採用了全新的旗幟設計，色彩更明亮、更友善。新增圖示以區分條件式中斷點和記錄點。

中斷點

Chromium 問題 #1041830

下載預覽管道

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

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

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

開發人員工具的新功能

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