開發人員工具新功能 (Chrome 152)

Matthias Rohmer

發布日期：2026 年 8 月 25 日

Chrome 152 針對網路偵錯功能進行大幅強化，包括重新傳送要求和檢查二進位酬載、元素中的自訂元素裝飾和強化 CSS 巢狀結構、效能即時指標中的軟性導覽網站體驗核心指標、控制台中的結構化表格匯出功能，以及開發人員工具 MCP 伺服器的改良功能。

服務專員的開發人員工具

最新 v1.7.0的 Chrome 開發人員工具 MCP 伺服器，為 Antigravity、Claude、Codex 等程式設計代理，擴充了先前推出的記憶體偵錯功能：

  • 堆積快照物件詳細資料 (get_heapsnapshot_object_details)： 直接從堆積快照檢查詳細的 JavaScript 物件屬性、類別名稱和 GC 根保留路徑。
  • 原生 V8 內容篩選：依原生執行內容篩選堆積快照物件，並檢查快照摘要中的原生內容。
  • 提升 Daemon 穩定性和生命週期：新增每個導覽網路要求保留的界限、工作階段 ID 驗證、CLI 與 Daemon 版本不符的警告，以及內容處置時的正常 worker 終止。

如要瞭解詳情及開始使用，請前往 GitHub 上的代理程式開發人員工具存放區。

網路：編輯及重新傳送要求、預先載入洞察資料，以及解碼二進位酬載

「網路」面板顯示擷取要求的新「重新傳送」內容選單選項、「複製為預先載入元素」選項，以及「酬載」分頁中的二進位解碼切換器。

  • 重新傳送擷取和 XHR 要求：先前的「重新傳送 XHR」內容選單項目現在為「重新傳送」。現在支援所有可擷取的網路要求，可將標準要求轉換為 fetch() 呼叫，同時保留完整的重播保真度以及 XHR。要求也會追蹤及顯示執行環境和主控台來源。
  • 「預先載入」欄和「複製為預先載入元素」：新的專用「預先載入」欄會顯示是否使用推測預先載入功能啟動網路要求。您也可以在任何要求上按一下滑鼠右鍵，然後選取「Copy as preload element」(複製為預先載入元素)，產生可直接放入 HTML 的 <link rel="preload"> 標記。「Early Hints」現在歸類在「發起者」欄下方。
  • 要求酬載的二進位檢視器：「Payload」分頁現在提供二進位和壓縮要求酬載的解碼方法選項 (Base64、十六進位和 UTF-8)，與「Response」分頁相同。
  • 「已釘選的要求編號」欄：「要求」#欄現在會釘選在「聯播網資料格」的第一個位置，方便您參考要求。
  • 同網站主機篩選：在「網路」篩選列中搜尋網域、主機名稱或通訊埠 (例如 localhost 或 example.com)，現在可以準確篩選同網站要求。
  • 預設查詢參數解碼：系統現在會自動解碼所有要求的「酬載」分頁中的查詢和表單參數。

Chromium 問題：40726969、 41299075、40138847、 40222701、 525848667、 507077182、 498482622、 520437951、40267477

元素：自訂元素裝飾、巢狀 CSS 父項選取器互動和 $0 虛擬元素選取

「元素」面板 DOM 樹狀結構，自訂 HTML 標記旁邊顯示自訂元素提示標記，並將游標懸停在巢狀 CSS 規則中的父項選取器上，以醒目顯示網頁上相符的元素。

在「元素」面板中，檢查及編寫網頁元件和現代 CSS 更快速直覺：

  • 自訂元素提示標記：自訂 HTML 元素 (以連字號標記或自訂內建元素的 is="..." 屬性識別) 現在會在 DOM 樹狀結構大綱中顯示 custom-element 提示標記。
  • 巢狀 CSS 父項選取器互動和特異性：現在只要將游標懸停在巢狀 CSS 規則和繼承的巢狀規則中的父項選取器上，頁面就會醒目顯示相符的元素，並回應「樣式」分頁的篩選條件。為 @nested-declarations 規則新增特異性工具提示彈出式視窗。
  • 透過 $0 選取虛擬元素：在「元素」DOM 樹狀結構中選取 ::before 或 ::after 等虛擬元素，現在會直接將這些元素繫結至 $0 控制台變數，方便您立即檢查 JavaScript。
  • text-wrap 和 <image> 類型自動完成：「樣式」窗格現在會建議 text-wrap 的所有關鍵字值 (wrap、nowrap、balance、pretty、stable)，並自動完成接受 <image> 資料類型的 CSS 屬性。
  • 方塊模型捲軸感知：現在，當元素有可見捲軸時，方塊模型指標圖表會準確計算及算繪內容方塊維度。

