2025-11-28 · 实战
32
实战 · 2025-11-28

2025 年最好用的 Claude Code Browser MCP 实测:Chrome DevTools MCP 彻底干翻一切对手

过去一个月,我把市面上所有能找到的 Browser MCP 都试了个遍(Playwright、Browserbase、Browser Use、browsermcp.io……),最后只留下一句话:

Chrome DevTools MCP 是目前唯一配得上 Claude Opus 4.5 的浏览器控制工具,其他的全部卸载。

这不是标题党,这是血泪经验。

为什么其他 MCP 都让我破防了?

MCP 名称
真实用户评价(X 真实截图)
我的真实感受

browsermcp.io
“文档看着挺好,实际跑起来一堆莫名其妙错误”
配置半小时才能用一次,成功率 60%

Playwright MCP
“自动化测试神器,但日常调试太重”
启动慢、截图延迟高

Browserbase MCP
“云端浏览器很强,但本地开发完全多余”
贵 + 偶尔掉线

Browser Use
“三天两头崩溃,flaky 得想砸电脑”
已经卸载三次了

而 Chrome DevTools MCP?直接贴 X 上真实用户截图:

30 秒一键安装(亲测 100% 成功)

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest --port 9222 --auto-accept

就这一行。完事。

什么手动改 JSON、什么全局配置、什么信任服务器?全都不需要。

安装完直接问 Claude:

“打开 Hacker News,截张图给我,然后分析一下今天的 Top 10 标题情绪”

30 秒后你会收到这张图 + 完整分析:

真实使用场景(我每天都在干的事)

  1. 直接让 Claude 帮我调性能:
    “打开 devtools → Performance → 给我录 10 秒然后分析 Waterfall,告诉我最大渲染阻塞在哪”
  2. 调试 React/Vue 组件:
    “选中这个按钮,在 Elements 面板高亮它,然后在 Console 里给我打出它的所有 props 和 state”
  3. 自动截图对比 UI 改动:
    “打开本地 localhost:3000 的登录页和昨天的版本对比,告诉我视觉差异”
  4. 一键抓取任何网站的网络请求、Cookie、LocalStorage

这些操作在其他 MCP 上要么做不到,要么慢得像乌龟。

如何彻底删除某个 MCP(防坑必备)

很多人问我怎么卸载,官方文档根本没写,我直接给你终极清理三连:

# 1. 删除 Claude Code 注册记录(核心!)
claude mcp remove chrome-devtools

# 2. 杀掉残留进程
pkill -f chrome-devtools-mcp
pkill -f "remote-debugging-port=9222"

# 3. 一行全自动清理(懒人福音)
claude mcp remove chrome-devtools && pkill -f chrome-devtools-mcp && pkill -f "remote-debugging-port=9222"

结语

2025 年了,别再折腾那些半成品 MCP 了。
直接上 Chrome DevTools MCP,然后把省下来的时间拿去喝咖啡。

GitHub(已 15.5k stars):
https://github.com/ChromeDevTools/chrome-devtools-mcp

一键安装命令(再贴一遍,怕你找不到):

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest --port 9222 --auto-accept

用了就回不去了,真的。

目录 最新
← 左侧翻上一屏 · 右侧翻下一屏 · 中间唤出菜单