Chrome 130 版 DevTools 的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

網路面板改善

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

重新設計網路篩選器

我們根據意見回饋重新設計了「Network」面板，並加入新的篩選器。類型專屬篩選器保持不變，也就是在簡潔的多重選取列中顯示一組徽章。

為簡化使用者介面，隱藏、封鎖和第三方相關的核取方塊已移至下拉式選單下方。清單中會顯示數字，指出下拉式選單中已勾選的篩選器數量。

在下拉式選單中移動隱藏、封鎖和第三方相關篩選器之前和之後。

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

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

Chromium 問題：362672528。

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

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

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

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

Chromium 問題：361717594。

元素面板改善功能

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

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

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

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

Chromium 問題：361471205。

標有徽章的捲動溢位

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

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

Chromium 問題：40670442。

巢狀規則後方的裸露宣告不會「向上移動」

根據 CSS 工作群組的決定，允許純宣告出現在巢狀規則之後，樣式分頁現在不會在剖析期間「向上移動」這些宣告。

在以下程式碼範例中，巢狀規則後面的裸露宣告現在不會導致 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 自動比對開發人員工具顏色與自訂主題顏色的功能。

如要關閉動態主題設定，請依序前往「設定」「設定」>「偏好設定」 >「外觀」 >「採用 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、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

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

開發人員工具的新功能

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