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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

Chromium 問題：289900232、330306231。

「來源」面板改善項目

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

增強「從此不暫停」功能

「永不暫停此處」選項可防止 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) 進行瀏覽時，會顯示多個相同的控制台訊息的錯誤。
  • 設定：在所有分頁旁新增輔助圖示 (330213867)。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72 版

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63 版

Chrome 62 版

Chrome 61 版

Chrome 60 版

Chrome 59