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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

連結 popovertarget 至其 popover 元素之前和之後的狀態。

改善「來源」面板

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

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

您可以使用「Never Pause Here」選項，避免偵錯工具一再暫停在同一行。這樣一來，您就能更輕鬆地處理重複觸發的無關中斷點。這個版本強化了這項功能，現在可用於：

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

查看實際工作流程：

Chromium 問題：40924349。

新的捲動精確調整事件監聽器

「Sources」 >「Event Listener Breakpoints」 >「Control」清單會取得兩個 scroll-snap 相關的事件接聽器：scrollsnapchange 和 scrollsnapchanging。當您以會使捲動容器自動對齊新元素的方式捲動時，系統就會觸發這些事件。

新增與捲動精確位置相關的事件監聽器前後。

Chromium 問題：40286359。

網路面板改善

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

更新網路節流預設值

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

效能追蹤中擷取的「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 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。