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

Sofia Emelianova
Sofia Emelianova
GitHub

記錄器支援匯出至 Firefox 的 Puppeteer

為支援 WebDriver BiDi，記錄器面板現在可將記錄匯出至 Firefox 版 Puppeteer。Puppeteer 現在支援 Firefox，因此您可以使用 Chrome 開發人員工具的錄製工具面板錄製使用者流程、匯出流程，並在 Firefox 和 Chrome 中執行。

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

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

效能面板改善

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

即時指標觀察

「效能」面板現在會顯示網站體驗核心指標的即時觀察結果，包括本機和根據 Chrome 使用者體驗報告現場資料的結果。這樣一來，您不必擷取效能追蹤記錄，就能找出效能問題，並瞭解自己的體驗與使用者體驗的代表性。

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

「效能」面板中指標的即時觀察結果。

「效能」面板會醒目顯示可改善的指標，並提供深入分析和建議，協助您將本機體驗與使用者體驗相符。舉例來說，您可能想節流 CPU 或網路，這時可以在右側「Recording settings」(錄製設定) 專區的同一畫面上操作。

「效能」面板中的「搜尋」方塊現在也適用於「網路」軌，因此您可以使用 Ctrl / Cmd + F 快速鍵尋找要求。

搜尋結果中找到網路要求。

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

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

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

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

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

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

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

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

元素面板改善

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

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

「元素」>「樣式」中的 :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。
  • 「效能」 >「網路」：「在網路中顯示」選單選項現在會開啟相關網路要求的「標頭」分頁。
  • 控制台：
    • C/C++ 擴充功能的錯誤不會再強制開啟「控制台」356320158。
    • 修正 JS 模組中 import.meta 在暫停時不會評估的錯誤 40743793。
  • 記憶體：修正忽略保留器後，系統不會顯示「還原已忽略的保留器」的錯誤 327337527。

下載預覽版頻道

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

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

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

開發人員工具新功能

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