開發人員工具 (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 格式自訂欄位中的服務工作人員資訊

將網路記錄匯出為 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 開發人員工具團隊聯絡

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

開發人員工具新功能

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