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

發布日期:2026 年 3 月 10 日

Chrome 146 改善了「元素」面板中已採用樣式表的支援功能,大幅提升了「控制台」記錄導覽功能,並簡化了「隱私權」偵錯工作流程,同時也進行了各種其他小型修正和更新。

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

開發人員工具 MCP 伺服器現已更新至 0.19.0 版,提供強大的新工具、提升效率,以及專業的偵錯技能:

  • 整合式 Lighthouse 稽核:現在您可以直接透過 MCP 執行 Lighthouse 稽核,在代理工作流程中自動檢查成效和品質。
  • 精簡模式:我們推出全新的 --slim 模式,可最佳化工具說明和參數,盡量節省權杖。
  • 全新偵錯技能:新增專屬技能,可稽核及偵錯無障礙功能,並偵錯及最佳化最大內容繪製 (LCP)。
  • 擴充工具和功能:伺服器現在支援儲存空間隔離的瀏覽器環境、實驗性螢幕錄影功能、新的 take_memory_snapshot 工具,以及 type_text 等進階互動功能。

如需完整異動清單,請參閱 GitHub 上的公開異動記錄

保留控制台歷史記錄編輯內容

解決了 控制台長期以來的痛點。先前,如果您編輯從記錄中提取的指令,然後離開 (按下向上或向下鍵),所做的編輯就會遺失。

在 Chrome 116 中,開發人員工具現在會保留您的編輯內容,方便您瀏覽指令記錄。你可以開始修改先前的指令、瀏覽其他指令,然後返回草稿,不必擔心遺失工作進度。

這是社群貢獻,感謝 @hjanuschka

Chromium 問題:355108929

改善對已採用樣式表的支援

現在偵錯網頁元件和現代 CSS 架構更加輕鬆。 採用樣式表不再隱藏,現在會歸類在「元素」面板 DOM 樹狀結構中的專屬 #adopted-style-sheets 節點下。

您可以檢查這些工作表,就像檢查標準 <style> 標記一樣,甚至直接在「樣式」窗格中編輯規則。這可讓建構的樣式表與宣告式樣式保持一致,簡化 Shadow DOM、網頁元件和共用設計系統的偵錯作業。

「元素」面板中採用內嵌編輯的樣式表。

Chromium 問題:476399197, 40802935

支援密集格線版面配置

樣式窗格中的格線編輯器現在支援 dense 封裝演算法。編輯 grid-auto-flow 時,您會看到 dense 關鍵字的新核取方塊,可直接透過使用者介面,快速切換標準和密集封裝模式。

格線編輯器中的新密集核取方塊。

感謝 @TheNourhan 的社群貢獻!

Chromium 問題:40791512

簡化隱私權偵錯程序

先前的「隱私權和安全性」面板已重新命名為「安全性」,並經過整理,減少 UI 雜亂情況,以及整合偵錯工作流程。現在,所有隱私權相關資訊 (例如第三方 Cookie 問題和檢查潛在的損壞情形) 都會直接在控制台中回報。

這項變更代表您不必再切換面板來診斷隱私權問題,因為這些問題會與其他記錄和錯誤一併顯示,提供即時脈絡。

Chromium 問題:473796598

其他重點

  • 來源:大幅修正堆疊追蹤架構,解決來源對應延遲載入導致 UI 跳動或意外切換檔案的問題。
  • 網路:發起者快顯視窗現在會使用改良的堆疊追蹤系統,提供更可靠的要求鏈。

無障礙公告

這個版本帶來下列無障礙功能改善項目:

  • 記錄器:螢幕閱讀器現在會在切換「顯示程式碼」側欄時發出通知。
  • 應用程式:現在會正確將「共用儲存空間」、「返回/快取」和「減少跳出追蹤」報表標題讀成標題。
  • 設定:改良了高對比模式對快速鍵項目和顏色按鈕的支援。
  • 一般:改善各種 UI 元素的焦點顯示效果,包括 CSS 總覽面板和媒體播放器項目。

Chromium 問題:479882111478888141479250362