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

Sofia Emelianova
Sofia Emelianova
GitHub

為協助您更輕鬆地偵錯錨點定位功能，樣式分頁現在會將明確的錨點 ID 和隱含錨點連結至其節點。

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

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

將 popovertarget 連結至其彈出式視窗元素之後與之後的。

改善「來源」面板

這個版本改善了「來源」面板的功能。

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

「永不暫停此處」選項可防止 Debugger 在同一行暫停同一行。如此一來，即可更輕鬆地處理會反覆引發的不相關中斷點。此版本強化了這項功能，目前可用於：

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

查看實際工作流程：

Chromium 問題：40924349。

新增捲動貼齊事件監聽器

「來源」>「事件監聽器中斷點」>「控制組」清單會取得兩個與「scroll-snap」相關的事件監聽器：scrollsnapchange 和 scrollsnapchanging。當您在捲動容器時捲動容器，而使該容器與新元素對齊時，就會觸發這些事件。

新增與捲動暫停點相關的事件監聽器前後的畫面。

Chromium 問題：40286359。

改善網路面板

這個版本改善了「網路」面板。

已更新網路節流預設設定

Network 面板會更新節流預設值：新增「Fast 4G」、「Fast 3G」已重新命名為「Slow 4G」，而「Slow 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 訊息」事件，並在效能追蹤中顯示。例如：

效能追蹤記錄中擷取的「Receive WebSocket Message」事件。

Chromium 問題：40286129。

其他精選內容

這個版本包含多項重要修正和改善項目：

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

下載預覽頻道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽版本可讓您存取開發人員工具中的最新功能、測試先進的網路平台 API，並協助您事先找出網站的問題！

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

請使用下列選項來討論最新功能、更新，或任何與開發人員工具相關的內容。

開發人員工具新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。