開發人員工具 (Chrome 129) 的新功能'

Sofia Emelianova
Sofia Emelianova
GitHub

錄製器支援將資料匯出至 Firefox 的 Puppeteer

WebDriver BiDi 支援功能推出後，錄音工具面板現在可以將錄音內容匯出至 Firefox 版 Puppeteer。Puppeteer 支援 Firefox，因此您現在可以使用 Chrome 開發人員工具的「Recorder」面板記錄使用者流程，並匯出並在 Firefox 和 Chrome 上執行。

在錄製器的匯出選單中新增「Puppeteer for Firefox」選項前後的畫面。

詳情請參閱「WebDriver BiDi - The future of cross-browser automation」。

效能面板改善

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

即時指標觀察項目

效能面板現在會顯示 網站使用體驗核心指標的即時觀察結果，包括本機和 Chrome 使用者體驗報告的欄位資料。這樣一來，您就能在不擷取效能追蹤記錄的情況下，找出效能問題，並瞭解自己的體驗與使用者體驗的差異。

如要查看 LCP 和 CLS 的即時觀察結果，請開啟「Performance」面板。如要查看 INP，請在網頁上執行互動動作。如要將本機指標與 Chrome 使用者體驗報告中的匯總使用者體驗進行比較，請新增欄位資料：在右側的「欄位資料」部分，按一下「設定」，然後在對話方塊中按一下「確定」。將滑鼠游標懸停在指標值上，即可查看詳細資訊的工具提示。

在「成效」面板中，即時觀察指標。

「成效」面板會標示出可改善的指標，並提供深入分析和建議，協助您改善本機體驗，讓使用者獲得更好的體驗。舉例來說，您可能想限制 CPU 或網路，只要在同一個畫面中，點選右側的「錄製設定」部分即可。

「Performance」面板中的「Search」方塊現在也適用於「Network」追蹤，因此您可以使用 Ctrl / Cmd + F 快速鍵尋找要求。

搜尋功能發現的網路要求。

查看 performance.mark 和 performance.measure 呼叫的堆疊追蹤記錄

在「Summary」分頁中，「Performance」面板現在會顯示 performance.mark 和 performance.measure 呼叫的堆疊追蹤記錄。您可以使用這些呼叫，透過自訂資料擴充效能追蹤記錄。

顯示 performance.mark 和 performance.measure 呼叫的堆疊追蹤前後對照圖。

詳情請參閱「使用可擴充性 API 自訂成效資料」。

在自動填入面板中使用測試地址資料

「自動填入」面板現在會提供地址表單的測試資料。這樣一來，如果 Chrome 中沒有任何已儲存的地址，或是你使用的是訪客設定檔，就能更輕鬆地測試網站上的地址表單。

如要使用測試資料自動填入地址表單，請開啟「自動填入」面板，開啟「在自動填入選單中顯示測試位址」，在網頁上的地址表單上按一下滑鼠右鍵，然後從「開發人員工具」選單中選取其中一個選項。

在地址表單欄位下拉式選單中新增自動填入測試資料選項前後的畫面。

元素面板改善功能

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

為特定元素強制套用更多狀態

「Elements」 >「Styles」 中的 :hov 部分現在提供更多可強制啟用的擬造類別。新的選項組合位於「強制特定元素」狀態下拉式選單下方，適用於您選取的特定元素。舉例來說，<label> 和 <input> 有不同的選項組合。

新增強制套用特定元素狀態功能前後的效果。

Chromium 問題：40280012。

「元素」>「樣式」現在會自動完成更多格狀屬性

編輯格線區域和線條名稱時，元素 > 樣式分頁現在會提供自動完成選項。

編輯格線線條名稱時，新增自動完成選項前後的畫面。

詳情請參閱「檢查 CSS 格線版面配置 」，特別是「顯示行名稱」一節。

Lighthouse 12.2.0

Lighthouse 資訊面板現在會執行 Lighthouse 12.2.0。

這次更新修正了多項錯誤。請參閱完整變更清單。

如要瞭解在開發人員工具中使用 Lighthouse 面板的基本知識，請參閱「Lighthouse：改善網站速度」。

Chromium 問題：772558。

其他精選內容

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

  • 元素：
    • 修正了超載長度屬性轉譯不正確的錯誤 357020613。
    • position-try-options 已根據規格重新命名為 position-try-fallbacks。
    • 重新整理網頁現在會還原所選節點，即使是在 iframe 40719145 中也是如此。
    • 無障礙：螢幕閱讀器現在會朗讀「顯示元素」按鈕 357382536。
  • 「Performance」 >「Network」：現在，點選「Reveal in Network」選單選項，即可開啟相關網路要求的「Headers」分頁。
  • 主控台：
    • C/C++ 擴充功能的錯誤現在不會強制開啟控制台 356320158。
    • 修正 JS 模組中 import.meta 在暫停時無法評估的錯誤 40743793。
  • 記憶體：修正了忽略保留器後，還原忽略的保留器不會顯示的錯誤 327337527。

下載預覽管道

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

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

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

開發人員工具的新功能

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