Chrome 130 版 DevTools 的新功能

Sofia Emelianova

網路面板改善

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

重新構思的網路篩選器

我們根據您的意見回饋重新打造「網路」面板的全新篩選器。類型專屬篩選器維持不變，也就是在簡潔的多重選取列中顯示一組徽章。

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

如要恢復使用舊的濾鏡設計，請清除設定「設定」>實驗 >check_box_outline_blank 在網路面板中重新設計篩選列。

我們歡迎分享你對新版設計的意見。

Chromium 問題：362672528。

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

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

如要匯出含有私密資料的 HAR 格式記錄，請依序前往「設定」 >「偏好設定」>「網路」>「核取方塊」「允許產生含有私密資料的 HAR」。「網路」面板會以箭頭標示「下載」按鈕。長按按鈕，然後從下拉式選單中選取「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 Working Group 的「決定」允許基本宣告之後導入巢狀規則，「Styles」分頁現在不會「向上移」這些宣告。

在以下程式碼範例中，現在巢狀規則之後的裸名宣告不會導致 Chrome 意外重新排列串聯中的樣式：

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

  background-color: green;
}

Chromium 問題：358119261。

效能面板改善

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

即時指標中的推薦功能

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

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

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

瀏覽導覽標記

您現在可以在成效記錄的時間軸中瀏覽麵包屑：在麵包屑之間來回「跳躍」、覆寫子項麵包屑，以及移除多個子項。過去，當您選取上層導覽標記時，子項會消失。

記憶體面板改善項目

這個版本為「Memory」面板改善了多項功能。

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

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

Chromium 問題：350519222。

改善純 JS 物件的命名方式

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

• 以所含屬性命名，例如 {firstProperty, secondProperty, ..., *nthProperty}。
• 可由開發人員工具建構的這些名稱進行搜尋。
• 如果兩者有相同屬性，會歸為一組。

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。

其他精選內容

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

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

下載預覽頻道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

• 歡迎透過 crbug.com 提出建議或意見。
• 在開發人員工具中，依序按一下「更多選項」「說明」>「回報開發人員工具的問題」，即可回報開發人員工具的問題。
• 前往 @ChromeDevTools 張貼 Tweet。
• 歡迎分享開發人員工具 YouTube 新功能或開發人員工具秘訣 YouTube 影片留言。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。