Chrome 134 版本開發者工具（DevTools）更新內容详情 - 前端,chrome,chrome-devtools,瀏覽器月恆日志

Chrome 134 版本開發者工具（DevTools）更新內容

一、隱私與安全面板

舊的 Security 面板已演變為隱私與安全面板，並新增了一個專注於隱私的部分。在該部分中，可以：

在 DevTools 打開時，臨時限制第三方 Cookie（可帶或不帶例外），並測試網站在此情況下的表現。
查看一張表格，其中包含有關第三方 Cookie 的信息，包括它們是否被臨時限制模式攔截或豁免，以及可能受影響的 Cookie 類型。

二、Performance 面板改進

此版本為 Performance 面板帶來了一系列改進。

1. 校準後的 CPU 限流預設

支持自動校準，並獲得兩個額外的 CPU 限流預設，這些預設能更準確地模擬低端和中端移動設備。

在 Performance > CPU throttling 下拉菜單中，選擇 Calibrate…；然後在 Settings 中點擊 Calibrate, Continue，等待 DevTools 為設備計算降速率。校準後的限流選項將出現在 Performance > CPU throttling 下拉菜單中。

2. 在同一個 AI 聊天中選擇不同的性能事件

AI 助手面板允許在同一個聊天中切換性能跟蹤中選定的事件。換句話説，無需開啓新的聊天即可討論不同的事件。

3. Performance 中的第一方和第三方高亮

Performance 面板在 Summary 選項卡新增了一張表格，能夠區分第一方、第三方以及擴展數據。

將鼠標懸停在表格中的條目上，可以在性能跟蹤中看到相應的事件被高亮顯示。選中 “Dim 3rd parties” 以僅聚焦第一方數據。

此外，點擊表格中高亮條目旁的 account_tree 圖標，即可切換到以第三方分組顯示的 Bottom-up 選項卡。

4. 標記工具提示和洞察中的字段數據

如果已啓用字段數據，可以在指標標記工具提示和 Insights 選項卡中查看到它。

5. “Forced reflow” 洞察

Performance > Insights 選項卡新增了一項洞察：Forced reflow。Forced reflow 發生在渲染引擎暫停腳本執行以計算樣式和佈局時。Forced reflow 可能成為避免的瓶頸。

當將鼠標懸停在這項新洞察上時，它會高亮顯示觸發 Forced reflow 的頂級函數調用、其堆棧跟蹤，並顯示總的 reflow 時間。

6. “Optimize DOM size” 洞察

另一項新洞察是 Optimize DOM size。龐大的 DOM 樹可能會降低頁面性能。

該洞察在性能跟蹤中高亮顯示了因 DOM 尺寸過大而導致的長時間佈局重排和樣式重計算，並提供了關於元素總數、層級深度以及子元素最多的統計數據。

7. 使用 console.timeStamp 擴展性能跟蹤

擴展性 API 支持 console.timeStamp。除了 performance.measure 和 performance.mark 之外，還可以使用 console.timeStamp 來在性能跟蹤中創建自定義軌道並捕獲自定義標記。這是一種更輕量的替代方式，不會向瀏覽器內部的性能時間線添加條目，而只會在性能跟蹤中顯示它們。

例如，可以使用如下語法：

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

在 Capture settings > Show custom tracks 選項中勾選後，將在跟蹤記錄中看到自定義軌道。

三、Elements 面板改進

本版本為 Elements 面板帶來了一系列改進。

1. 動畫樣式的實時數值

Elements > Styles 選項卡會實時更新動畫樣式的數值。

2. 支持 :open 偽類及各種偽元素

Elements 面板在 Styles > :hov > Force specific element state 部分支持某些 HTML 元素（如 details、select、dialog 和 input）的 :open 偽類。

此外，Elements 面板還支持幾個新的偽元素：::checkmark、::picker-icon 以及與輪播相關的 ::column、::scroll-button、::scroll-marker 和 ::scroll-marker-group。

四、複製所有控制枱消息

可以通過右鍵一次性複製所有控制枱消息。

另外，在 Network > Request Payload 的上下文菜單中也提供了類似的複製選項。

五、內存（<font style="color:rgb(32, 33, 36);">Memory</font>）面板中的字節單位

內存面板會以合適的字節單位顯示大小，而不再僅僅顯示大量的字節數字。

六、其他

Performance：
- Annotations： 可以點擊標籤來選擇對應的條目
- Insights： 在 Insights 選項卡中，點擊 CLS 會選擇最差的聚類，而非最差的偏移
Ignore list： 默認情況下，所有以 “node:” 開頭的 Node 內部項現已被忽略
Live expressions： 修復了一個導致 live expression 影響 $_ 命令的 bug
Elements > Styles：相對長度帶有一個彈出窗口，顯示其絕對值
Accessibility：列標題會提示是否可排序
標籤圖標顯示在標籤名稱右側，而非左側

Chrome 134

引用

What's new in DevTools

月恆日志

@gqkmiss

标签

前端 (1158)

Javascript (735)

人工智能 (486)

Python (289)

vue.js (260)

react (167)

node.js (141)

chrome (57)

ecmascript-6 (55)

性能優化 (53)

llm (53)

瀏覽器 (43)

动态

Chrome 134 版本開發者工具（DevTools）更新內容 - 动态详情