Chrome 130 版 DevTools 的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

改善網路面板

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

重新設計網路篩選器

我們根據您的意見回饋重新打造「網路」面板的全新篩選器。特定類型的特定篩選器會保持不變，這一組徽章會顯示在簡潔的複選列中。

為了清理使用者介面，隱藏、封鎖和第三方相關核取方塊會移至下拉式清單底下。清單中會顯示一個數字，指出下拉式選單所檢查的篩選器數量。

隱藏、封鎖與第三方相關篩選器前後的下拉式選單。

如要恢復舊版篩選器設計，請清除「設定」 >「Experiments」>「check_box_outline_blank」「Redesign of the filter bar in the Network panel」。

歡迎提供寶貴意見，告訴我們對全新設計的想法。

Chromium 問題：362672528。

HAR 匯出作業現在預設會排除私密資料

為降低意外洩漏機密資訊的機率，根據預設，以 HAR 格式匯出的網路記錄將不再包含 Cookie、Set-Cookie 和 Authorization 標頭。

如要匯出含有私密資料的 HAR 格式記錄，請依序前往「設定」 >「偏好設定」>「網路」>「核取方塊」「允許產生含有私密資料的 HAR」。「網路」面板會以箭頭標示「下載」按鈕。按住按鈕，然後在下拉式選單中選取「匯出 HAR (含私密資料)」。

在 HAR 匯出功能中新增含有/不含私密資料的匯出選項前後。

Chromium 問題：361717594。

改善「元素」面板

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

text-emphasis-* 屬性的自動完成值

「Styles」分頁中的自動完成功能現在會針對下列 CSS 屬性提供建議值：

在為「text-emphasis-*」屬性新增自動完成選項之前和之後。

Chromium 問題：361471205。

標有徽章的捲動溢位

「Elements」面板現在會顯示新的「捲動」標記，標示出包含溢位內容且具有 overflow: scroll 或 overflow: auto 的元素，因此您可以輕鬆找出捲動溢位。與其他徽章一樣，這個徽章會反映出目前的 DOM，如果內容因大小變更而停止溢位，標記就會消失。

在使用徽章標示捲動溢位前後。

Chromium 問題：40670442。

巢狀規則之後並未「向上移動」的純宣告

在 CSS Working Group 的「決定」允許基本宣告之後導入巢狀規則，「Styles」分頁現在不會在剖析時將這些宣告「上移」。

在以下程式碼範例中，巢狀規則後方的裸露宣告現在不會導致 Chrome 意外重新排序連鎖中的樣式：

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

允許在巢狀規則後方加入空白宣告。

Chromium 問題：358119261。

效能面板改善

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

直播指標中的最佳化建議

即時指標現在可提供特定指標的建議，協助您盡可能將開發環境設定為盡可能貼近使用者體驗。

如要取得建議，請從 Chrome 使用者體驗報告 (CrUX) 設定欄位資料擷取功能，然後展開每張指標資訊卡中的「考量本機測試條件」部分 (如有)，以及展開環境設定中的「考慮實際使用環境」。

展開含有最佳化建議的部分。

遵循最佳化建議，模擬使用者體驗。

您現在可以在表演記錄的時間軸中進行瀏覽導覽標記，例如在導覽標記之間來回「跳轉」、「覆寫子導覽標記」，以及移除多個子項。過去，當您選取上層導覽標記時，子項會消失。

「記憶體」面板改善項目

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

新的「已卸離的元素」設定檔

「Memory」面板會取得新的設定檔類型：「Detached elements」。它會顯示 JavaScript 參照所保留的物件。

將「卸離元素」設定檔類型新增至「記憶體」面板的前後。

Chromium 問題：350519222。

改善純 JS 物件的命名方式

為整理堆積快照中的 Object 類別，現在純 JavaScript 物件會：

  • 根據其包含的屬性命名，例如 {firstProperty, secondProperty, ..., *nthProperty}。
  • 可透過 DevTools 建構的這些名稱進行搜尋。
  • 如果屬性相同，就會分為一組。

在堆積快照中整理物件類別之前和之後。

Chromium 問題：350519222。

關閉動態主題設定

您現在可以在 Chrome 中關閉開發人員工具顏色的自動比對功能，步驟如下：

如要關閉動態主題設定，請依序點選「設定」 >「偏好設定」>「外觀」>「check_box_outline_blank」「套用 Chrome 色彩配置」> 重新載入 DevTools。

關閉動態主題設定前後的畫面。

Chromium 問題：328472696。

Chrome 實驗：程序共用

通常，當您開啟同一網站 (例如 Google 文件) 的多個分頁時，Chrome 會為每個分頁建立個別的轉譯器程序。「處理共用」實驗功能會讓多個分頁共用同一個轉譯器程序，藉此改善效能。

如果在開啟開發人員工具時看到「This tab shares resources with other tabs...」資訊列訊息，表示您屬於啟用「Process sharing」實驗的小型群組。

「這個分頁與其他分頁共用資源...」資訊列。

程序共用功能可能會影響中斷點偵錯和效能分析。詳情請參閱「Chrome 實驗功能：程序共用」。

Lighthouse 12.2.1

Lighthouse 面板現在會執行 Lighthouse 12.2.1。

這項更新會在資源壓縮建議中加入 < 20 KB 忽略門檻，讓您只專注於節省的檔案大小。請參閱完整變更清單。

如要瞭解在開發人員工具中使用 Lighthouse 面板的基本知識，請參閱「Lighthouse：改善網站速度」。

Chromium 問題：772558。

其他精選內容

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

  • 元素：
  • 主控台：修正 cURL 指令中多行字串中未逸出的 & 符號 (352651673)。
  • 記憶體：修正含有服務工作者的網頁預設選取項目，現在已選取主執行緒 (40669896)。
  • 安全性：網址配置醒目顯示功能現在可在來源的安全性階段變更時正確更新 (359920086)。

下載預覽管道

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

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

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

開發人員工具的新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。