Chrome 130 版 DevTools 的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

網路面板改善項目

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

重新設計的網路篩選器

「網路」面板會根據您的意見回饋，提供重新設計的新篩選器。類型專屬篩選器維持不變，仍是簡潔的多選列中的一組徽章。

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

將隱藏、封鎖和第三方相關篩選器移至下拉式選單前後的畫面。

如要恢復舊版篩選器設計，請依序前往「設定」 >「實驗」 > 勾選「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-* 屬性的自動完成值

「樣式」分頁中的自動完成功能現在會建議下列 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。

效能面板改善

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

即時指標中的建議

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

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

展開含有建議的區段。

按照建議模擬使用者的體驗。

您現在可以在成效記錄的時間軸中瀏覽麵包屑：「跳躍」式地在麵包屑之間來回切換、覆寫子項麵包屑，以及移除多個子項。先前選取父項階層連結時，子項會消失。

記憶體面板改善

這個版本對「記憶體」面板進行了多項改良。

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

「記憶體」面板新增了「已卸離的元素」設定檔類型。顯示由 JavaScript 參照保留的物件。

在「記憶體」面板中新增「已卸離的元素」設定檔類型前後的畫面。

Chromium 問題：350519222。

改善純 JS 物件的命名方式

為整理及清除堆積快照中的 Object 類別，現在會：

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

在堆積快照中整理物件類別前後的比較。

Chromium 問題：350519222。

關閉動態主題

您現在可以關閉這項功能，讓開發人員工具的色彩不再自動配合 Chrome 自訂主題的色彩。

如要關閉動態主題，請依序前往「設定」「偏好設定」「外觀」，然後取消勾選「符合 Chrome 色彩配置」，並重新載入開發人員工具。

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

Chromium 問題：328472696。

Chrome 實驗：程序共用

一般來說，當您從同一個網站 (例如 Google 文件) 開啟多個分頁時，Chrome 會為每個分頁建立個別的轉譯器程序。程序共用實驗可讓多個分頁共用相同的轉譯器程序，藉此提升效能。

如果開啟開發人員工具時，看到「這個分頁與其他分頁共用資源...」訊息資訊列，表示您屬於啟用「程序共用」實驗的小型群組。

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

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

Lighthouse 12.2.1

「Lighthouse」面板現在會執行 Lighthouse 12.2.1。

這項更新為資源壓縮建議導入 < 20 KB 忽略門檻，協助您只專注於有意義的檔案大小節省量。如需完整變更清單，請參閱這篇文章。

如要瞭解如何使用開發人員工具中的 Lighthouse 面板，請參閱「Lighthouse：提升網站速度」。

Chromium 問題：772558。

其他重點

這個版本的重要修正和改良項目包括：

  • 元素：
  • 控制台：修正 cURL 指令中多行字串的未逸出連字號 (352651673)。
  • 記憶體：修正了含有 Service Worker 的頁面上的預設選取項目，現在會選取主執行緒 (40669896)。
  • 安全性：現在，當來源的安全性階段變更時，醒目顯示的網址配置會正確更新 (359920086)。

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先版管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前，找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。