開發人員工具 (Chrome 127) 的新功能'

Sofia Emelianova
Sofia Emelianova
GitHub

為方便您偵錯錨點定位功能，樣式分頁現在會將明確的錨點 ID 和隱含錨點連結至節點。

連結明確和隱含錨點前後的狀態。

此外，popovertarget 屬性值現在會連結至 DOM 中的 popover 元素。

「之前」和「之後」會將連結的 popovertarget 設為其 popover 元素。

來源面板改善項目

這個版本對「來源」面板進行了幾項改良。

強化「一律不在這裡暫停」功能

「Never Pause Here」(永不在此處暫停) 選項可避免 Debugger 一再在同一行暫停。這樣就能更輕鬆地處理重複觸發的不相關中斷點。這個版本強化了這項功能，現在適用於：

  • 內建函式擲回的例外狀況或拒絕的 Promise。
  • 「取消」DOM、Fetch/XHR 和 CSP 違規中斷點。
  • 在 Wasm 反組譯中。

實際流程如下：

Chromium 問題：40924349。

新的捲動快照事件監聽器

「來源」 >「事件接聽程式中斷點」 >「控制項」清單會取得兩個與 scroll-snap 相關的接聽程式：scrollsnapchange 和 scrollsnapchanging。當您捲動捲動容器，導致容器貼齊新元素時，就會觸發這些事件。

新增捲動快照相關事件監聽器前後的狀態。

Chromium 問題：40286359。

網路面板改善

這個版本對「網路」面板進行了多項改良。

更新網路節流預設設定

「網路」面板會更新節流預設值：新增「快速 4G」、「快速 3G」重新命名為「慢速 4G」，「慢速 3G」重新命名為「3G」。這項做法更符合 Lighthouse 的預設設定。

更新網路節流預設設定前後的差異。

Chromium 問題：342406608。

HAR 格式自訂欄位中的 Service Worker 資訊

將網路記錄匯出為 HAR 格式時，您現在可以將服務工作人員的相關資訊 (包括時間) 視為自訂欄位 (以底線為前置字元) 查看。舉例來說，您可能會在記錄中看到下列新欄位：

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

Chromium 問題：342406608。

在「效能」面板中傳送及接收 WebSocket 事件

與其他 WebSocket 事件類似，「效能」面板現在會擷取「傳送 WebSocket 訊息」和「接收 WebSocket 訊息」事件，並顯示在效能追蹤記錄中。例如：

在效能追蹤中擷取的「接收 WebSocket 訊息」事件。

Chromium 問題：40286129。

其他亮點

這個版本的重要修正和改良項目包括：

  • 無障礙：現在使用上下箭頭鍵捲動記錄時，螢幕閱讀器會朗讀「控制台」中的訊息內容 (344484979)。
  • 資料來源：
    • 頁面：「另存新檔」選單選項現在會將 Wasm 模組檔案儲存為有效的 wasm 二進位檔，而非 Base64 文字 (40784130)。
    • 呼叫堆疊：從非同步呼叫框架說明中移除 (async) 後綴，並將醒目顯示方式從斜體改為粗體 (343750870)。
  • 記憶體：從堆積快照「摘要」中移除不必要的零大小 InternalNodes (340200025)。
  • 網路：修正錯誤，防止系統預覽剛開始但尚未收到 responseReceived 事件的要求串流回應內容 (338340752)。
  • 成效：
    • 選取器統計資料：為 %-of-Slow-Path-Non-Matches 欄新增說明工具提示 (324282954)。
    • 曲目設定模式：「完成設定曲目」按鈕已移至右下方 (345256274)。
  • 控制台：修正了使用返回/快取功能瀏覽時，顯示多個相同控制台訊息的錯誤 (40894153)。
  • 設定：在所有分頁旁邊新增說明圖示。

下載預先發布版

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

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

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

開發人員工具新功能

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