Chrome 134 版 DevTools 的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

「隱私權與安全性」面板

舊版「安全性」面板已改為「隱私權和安全性」面板，並新增專屬的隱私權專區。在本節中，您可以：

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

在「安全性」面板中新增「隱私權」部分之前和之後。

Chromium 問題：352364594。

效能面板改善

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

已校準的 CPU 節流預設設定

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

在「Performance」 >「CPU throttling」下拉式選單中，選取「Calibrate...」，然後在「Settings」中依序點選「Calibrate」和「Continue」，等待 DevTools 計算裝置的減速率。您可以返回「Performance」 >「CPU throttling」下拉式選單，查看校正過的節流選項。

加入節流校正前後的比較。

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

您現在可以透過「AI 協助」面板，在同一個即時通訊中變更所選成效追蹤事件。換句話說，你不必發起新的即時通訊，即可討論其他活動。

在「成效」中醒目顯示第一方和第三方

「Performance」面板的「Summary」分頁會新增一張表格，方便您區分第一方、第三方和擴充資料。

將滑鼠游標懸停在表格中的項目上，即可查看成效追蹤中醒目的相關事件。勾選「淡化第三方資料」，只著重於第一方資料。

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

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

如果您已啟用欄位資料，現在就能在指標標記工具提示和「洞察」分頁中看到這些資料。

在標記工具提示和洞察分頁中加入欄位資料前後。

Chromium 問題：368135130。

「強制自動重排」洞察

「Performance」 >「Insights」分頁的洞察資料集新增了「Forced reflow」。當轉譯引擎暫停指令碼執行以計算樣式和版面配置時，就會發生「強制重新流動」。強制重新流動的瓶頸可能會讓您不想避免。

當您將滑鼠游標懸停在新的洞察資料上時，系統會以強制重新流動的頂層函式呼叫和堆疊追蹤畫面，並顯示總重新流動時間。

加入「強制重新流動」洞察資料前後的畫面。

Chromium 問題：369766156。

「最佳化 DOM 大小」洞察

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

這項洞察會在效能追蹤記錄中，標示出受到大型 DOM 大小影響的長版面配置自動重排和樣式重新計算，並提供元素總數、深度和大部分子項的統計資料。

新增「最佳化 DOM 大小」洞察資料前後。

使用 console.timeStamp 擴充效能追蹤

Extensibility 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");

依序前往「擷取設定」 >「顯示自訂追蹤項目」，即可在追蹤記錄中看到自訂追蹤項目：

新增 console.timeStamp 支援前後。

元素面板改善功能

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

動畫樣式的即時值

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

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

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

新增「:open」選項前後。

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

Chromium 問題：383157184、379805728。

複製所有控制台訊息

您現在可以一次按一下滑鼠右鍵，複製所有主控台訊息。

新增「複製主控台」選項前後。

此外，您也可以在「Network」 >「Request Payload」的內容選單中找到類似的複製選項。

Chromium 問題：40206460、384967020。

「Memory」面板中的位元組單位

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

顯示位元組單位前後的畫面。

Chromium 問題：388589515。

其他精選內容

以下是這個版本中值得注意的修正和改善項目：

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

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能、測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

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

開發人員工具的新功能

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