開發人員工具新功能 - 2026 年 10 月

發布日期:2026 年 10 月 1 日

Chrome 153 和 Chrome 154 已於上個月推出穩定版,提供一系列開發人員改善功能,可供日常工作流程使用。本版本著重介紹開發人員工具中代理程式的精細 JavaScript 執行控制項、應用程式面板中的廣告指令碼追蹤、完整的軟體導覽支援和效能面板中的 CPU 效能層級覆寫、元素面板中非使用中的樣式和可透過鍵盤存取的裝飾項目支援、AI 輔助功能中的來源檢查和效能追蹤記錄,以及裝置模式中現代化的裝置預設設定。

服務專員的開發人員工具

Chrome 開發人員工具 MCP 伺服器為程式碼編寫代理程式提供新的安全控制項、效能調整和記憶體分析功能:

  • Agent Plugins 1.0 套件:新增 Agent Plugins 1.0 套件支援,可讓代理程式載入及執行模組化外掛程式擴充功能。
  • JavaScript 執行控制項:設定 --no-javascript-evaluation 或關閉 JavaScript 執行工具,即可檢查網頁,不必評估指令碼,並擴展至導覽和初始化指令碼。
  • 隨選來源對應:新增選項,可停用來源對應,並視需要延遲載入來源對應,避免大型網站耗用大量記憶體用量。
  • 可設定的檔案系統根目錄和 CLI 路徑權限:CLI 現在預設包含 --allow-unrestricted-paths,並支援可設定的檔案系統根目錄。
  • 檢查堆積快照:使用 query_heapsnapshot 依保留大小或屬性名稱直接查詢物件、查看邊緣的自身大小和保留大小,以及檢查 V8 執行環境保留的記憶體。
  • PWA 自動化工具:新增專用工具,可自動檢查漸進式網頁應用程式的安裝和生命週期。
  • 控制台堆疊追蹤:使用 list_console_messages 列出控制台訊息時,擷取選用的堆疊追蹤。

詳情請參閱 chrome-devtools-mcp 存放區

繼 Chrome 使用者體驗報告 (CrUX) 推出四項實驗性廣告指標後,這個新子面板可集中顯示網頁的廣告相關資訊,方便您進行偵錯及最佳化。包括:

  • 新實驗性指標的資訊主頁:可查看視埠廣告密度、視埠廣告數量、廣告 CPU 總用量和廣告網路總用量。
  • 依廣告元素區隔 CPU 和網路用量
  • 主要框架中的廣告指令碼表格。
  • 可醒目顯示網頁上的廣告。

如要進一步瞭解新的廣告指標,請參閱說明文件

應用程式面板的「廣告」分頁,顯示新的「廣告指令碼」表格,並在「來源」中顯示廣告指令碼。
應用程式面板的「廣告」分頁,顯示新的廣告指令碼表格,並在「來源」中顯示廣告指令碼。

Chromium 問題:514957134512927903540469610

「效能」面板提供端對端軟體導覽評估、硬體校正覆寫,以及更深入的追蹤搜尋:

  • 全面支援軟性導覽:繼 Chrome 152 在即時指標和追蹤記錄檢視畫面中導入軟性導覽支援後,「洞察」面板現在也支援軟性導覽分析,全面支援在「效能」面板中評估軟性導覽。
  • 透過 CDP 覆寫 CPU 效能層級:開發人員工具現在支援透過 Chrome 開發人員工具通訊協定 (Emulation.setCPUPerformanceOverride) 設定、計算及調度校準的 CPU 效能層級覆寫,以便在各個硬體層級進行可重現的效能測試。
  • 在火焰圖中搜尋擴充功能軌跡:現在在「Performance」(效能) 面板火焰圖中按下 Ctrl+F,即可比對使用 Extensibility API 註冊的自訂軌跡項目,搜尋工具提示文字、屬性和使用者詳細資料。
  • CPU 設定檔執行緒視覺化:「效能」面板火焰圖現在會只轉譯包含 CPU 設定檔樣本的執行緒,確保 WebAssembly 執行緒等背景執行作業會顯示在時間軸檢視畫面中。
「效能」面板中的軟性導覽端對端工作流程。

Chromium 問題:449760252483092899540020488

元素:無效樣式、可透過鍵盤存取的裝飾,以及樹狀結構大綱修正

在「元素」面板中,檢查及撰寫 CSS 的速度更快,也更方便:

  • 支援無效樣式:如果樣式規則不再適用於所選元素,開發人員工具現在仍可繼續顯示這些規則,並以無效視覺指標清楚區分。在「設定」中啟用非使用中的樣式,並設定其收合行為。
  • 可透過鍵盤存取的裝飾:DOM 樹狀結構中的互動式裝飾 (包括「查看來源」、「起始樣式」、「捲動快照」和「顯示」) 現在可透過鍵盤聚焦,並使用 EnterSpace 啟動。
  • 拖曳重新排序:現在只要在 DOM 樹狀結構中拖曳元素,即可重新排序 DOM 節點,而且跨越 shadow DOM 邊界時也能穩定運作,並清楚顯示放置位置指標。
  • 更順暢的 CSS 屬性切換:在「樣式」分頁中切換 CSS 屬性核取方塊時,不會再觸發重複的 UI 重繪或視覺閃爍。
