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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

「來源」面板改善項目

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

增強「從此不暫停」功能

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

  • 內建函式例外狀況或承諾拒絕。
  • 「取消中」DOM、擷取/XHR 和 CSP 違規中斷點。
  • 在 Wasm 拆解工具中。

查看實際運作流程：

Chromium 問題：40924349。

新增捲動貼齊事件監聽器

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

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

Chromium 問題：40286359。

改善網路面板

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

已更新網路節流預設設定

「網路」面板將更新節流預設設定：「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 事件類似，「Performance」面板現在會擷取「Send WebSocket Message」和「Receive WebSocket Message」事件，並在效能追蹤記錄中顯示這些事件。例如：

「接收 WebSocket 訊息」擷取自成效追蹤記錄的事件。

Chromium 問題：40286129。

其他精選內容

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

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

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。