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

Sofia Emelianova
Sofia Emelianova
GitHub

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

連結明確和隱含錨定標記前後。

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

將 popovertarget 連結至彈出式視窗元素前後的對照。

「來源」面板改善

這個版本對「Sources」面板進行了多項改善。

強化「一律不在此處暫停」

「Never Pause Here」選項可防止偵錯工具在同一行重複暫停。這樣一來，您就能更輕鬆地處理重複觸發的不相關中斷點。這個版本強化了這項功能，現在支援：

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

查看工作流程實際運作情形：

Chromium 問題：40924349。

新的捲動貼齊事件監聽器

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

新增捲動貼齊相關事件監聽器前後的差異。

Chromium 問題：40286359。

網路面板改善

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

更新網路節流預設設定

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

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

Chromium 問題：342406608。

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

將網路記錄匯出為 HAR 格式時，您現在可以查看與 Service Worker 相關的資訊 (包括時間)，這些資訊會顯示為自訂欄位 (前置字元為底線)。舉例來說，您可能會在記錄中看到下列新欄位：

...
"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 開發人員工具團隊聯絡

您可以透過下列管道，討論新功能、更新或任何與開發人員工具相關的事項。

開發人員工具新功能

開發人員工具新功能系列文章涵蓋的所有內容清單。