元素面板顯示無效的 CSS 規則。
「元素」面板顯示無效的 CSS 規則。

Chromium 問題:539424116554057179555088527548477554

裝置模式:依板型規格分組的現代化裝置預設集

「裝置模式」工具列和「設定」 >「裝置」檢視畫面會將模擬硬體歸類為明確的類別:

  • 外型規格分組:模擬裝置現在會分組為「行動裝置」、「摺疊式裝置」、「平板電腦和桌機」和「智慧螢幕」
  • 更新硬體目錄:新增現代預設集,包括 iPhone 16、Pixel 9、Pixel 10、Galaxy Z Fold 6、iPad Pro 13 吋和 Nest Hub Max,並淘汰過時的舊版裝置定義。
裝置模式:顯示依外型規格分組的現代化裝置預設集。
裝置模式:顯示依板型規格分組的現代化裝置預設集。

Chromium 問題:526856234526857820

網路:在控制台中編輯並以擷取形式重新傳送,以及本機覆寫安全性

網路要求檢查和偵錯工作流程已簡化並確保安全:

  • 在控制台中編輯並重新傳送為擷取:現在選取任何網路要求的「在控制台中編輯並重新傳送為擷取」,系統會自動將 控制台面板焦點設為 fetch() 運算式,並將該運算式貼到提示中,同時附上參數註解和原始要求的參照連結。
  • 本機覆寫安全強化:「網路」面板現在會防止本機覆寫中的路徑遍歷 (%2E%2E),並禁止在非 http(s) 配置 (例如 data:blob:javascript:about:) 上建立覆寫。
  • 在「以 cURL (cmd) 格式複製」中逸出插入點:現在為 Windows cmd.exe 複製網路要求做為 cURL 指令時,系統會逸出半形括號和反引號,避免貼到替代殼層時發生指令語法錯誤。
  • 二進位酬載游標同步:在「Payload」分頁中,切換至十六進位、Base64 和 UTF-8 檢視畫面時,系統會保留捲動和游標位置。
在網路要求上按一下滑鼠右鍵,然後選取「Edit and resend as fetch」(編輯並以擷取方式重新傳送),系統會自動將焦點放在「Console」(控制台) 面板,並貼上擷取運算式,方便您編輯。
在網路要求上按一下滑鼠右鍵,然後選取「編輯並重新傳送為擷取」,系統會自動將焦點放在「控制台」面板,並貼上擷取運算式,方便您編輯。

Chromium 問題:40726969513843792513836026407750982

記憶體:堆積快照邊緣篩選、大小排序和物件查詢

「記憶體」面板提供更精細的工具,可分析堆積快照:

  • 邊緣排序和篩選:您現在可以依據最小保留大小篩選堆積快照中的邊緣,並篩除原始值 (nullundefinedtruefalse),專注於有意義的物件參照。邊緣可依保留大小、自身大小或名稱排序。
  • 直接查詢物件:開發人員工具支援依保留大小門檻或屬性名稱直接查詢堆積快照物件,簡化記憶體洩漏調查。
  • 脈絡保留分析:堆積快照可計算並回報 V8 執行脈絡特別保留的匯總記憶體。
  • 彈性快照剖析:現在如果堆積快照檔案無效或已損毀,系統會顯示清楚的錯誤訊息,而不是導致剖析作業停止。

Chromium 問題:497855658

無障礙功能再進化

Chrome 153 和 Chrome 154 包含下列無障礙功能強化項目:

  • 元素:在 macOS 上,VoiceOver 現在會透過禮貌的即時區域,在瀏覽 DOM 樹狀結構項目時,播報「已展開」和「已收合」狀態變更。(Chromium 問題:540028208)
  • 問題:解決「問題」計數器中重複的螢幕閱讀器播報內容,讀取單一簡潔的摘要,並在「問題」面板中套用正確的非按鈕語意。(Chromium 問題: 536977880)
  • 元素:互動式裝飾 (「查看來源」、「起始樣式」、 「捲動快照」和「顯示」) 完全可透過鍵盤聚焦和啟用。(Chromium 問題:554057179)
  • 即時區域:新增 AccessibilityAnnouncementRecordingView,用於記錄及偵錯即時公告和 ariaNotify 呼叫。(Chromium 問題: 527462118)

Chromium 問題:540028208536977880554057179527462118