别让 Claude Code 盲写前端：在新加坡 Mac mini 上接好 Chrome DevTools MCP，自己打开页面查报错

Claude Code 写前端，最大的问题是「看不见」

让 Claude Code 改一个页面，它能很快写完组件和样式，也能跑通单元测试。可页面真正打开后是什么样子、控制台有没有报红、某个接口是不是 404、首屏是不是变慢了，它默认是看不到的。结果就是：Agent 说「已完成」，你打开浏览器一看，按钮点了没反应。

最近不少开发者的做法是给 Claude Code 接上 Chrome DevTools MCP。MCP 是让 Claude 调用外部工具的标准接口，Chrome DevTools MCP 则把浏览器的调试能力交给 Agent：打开网址、点击、截图、读控制台日志、看网络请求、录性能数据。这样 Claude Code 改完代码可以自己验证，再把证据交给你。

这套东西最适合放在一台常开的 Mac mini 上：浏览器、本地开发服务器和 Claude Code 都在同一台机器，你出门或换设备，随时远程接回同一个现场。下面按步骤配好。

准备清单

• 一台常开的 Mac mini，已装好 Claude Code，并用你自己的账号登录
• 已安装 Node.js（brew install node），能正常运行 npx
• 已安装 Google Chrome
• 一个前端项目，本地能用 npm run dev 之类的命令启动开发服务器
• 建议装好 tmux，让开发服务器和 Claude Code 会话在你断开远程后继续运行

步骤一：先把开发服务器挂在 tmux 里

浏览器要验证的是正在运行的页面，所以先让项目跑起来：

1. tmux new -s web，进入项目目录，执行 npm run dev（以你项目的启动命令为准）。
2. 记下终端里显示的本地地址，例如 http://localhost:5173。
3. 按 Ctrl-b d 脱离，开发服务器继续在 Mac mini 上运行。

这样 Claude Code 每次改完代码，热更新后的页面就在同一台机器的本地地址上，不需要对外开放任何端口。

步骤二：只给这个项目添加 Chrome DevTools MCP

在项目根目录执行：

1. claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest
2. claude mcp list，确认列表里出现 chrome-devtools。

这里特意用了 --scope project：配置会写进项目里的 .mcp.json，只有在这个项目里打开 Claude Code 时才会加载。如果你习惯所有项目都能用，也可以改成 --scope user，但下面第五步会讲为什么不建议什么都全局装。

chrome-devtools-mcp 还支持无头模式、独立临时配置文件等启动参数，具体名称以 npx chrome-devtools-mcp@latest --help 输出为准。远程桌面不常开时，可以优先选择不弹出窗口的无头模式；需要亲眼看页面时，再用 UU 远程连接到桌面观察。

步骤三：在 Claude Code 里确认工具可用

1. tmux new -s cc-web，进入项目目录，执行 claude。
2. 在会话里输入 /mcp，看到 chrome-devtools 显示为已连接。
3. 第一次调用时 Claude Code 会询问是否允许使用这些工具。按需允许；如果之前在 settings.json 里写过权限规则，可以把常用的只读类工具（截图、读控制台、读网络请求）加进允许列表，点击和填表单之类的操作保留确认。

步骤四：给 Claude Code 一个「改完必须自证」的验收流程

工具接上以后，关键在于让它每次都按同一套流程验证。可以把下面这段写进项目的 CLAUDE.md：

1. 改完前端代码后，用浏览器打开 http://localhost:5173 对应的页面。
2. 读取控制台，有任何报错先修，不要汇报「已完成」。
3. 查看网络请求，确认没有失败的接口请求。
4. 对改动过的页面截图，和改动前的截图一起说明差异。
5. 涉及首屏或资源体积时，跑一次性能审计，记录改动前后的分数，再决定是否继续优化。

然后给出具体任务，例如「把注册页的表单校验改成实时提示，按 CLAUDE.md 里的验收流程自证」。Claude Code 会改代码、等热更新、打开页面、读报错、截图，最后给你一份带证据的结论。性能分数只作为前后对比的参考，同一台机器、同一个页面、同样的条件下比较才有意义。

步骤五：MCP 不是装得越多越好

这一步很容易被忽略。每个 MCP 服务器都会把自己的工具说明放进 Claude 的上下文，装得越多，你还没开口就先占掉一截上下文；同时开几个 Claude Code 会话时，每个会话可能都会把配置里的 MCP 服务器拉起来，浏览器类的进程尤其吃内存。

建议这样控制：

• 按项目启用：只有前端项目的 .mcp.json 里放 Chrome DevTools MCP，后端和脚本项目不加。
• 定期清理：用 claude mcp list 看一遍，用不到的用 claude mcp remove 名称 删掉。
• 并行时留余量：几个前端会话同时跑浏览器时，用「活动监视器」看内存，必要时减少并行数量。
• 长任务注意上下文：截图和大段日志都会占上下文，让 Claude Code 只读报错部分，不要每一步都整页截图。

整机独享在这里很实际：一人一台物理机，内存和 CPU 不和别人抢，你可以按自己的项目决定开几个浏览器、几个会话。

步骤六：需要登录的页面，自己登，不把密码交给 Agent

很多页面要登录后才能测。正确的做法是：

1. 测试优先用开发环境的测试账号，而不是你的正式账号。
2. 需要登录态时，你通过 UU 远程连接到 Mac mini 桌面，自己在浏览器里登录一次，再让 Claude Code 在已登录的页面上继续操作。
3. 不要把密码写进提示词、CLAUDE.md 或代码仓库。
4. 遇到验证码或人机验证，用该服务官方提供的测试配置或在测试环境关闭，不要让 Agent 去绕过线上的验证。

为什么放在一台常开的新加坡整机上

Chrome DevTools MCP 需要一个真实运行的浏览器，加上开发服务器和 Claude Code 会话，三样东西都绑在同一台机器上。放在笔记本上，合盖就全断；放在一台常开的新加坡 Mac mini 上：

• 开发服务器、浏览器和 Claude Code 会话可以一直运行，晚上留任务、早上看结论
• 用 SSH 接回终端看进度，用 UU 远程连接看浏览器里的实际页面
• 网络环境稳定，页面验证的结果不会被你本地的网络波动打乱

SgRent 提供的就是这样的环境：新加坡家庭宽带原生 IP 上的实体 Mac mini M6，整机独享（一人一台物理机），支持 SSH 和 UU 远程连接，FileVault 全盘加密，退租时抹机重装。新客户整机租用月付 ¥699 起，季付、半年付、年付有折扣。实际延迟取决于你本地的网络线路，建议先用一个月把「改完自己打开页面验证」这条流程跑顺。

小结

• Claude Code 写前端默认看不到页面，接上 Chrome DevTools MCP 后可以自己打开页面、读控制台和网络请求
• 用 claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest 按项目添加，/mcp 确认已连接
• 在 CLAUDE.md 写清「改完必须自证」的验收流程：无报错、无失败请求、有截图、性能前后对比
• MCP 按项目启用、定期清理，并行时留意内存和上下文
• 登录自己来，不把密码交给 Agent，也不绕过线上验证

有问题可以在 Telegram 联系 @singatao，或直接看 价格与付款周期。

返回首页 · 更多文章