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

Jecelyn Yeen

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

對於使用 CSS 物件模型 (CSSOM) API 建立的樣式，「Styles」窗格現在更支援編輯作業。許多 CSS 內 JavaScript 架構和程式庫實際上都使用 CSSOM API 建構樣式。

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

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

Chromium 問題 #946975

燈塔 6 號燈塔

Lighthouse 面板現在正在執行 Lighthouse 6。如需所有主要變更的摘要資訊，請參閱 Lighthouse 6.0 版新功能；如需所有變更的完整清單，請參閱 6.0.0 版版本資訊。

Lighthouse 6.0 在報表中推出了三種新指標：最大內容繪製 (LCP)、累計版面配置位移 (CLS) 和總封鎖時間 (TBT)。LCP 和 CLS 是 Google 全新網站體驗核心指標的 2 項，TBT 則是另一個 Core Web Vitals (First Input Security) 的研究室評估 Proxy。

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

Lighthouse 6.0 全新成效指標

Chromium 問題 #772558

首次有效繪製 (FMP) 即將淘汰

首次有效繪製 (FMP) 已於 Lighthouse 6.0 淘汰，此外，它也已從「效能」面板中移除建議您為 FMP 替換最大內容繪製。如要瞭解此版本淘汰的原因，請參閱「第一個有意義的繪製」。

Chromium 問題 #1096008

支援新的 JavaScript 功能

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

  • 選用鏈結語法自動完成 - 現在主控台中的屬性自動完成功能現在支援選用的鏈結語法，例如 name?. 可與 name. 和 name[ 搭配使用。
  • 私人欄位的語法醒目顯示功能 - 私人類別欄位現可在「Source」(來源) 面板中正確醒目顯示語法，並正確列印。
  • 「Nullish Coalescing 運算子」的語法醒目顯示 - 開發人員工具現在可以在「Source」(來源) 面板中正確列印空值煤炭運算子。

Chromium 問題 #1083214、#1073903、#1083797

在「資訊清單」窗格中顯示新的應用程式捷徑警告

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

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

  • 應用程式捷徑圖示小於 96x96 像素
  • 應用程式捷徑圖示和資訊清單圖示並非正方形 (系統會忽略它們)

應用程式捷徑警告

Chromium 問題 #955497

「Tming」分頁中的 Service Worker respondWith 事件

「網路」面板的「時間」分頁現在包含 Service Worker respondWith 事件。respondWith 是服務工作站 fetch 事件處理常式執行到 fetch 處理常式的 respondWith 承諾完備時間之前的時間。

Service Worker「responseWith」

Chromium 問題 #1066579

一致的運算窗格顯示畫面

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

Chromium 問題 #1073899

WebAssembly 檔案的位元組碼偏移

開發人員工具現在使用位元碼偏移來顯示 Wasm 反組譯的行數。這可讓您更清楚地查看二進位資料，且與 Wasm 執行階段參照位置的方式更加一致。

位元碼偏移

Chromium 問題 #1071432

在來源面板中複製及剪下線條

在「Sources」(來源) 面板編輯器中，如果在未選取項目的情況下執行複製或剪下，開發人員工具會複製或剪下目前的這行內容。舉例來說，在下方的影片中，遊標位於第 1 行的結尾。按下剪下的鍵盤快速鍵後，系統會將整行內容複製到剪貼簿並刪除。

Chromium 問題 #800028

控制台設定更新

將相同的控制台訊息取消分組

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

舉例來說，在先前未勾選「Group 類似群組」的情況下，開發人員工具並未將訊息 hello 取消分組，現在，hello 訊息已經取消分組：

Chromium 問題 #1082963

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

「控制台設定」中的「僅限所選內容」設定現已保留。過去，每當您關閉並重新開啟開發人員工具，系統就會重設設定。這項變更會使設定行為與其他控制台設定選項保持一致。

僅限已選取的內容

Chromium 問題 #1055875

效能面板更新

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

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

JavaScript 編譯快取資訊

Chromium 問題 #912581

「成效」面板會根據錄製開始的時間，在尺規中顯示時間。但現在使用者所瀏覽的錄音已經改變，開發人員工具現在改為顯示相對於導覽的尺規時間。

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

我們也已更新 DOMContentLoaded、首次繪製、首次顯示內容所需時間和最大內容繪製事件的時間，使其以相對於導覽的起始時間為準，也就是說兩者的時間與 PerformanceObserver 回報的時間相符。

Chromium 問題 #974550

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

「Sources」面板包含中斷點、條件中斷點和記錄點的新設計。中斷點換上了新穎的旗幟設計，色彩更明亮、更親民。我們新增了圖示來區分條件式中斷點和記錄點。

中斷點

Chromium 問題 #1041830

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

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 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

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