Chromium 問題：367440148、 535517817、 535522242、 535523039、 537724428、 399305533、 334984154、 383355294、 326260752、 389342065

效能：即時指標和自訂螢幕截圖預設集中的軟體導覽指標

「效能」面板的「即時指標」部分，顯示軟性導覽的網站體驗核心指標。

  • 支援軟性導覽的即時指標：即時指標檢視畫面現在會擷取並回報單頁應用程式中用戶端軟性導覽的 Core Web Vitals (例如 LCP 和 INP)，預設採用 web-vitals v6.0.0 升級版。
  • 自訂螢幕截圖擷取預設值：在「效能」面板中，公開可設定的螢幕截圖影格大小和計數上限預設值，以自訂記憶體預算內的視覺記錄保真度。
  • console.profileEnd() 追蹤揭露器：現在在程式碼或控制台中呼叫 console.profileEnd()，會自動開啟並揭露「成效」面板中記錄的追蹤記錄。
  • Extensibility API 自訂軌跡摘要：效能追蹤摘要現在會處理並呈現使用 Extensibility API 註冊的自訂軌跡群組。

Chromium 問題：514721939、 490140054、 536954453、 535506117

控制台：將表格匯出為 Markdown 或 CSV，並提供副作用防護

  • 將控制台表格複製為 Markdown 或 CSV：現在可以透過內容選單，將使用 console.table() 記錄的表格，直接複製到剪貼簿，並格式化為 Markdown 表格或 CSV 資料。
  • 副作用評估保護措施：偵錯工具的懸停評估功能現在會防範含有 new、標記範本常值、動態 import() 和 delete 運算子的運算式，避免在暫停時發生意外的狀態突變。

Chromium 問題：40924951、 40133606

其他產品亮點

其他開發人員工具子系統的重大改善項目：

  • 來源：快速開啟功能現在會優先顯示本機工作區檔案，並大幅提升分數，讓工作區檔案顯示在網路資源上方。(Chromium 問題：40260136)
  • 記憶體：堆積快照摘要檢視畫面現在會顯示物件總數，以及所選類型的匯總淺層大小，並包含原生執行環境篩選器。(Chromium 問題： 497855658)
  • 應用程式：廣告面板已將「醒目顯示廣告」切換按鈕直接移至面板中，並新增可點選的廣告 iframe 元素 ID，以顯示階層中的影格，還推出影格指標細目表。(Chromium 問題：514957134)
  • 應用程式：將「儲存空間」窗格中的「清除網站資料」部分重新設計為統一的合併群組 (Chromium 問題：375867286)，並解決往返快取還原後重複的快取儲存空間項目 (Chromium 問題：484693244)。
  • 擴充功能：現在，當呼叫 chrome.devtools.panels 中的非同步方法時，如果沒有回呼，系統會原生傳回 JavaScript Promise。(Chromium 問題： 496604551)
  • 設定：將預設網路節流預設值和自訂節流設定分成不同部分。(Chromium 問題： 342409451)
  • Lighthouse：將隨附的 Lighthouse 模組更新至 13.4.1 版。 (Chromium 問題：40543651)
  • 問題：如果使用 loading="lazy" 的圖片缺少明確的 width 或 height 維度，開發人員工具就會發出警告。
  • 裝置模式：簡化縮放等級選單，統一提供「符合視窗大小」選項，並在無法使用影格圖像時，停用「顯示裝置影格」切換按鈕。

無障礙功能再進化

Chrome 152 包含下列無障礙功能強化項目：

  • 元素和無障礙功能：新增了內容選單選項，可在「元素」DOM 樹狀結構和「無障礙樹狀結構檢視畫面」之間順暢切換，並為無障礙節點新增「捲動至檢視畫面」功能。(Chromium 問題： 417929842)
  • 無障礙功能：新增支援功能，可使用內容選單將無障礙樹狀結構節點和子樹狀結構複製為純文字。(Chromium 問題： 417929842)
  • 元素：修正以深色模式執行時，「元素」面板中搜尋醒目顯示色彩的低對比問題。(Chromium 問題： 491718898)
  • 導覽：將開發人員工具取消停駐到獨立視窗，或重新停駐回分頁時，焦點不會再強制移至主選單按鈕。
  • 設定：在 AI 設定中，為「顯示更多」和「顯示較少」按鈕新增說明性無障礙內容。