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

Sofia Emelianova
Sofia Emelianova
GitHub

Recorder 支援將資料匯出至 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 的即時觀測資料，請開啟「效能」面板。如要查看 INP，請在網頁上執行互動操作。如要將本機指標與 Chrome 使用者體驗報告的整體使用者體驗進行比較，請新增欄位資料：在右側的「欄位資料」部分按一下「設定」，然後在對話方塊視窗中按一下「確定」。將滑鼠游標懸停在指標值上，即可查看詳細資訊的工具提示。

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

「成效」面板會醒目顯示需要改善的指標，並提供深入分析和建議，協助您瞭解如何為使用者提供當地服務體驗。舉例來說，您可能想限制 CPU 或網路，只要在同一個畫面中，點選右側的「錄製設定」部分即可。

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

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

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

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

顯示 Performance.mark 和效能的堆疊追蹤。評估呼叫的前後差異。

詳情請參閱「使用可擴充 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」選單選項現在會開啟 Relevan 網路要求的「Headers」分頁。
  • 主控台：
    • 現在，C/C++ 擴充功能中的錯誤不會強制開啟控制台 356320158。
    • 修正 JS 模組中 import.meta 在暫停時無法評估的錯誤 40743793。
  • 記憶體：修正了忽略保留器後，還原忽略的保留器不會顯示的錯誤 327337527。

下載預覽管道

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

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

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

開發人員工具新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。