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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

此外，popovertarget 屬性值現在會連結至 DOM 中的 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 開發人員工具團隊聯絡

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

開發人員工具新功能

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