Chrome 134 版 DevTools 的新功能

Sofia Emelianova

「隱私權與安全性」面板

舊的「安全性」面板已改為「隱私權和安全性」面板，並新增隱私權專區。您可以在這個部分進行下列操作：

• 開啟開發人員工具後，暫時限制第三方 Cookie (可選擇是否設定例外狀況)，並測試網站的行為。
• 查看第三方 Cookie 的相關資訊表，包括是否遭臨時限制模式封鎖或豁免，以及可能受影響的 Cookie 類型。

Chromium 問題：352364594。

效能面板改善

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

已校準的 CPU 節流預設設定

您現在可以自動校正，並取得兩個額外的 CPU 節流預設值，更準確地模擬低階和中階行動裝置。

在「效能」>「CPU throttling」(CPU 節流) 下拉式選單中，選取「Calibrate...」(校正...)，然後在「Settings」(設定) 中，依序點選「Calibrate」(校正)、「Continue」(繼續)，並等待開發人員工具計算裝置的減速率。您可以在「Performance」(效能) >「CPU throttling」(CPU 節流) 下拉式選單中，找到校正後的節流選項。

在同一個 AI 聊天中選取不同的績效事件

現在，您可以在同一個即時通訊中，透過 AI 輔助面板變更效能追蹤記錄中選取的事件。換句話說，你不需要發起新的即時通訊，就能討論其他活動。

「成效」頁面中醒目顯示第一方和第三方資料

「成效」面板的「摘要」分頁中新增了表格，可供您區分第一方、第三方和擴充功能資料。

將滑鼠游標懸停在表格中的項目上，即可查看成效追蹤記錄中醒目顯示的相關事件。勾選「Dim 3rd parties」(調暗第三方) ，只專注於第一方資料。

此外，按一下表格中醒目顯示項目旁的 account_tree 圖示，即可前往依第三方分組的「由下而上」分頁。

標記工具提示和洞察資料中的欄位資料

如果已啟用欄位資料，現在可以在指標標記工具提示和「洞察」分頁中查看。

Chromium 問題：368135130。

「強制自動重排」深入分析

「效能」 >「洞察」分頁的洞察資訊集中新增了「強制重排」。強制重排是指轉譯引擎暫停執行指令碼，以計算樣式和版面配置。強制重排可能會造成瓶頸，建議您避免這種情況。

將游標懸停在新洞察資料上時，系統會醒目顯示強制重排的頂層函式呼叫、堆疊追蹤，並顯示重排總時間。

Chromium 問題：369766156。

「最佳化 DOM 大小」洞察

另一項新洞察資料是「最佳化 DOM 大小」。大型 DOM 樹狀結構會降低網頁成效。

這項洞察資訊會醒目顯示效能追蹤記錄中，因 DOM 較大而受到影響的版面配置自動重排和樣式重新計算，並提供元素總數、深度和最多子項的統計資料。

使用 console.timeStamp 擴充效能追蹤記錄

擴充性 API 現在支援 console.timeStamp。除了 performance.measure 和 performance.mark 之外，您現在還可以在效能追蹤記錄中建立自訂軌跡，並使用 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");

選取「擷取設定」 >「顯示自訂追蹤項目」check_box，即可在追蹤記錄中查看自訂追蹤項目：

元素面板改善

這個版本對「元素」面板進行了多項改良。

動畫樣式的即時值

「元素」 >「樣式」分頁現在會即時更新動畫樣式的值。

支援 :open 虛擬類別和各種虛擬元素

現在「元素」面板的「樣式」 >「:hov」 >「強制特定元素狀態」部分支援 :open 虛擬類別，適用於特定 HTML 元素，例如 <details>、<select>、<dialog> 和 <input>。

此外，「元素」面板現在也支援多個新的虛擬元素：::checkmark、::picker-icon 和輪播相關的 ::column、::scroll-button、::scroll-marker 和 ::scroll-marker-group。

Chromium 問題：383157184、379805728。

複製所有控制台訊息

現在可以一次複製所有控制台訊息。

此外，您也可以在「網路」>「要求酬載」的內容選單中，找到類似的複製選項。

Chromium 問題：40206460、384967020。

「記憶體」面板中的位元組單位

「記憶體」面板現在會以適當的位元組單位顯示大小，而非以大量位元組表示。

Chromium 問題：388589515。

其他亮點

這個版本的重要修正和改良項目包括：

• 成效：
  • 註解：現在可以點選標籤，選取對應的項目 (crbug.com/388224764)。
  • 洞察：現在點選「洞察」分頁中的 CLS，會選取最嚴重的叢集，而非最嚴重的位移。
• 忽略清單：現在系統預設會忽略以 node: 開頭的節點內部項目 (crbug.com/382453615)。
• 即時運算式：修正導致即時運算式影響 $_ 指令的錯誤 (crbug.com/388437265)。
• 「元素」 >「樣式」：相對長度現在會顯示絕對值的彈出式視窗 (crbug.com/40778486)。
• 無障礙功能：欄標題現在會說明是否可排序。
• 分頁圖示現在位於分頁名稱右側，而非左側。

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。