Chrome 130 版 DevTools 的新功能

Sofia Emelianova

網路面板改善

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

重新設計的網路篩選器

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

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

如要恢復舊版篩選器設計，請依序前往「設定」 >「實驗」 > check_box_outline_blank 勾選「Redesign of the filter bar in the Network panel」(重新設計「網路」面板中的篩選器列)。

歡迎提供意見，協助我們進一步改善設計。

Chromium 問題：362672528。

HAR 匯出內容現在預設會排除私密資料

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

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

Chromium 問題：361717594。

元素面板改善

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

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

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

效能面板改善

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

即時指標中的建議

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

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

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

瀏覽導覽標記

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

記憶體面板改善

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

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

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

Chromium 問題：350519222。

改善純 JS 物件的命名方式

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

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

Chromium 問題：350519222。

關閉動態主題

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

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

Chromium 問題：328472696。

Chrome Experiment：程序共用

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

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

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

Lighthouse 12.2.1

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

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

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

Chromium 問題：772558。

其他亮點

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

• 元素：
  • 修正多個巢狀 CSS 編輯問題 (41486635、361477264、328263458、41487826)。
  • 修正已定義但值為空白的自訂屬性剖析為未定義的問題 (365578428)。
• 控制台：修正 cURL 指令中多行字串中未逸出的連字號 (352651673)。
• 記憶體：修正了含有 Service Worker 的頁面上的預設選取項目，現在會選取主執行緒 (40669896)。
• 安全性：現在，當來源的安全性階段發生變化時，網址配置醒目顯示功能會正確更新 (359920086)。

下載預覽版頻道

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

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

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

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

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