Chrome 143 版開發人員工具的新功能

開發人員工具 MCP 伺服器更新

我們為開發人員工具 MCP 伺服器進行多項改良，並發布 v0.11.0。

  • 在 MCP 用戶端 (Gemini CLI、Cursor 等) 中提示時，您現在可以參照「元素」和「網路」面板中選取的元素和網路要求
  • list_console_messages 工具現在也會顯示「問題」面板中顯示的問題
  • 現在可以使用新的 press_key 工具，偵錯與表單元素無關的鍵盤事件
  • 無障礙樹狀結構快照現在可以儲存到磁碟
  • 現在可以重新載入網頁，並視需要忽略快取
  • 設定 --user-data-dir 標記，使用現有的 Chrome 設定檔

如需完整的異動和錯誤修正清單，請參閱 GitHub 上的公開異動記錄，並參閱這篇公告網誌文章，進一步瞭解 DevTools MCP 伺服器。

改善追蹤記錄共用功能

「效能」面板中的追蹤記錄分享對話方塊

匯出效能追蹤記錄時，您現在可以在匯出的檔案中加入額外資料，方便自己或同事日後進行偵錯。現在可以選擇納入下列項目：

  • 資源內容：所有 HTML、CSS 和 JavaScript 檔案的副本 (擴充功能指令碼除外)
  • 指令碼來源對應：對應至編寫的程式碼，可讓您查看原始函式名稱和來源檔案。

請參閱更新版說明文件，瞭解哪些資訊適合分享，哪些資訊最好保密。

我們衷心感謝 Microsoft 同事，他們與我們合作，並主導了這項計畫的初期工作。

支援 @starting-style

「元素」面板現在支援偵錯新的 CSS @starting-style 規則，這對建立進入動畫至關重要。

您現在可以在「元素」樹狀結構中，查看相關元素旁的 starting-style 裝飾符，按一下膠囊按鈕即可切換元素的 starting-style 狀態，並在「樣式」分頁中檢查及偵錯 @starting-style 區塊。

顯示方式為「磚塊」的編輯器小工具

如果您嘗試使用 CSS 砌磚版面配置，現在可以使用與 display 相同的編輯器小工具：flex 和 grid 版面配置，在 masonry 版面配置中快速切換各種對齊選項。

燈塔 13

「Lighthouse」面板現在會執行 Lighthouse 13。完成這項里程碑後，我們將整合開發人員工具和 Lighthouse 的效能洞察資訊。

詳情請參閱公告網誌文章。如要瞭解 Lighthouse 的用途，以及如何與開發人員工具中的「效能」面板建立關聯，請參閱「Lighthouse：最佳化網站」。

下載預覽版頻道

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

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

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

開發人員工具新功能

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