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

Jecelyn Yeen

CSS-in-JS 架構的樣式編輯

「樣式」窗格現在可更完善地支援編輯使用 CSS 物件模型 (CSSOM) API 建立的樣式。許多 CSS-in-JS 架構和程式庫在幕後使用 CSSOM API 建構樣式。

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

舉例來說，先前使用 CSSStyleSheet (CSSOM API) 新增的 h1 樣式無法編輯。現在可以在「樣式」窗格中編輯下列項目：

Chromium 問題 #946975

Lighthouse 面板中的 Lighthouse 6

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

Lighthouse 6.0 在報告中新增了三項指標：Largest Contentful Paint (LCP)、Cumulative Layout Shift (CLS) 和 Total Blocking Time (TBT)。LCP 和 CLS 是 Google 新推出的 Core Web Vitals 指標，而 TBT 則是另一項 Core Web Vital 指標「首次輸入延遲」的實驗室評估指標。

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

Chromium 問題 #772558

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

Lighthouse 6.0 版已淘汰「畫面首次有效顯示所需時間」(FMP)。此外，系統也已從「成效」面板中移除這項指標。建議您改用最大內容繪製。請參閱「畫面首次有效顯示所需時間」，瞭解這項指標遭到淘汰的原因。

Chromium 問題 #1096008

支援新的 JavaScript 功能

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

• 選用鏈結語法自動完成 - 控制台現在支援選用鏈結語法，可自動完成屬性，例如 name?. 現在可與 name. 和 name[ 一併使用。
• 私有欄位的語法醒目顯示 - 私有類別欄位現在會在「來源」面板中正確醒目顯示語法並美化列印。
• 空值合併運算子的語法螢光標示 - 現在開發人員工具會在「來源」面板中，正確地美化列印空值合併運算子。

Chromium 問題 #1083214、#1073903、#1083797

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

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

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

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

Chromium 問題 #955497

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

「網路」面板的「時間」分頁現在會顯示服務工作人員 respondWith 事件。respondWith 是服務工作人員 fetch 事件處理常式執行前的時間，到 fetch 處理常式的 respondWith Promise 結算為止。

Chromium 問題 #1066579

持續顯示「已計算」窗格

「元素」面板中的「已計算」窗格現在會持續顯示為所有檢視區塊大小的窗格。先前，當開發人員工具可視區域的寬度較窄時，「已計算」窗格會併入「樣式」窗格。

Chromium 問題 #1073899

WebAssembly 檔案的位元碼偏移

開發人員工具現在會使用位元碼偏移量，顯示 Wasm 反組譯的行號。這樣一來，您就能更清楚地瞭解自己正在查看二進位資料，且與 Wasm 執行階段參照位置的方式更一致。

Chromium 問題 #1071432

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

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

Chromium 問題 #800028

主控台設定更新

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

主控台設定中的「將類似訊息分組」切換鈕現在也適用於重複訊息。先前只會套用至類似郵件。

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

Chromium 問題 #1082963

保留「僅限已選取的內容」設定

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

Chromium 問題 #1055875

效能面板更新

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

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

Chromium 問題 #912581

「效能」面板中的導覽時間軸對齊

「效能」面板過去會根據錄製開始時間，在尺規中顯示時間。現在，使用者瀏覽的錄製內容已有所變更，開發人員工具會顯示相對於瀏覽作業的尺規時間。

我們也更新了「首次繪製」、「首次顯示內容所需時間」和「最大內容元素顯示時間」事件的時間，使其與導覽開始時間相關，也就是說，這些時間與 PerformanceObserver 回報的時間相符。DOMContentLoaded

Chromium 問題 #974550

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

「來源」面板的斷點、條件式斷點和記錄點採用新設計。 中斷點的標記設計經過翻新，採用更明亮、更友善的色彩。新增圖示，用來區分條件中斷點和記錄點。

Chromium 問題 #1041830

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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