Chrome 130 版 DevTools 的新功能

網路面板改善

這個版本對「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 (含私密資料)」。

Chromium 問題：361717594。

元素面板改善功能

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

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

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

• text-emphasis 速記法
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

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 色彩配置」check_box_outline_blank，然後重新載入 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。

其他精選內容

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

• 元素：
  • 修正多項編輯巢狀 CSS 的問題 (41486635、361477264、328263458、41487826)。
  • 修正已定義但空值的自訂屬性，以便剖析為未定義 (365578428)。
• 控制台：修正 cURL 指令中多行字串中未經轉義的 & 號 (352651673)。
• 記憶體：修正含有服務工作者的網頁預設選取項目，現在已選取主執行緒 (40669896)。
• 安全性：網址架構醒目顯示功能現在會隨著來源的安全性階段變更而正確更新 (359920086)。

下載預覽管道

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

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

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

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「more_vert」more_vert更多選項 >「Help」 >「Report a DevTools issue」，即可回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具的新功能

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