在使用 AI 編程過程中，想讓 AI 幫忙寫一個前端頁面，他哐哐哐寫一大堆，結果一運行不是樣式錯亂，就是控制臺報錯。這個時候你把截圖發給 AI，它道個歉，然后再給你生成一版錯誤的代碼。

因為 AI它并不知道自己寫的代碼在瀏覽器里面發生了什么。就像谷歌在官方博客中說的，此時的 AI 相當于是在蒙著眼睛狂奔。

之前，我們用 Playwright MCP 來解決這個問題，但是 Playwright 有一個問題就是，它配置起來相對來說比較麻煩，執行的時候消耗的 Token 量非常多。

現在游戲規則變了，Google 官方親自下場了！他們推出了Chrome DevTools MCP，一個更輕、更快、更強的原生解決方案。

可以說，它讓我們的AI Agent，第一次真正長出了火眼金睛。【gzh：和平本記】

1、Chrome DevTools MCP強在哪？

1、出身正統，Google 親兒子

我們之前用的Playwright MCP，非常強大。可以操控它自己拉起的 Chromium，直接和 Chrome 內部的調試接口通信，從而做到操控瀏覽器。

但是你如果想讓它操作你的真實 Chrome 瀏覽器（你平時用的那個，帶插件、帶登錄態）。這時候需要一個 Chrome 擴展當橋，把 AI 指令（來自 MCP）安全地轉發給真實瀏覽器

另外一點，Playwright 畢竟是一個第三方社區方案。萬一哪天Chrome更新了，會不會這個橋接就失效了？這種非官方的工具多多少少會有那么一點點風險。

而 Chrome DevTools MCP是谷歌Chrome團隊的親兒子，是直接從瀏覽器內核層面提供的原生支持。這意味著它擁有最高的穩定性和兼容性。

2、配置簡單，開箱即用

想要操作瀏覽器，不需要專門安裝一個額外的橋接擴展程序。只需要一段 JSON 代碼，配置好 MCP 即可。【gzh：和平本記】

  {
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

你的工作，就是復制粘貼上面的 JSON 代碼到 MCP 客戶端。剩下的，交給谷歌。

3、Token消耗更低，更省錢

如果你是 AI agent 重度用戶，那你肯定知道在 AI 編程過程中，最寶貴的資源莫過于上下文窗口。每一個Token都關乎成本，也決定了我們的AI能記住多少事。

Playwright MCP雖然好用，但它作為一個話癆，每次交互都會吃掉大量的Token。

Chrome DevTools MCP在這方面做出了巨大的優化。因為它更原生，所以傳遞信息所需的廢話更少，效率更高。

別的工具想要操作 Chrome 瀏覽器，就需要中間有一個翻譯官，信息傳遞過程中多了一個角色，就會造成信息的冗余或者缺失。

經過實測，在完成同樣一個任務后，Playwright MCP消耗了26%（52k/200k tokens）的上下文，而Chrome DevTools MCP只消耗了21%（43k/200k tokens）

這5%的差距，可能就是你在一次長對話中，AI會不會提前失憶的關鍵。日積月累，這為你省下的不僅是Token，更是實打實的金錢和效率。

4、功能更強大

Playwright的核心能力，本質上還是模擬用戶操作。比如，點點鼠標、填填表單。

它能告訴 AI 做了什么，但很難告訴AI發生了什么，比如控制臺里有沒有報錯？某個網絡請求是不是404了？

Chrome DevTools MCP 則完全是另一個維度。它把整個Chrome開發者工具（就是你按F12看到的那個）的能力都開放給了AI。比如：

1）調試實時樣式和布局問題

讓 AI 助手連接到實時頁面，檢查 DOM 和 CSS，并根據瀏覽器中的實時數據，針對諸如元素溢出等復雜的布局問題提供具體的修復建議。

2）自動化性能審計

讓 AI 助手運行性能跟蹤，分析結果，并深入調查特定的性能問題

3）分析控制臺問題

包括讀取所有控制臺日志，自動發現錯誤。分析所有網絡請求，定位 API 問題。【gzh：和平本記】

2、實操教程，讓你迅速上手

1、要求

1?? Node.js 22.12.0 以上

2?? npm

驗證方式：

2、安裝

把下面的 MCP 節省配置按需復制到你的 MCP 客戶端中。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

Claude Code CLI 安裝：

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

3、案例演示

1）模擬用戶行為

幫我打開 bilibili，然后搜索影視颶風，給我總結影視颶風最近一個月的視頻鏈接

最后 AI 給出的結果：

2）診斷網絡和控制臺錯誤

幫我查看一下嗶哩嗶哩前端控制臺有沒有什么報錯

它會自動幫你去查看頁面控制臺查看錯誤

3）實時調試樣式和布局問題

在嗶哩嗶哩找到影視颶風的主頁，然后把影視颶風賬號名稱這四個字顏色換成綠色【gzh：和平本記】

更換前的樣子：

更換后的樣子：

3、總結

Chrome DevTools MCP 的發布雖然僅僅是一個工具的升級，但是當AI擁有了視覺（頁面截圖）和感知（DevTools），它解決問題的能力將呈指數級增長。

通過為 AI 代理提供視覺和分析能力，它將 AI 從一個單純的代碼編寫者轉變為一個能夠理解、調試和優化 Web 應用的真正助手，極大地提升了我們的開發效率