前端联调：让 Claude Code 自己开浏览器验证改动（Chrome 集成）

这篇教程解决一个问题：改前端的时候，Claude Code 改完代码说“好了”，但页面到底对不对它并没有看过。怎么让它自己打开浏览器看一眼。

后端的改动有测试可以跑。前端的很多问题只有在浏览器里才看得出来：按钮点了没反应、表单校验的提示没出来、控制台里一片红。这些以前要你自己去看，再把现象描述给它。

官方的办法是 Chrome 集成：Claude Code 连上你浏览器里的 Claude in Chrome 扩展，就能自己开标签页、点击、输入、读控制台和页面结构。改代码和在浏览器里验证，在同一个会话里一气做完。

本站的实测环境是一台没有图形界面的服务器，这一篇测不了，全部按官方文档整理。

先看这一条：通过中转站用不了

官方文档列的前提里有两条，直接决定了你能不能用：

要有 Anthropic 的订阅：Pro、Max、Team 或 Enterprise。
要用 /login 登录。 文档写明：用 API key 认证，或者用 claude setup-token 生成的长期令牌认证时，Claude Code 会让 Chrome 集成保持关闭，加了 --chrome 参数也一样，因为浏览器扩展没法用这类凭据认证。

通过 Amazon Bedrock、Google Cloud、Microsoft Foundry 这些第三方服务用 Claude 的，文档说同样用不了，需要另外有一个 claude.ai 的账号。

通过中转站用 Claude Code，走的就是 API key 这条路。所以通过中转站用的读者，这个功能目前用不上。这是从文档对认证方式的要求得出的结论，我们没有实际去试。

想达到类似效果的两个方向，都不在这篇的范围里，本站也没有实测：

用一个做浏览器自动化的 MCP 服务器，把浏览器作为工具接进来。接 MCP 服务器的办法见接 MCP 服务器实战。
让它写端到端测试（比如 Playwright 的测试脚本）并在命令行里运行，用测试结果代替“看一眼”。

下面的内容写给用订阅账号登录的读者。

它能做什么

连上之后，浏览器里的操作和写代码可以串在一个流程里。文档列的能力：

能力	说明
现场调试	直接读控制台报错和页面的 DOM 状态，然后去改引起问题的代码
对设计稿	照设计稿做出界面，再在浏览器里打开看对不对得上
测试网页应用	试表单校验、检查界面有没有走样、把用户的操作路径走一遍
操作要登录的应用	Google Docs、Gmail、Notion 这类你已经登录的应用，不需要另接 API
抽取数据	从网页里取出结构化的信息存到本地
重复性操作	录入数据、填表单、跨几个网站的流程
上传文件	把你机器上的文件附到页面的上传框里
录屏	把一段操作录成 GIF

两个重要的特点：

它用的是你的浏览器，共享你的登录状态。 你登录了哪些网站，它就能进哪些。这是方便之处，也是下面“权限”一节要认真看的原因。
操作是看得见的。 它在一个可见的 Chrome 窗口里实时操作，开的标签页归在一个标签组里。遇到登录页或者验证码，它会停下来让你自己处理。

需要准备什么

浏览器：Chrome 或 Edge。Brave、Arc、Vivaldi、Opera 这些基于 Chromium 的浏览器也能检测到。
Claude in Chrome 扩展，1.0.36 或更新，在 Chrome 应用商店安装。
Claude Code，用订阅账号 /login 登录过。

不支持的环境：文档写明 WSL（Windows 上的 Linux 子系统）里不能用。

开启

启动时带上参数：

claude --chrome

第一次这样启动，会出现一个只显示一次的说明，介绍这项集成和站点权限是怎么回事，回车继续。

然后直接说要它做什么。文档的例子：

Go to code.claude.com/docs, click on the search box,
type "hooks", and tell me what results appear

它在做某个浏览器操作之前如果来问你，确认框以 Claude in Chrome wants to 开头，里面有一个选项是“这次会话里允许对这个网站的所有操作”。

随时输入 /chrome 可以看连接状态、管理权限、重新连接扩展、选择用哪个浏览器。状态面板里显示 Status: Enabled 和 Extension: Installed，就是连上了。

没装扩展时

交互式会话里，它需要用浏览器而又没检测到扩展时，会弹一个标题为 “Claude wants to use your browser” 的提示，一次会话最多问一回，三个选项：

Install extension：打开扩展的安装页，带你装完，装好后在同一个会话里接着干。
Not now：这次不用浏览器，继续做事。
Don’t ask again：以后不再问。之后仍然可以用 /chrome 自己设置。

要不要默认开着

在 /chrome 里可以选 Enabled by default，以后不带 --chrome 也会连上。

文档对这个选项有一句提醒：默认开着会增加上下文的占用，因为浏览器的那些工具和它们的说明每次都会加载。发现上下文用得多了，就关掉它，需要时再用 --chrome。上下文里的固定开销怎么看，见会话和上下文。

VS Code 扩展里也能用，在输入框里打 @browser 连接，和命令行共用同一个“默认开启”的设置。

权限：它能动哪些网站

这是最该花时间看的一节，因为它用的是你登录着的浏览器。

站点级的权限由 Chrome 扩展管。 它能浏览、点击、输入的网站，在扩展的设置里控制。

auto 模式下有一个例外。 文档写明：auto 模式的分类器自己批准了对某个网站的一次浏览器调用时，扩展会跳过它自己的那一次站点检查。除非你的权限规则里明确拒绝了 Claude in Chrome 访问任何网站。也就是说，在 auto 模式下，扩展里的站点设置不是最后一道关。

项目不能替你打开这个功能。 如果某个仓库的 .claude/settings.json 里试图通过环境变量把 Chrome 集成打开，Claude Code 会忽略它，并在终端里给出警告。文档的解释很直白：一个你检出来的仓库，不应该有能力把 Claude 接到你的浏览器上。

几条实际的建议。第三条来自官方文档，其余是我们的看法：

让它操作本地开发的页面（localhost）是这个功能最稳妥的用法。
让它动你登录着的正式环境后台、邮箱、网银之前，想清楚它可能点到什么。
录下来的 GIF 会包含浏览器里看得见的一切，包括登录后页面上的账号信息。文档提醒发给团队以外的人之前先看一遍。
做这类事的时候，可以单独开一个浏览器配置（profile），里面只登录这次任务需要的网站。

plan 模式下，它录 GIF、开新标签页、运行快捷指令之前会先问你。

几种常见的用法

以下提示词来自官方文档的例子。

验证本地的页面。 改完代码，让它去试：

I just updated the login form validation. Can you open localhost:3000,
try submitting the form with invalid data, and check if the error
messages appear correctly?

看控制台报错。 文档建议告诉它找哪一类信息，不要让它把全部控制台输出都读回来，日志可能很长：

Open the dashboard page and check the console for any errors when
the page loads.

批量填表单。 它读本地的文件，再到网页上逐条录入：

I have a spreadsheet of customer contacts in contacts.csv. For each row,
go to the CRM at crm.example.com, click "Add Contact", and fill in the
name, email, and phone fields.

从页面抽数据。

Go to the product listings page and extract the name, price, and
availability for each item. Save the results as a CSV file.

录一段操作演示。

Record a GIF showing how to complete the checkout flow, from adding
an item to the cart through to the confirmation page.

想知道它一共有哪些浏览器工具：输入 /mcp，选 claude-in-chrome，再选 View tools。

上传文件的几条限制

它可以把你机器上的文件附到页面的上传框里。文档列了它会拒绝或者失败的情况：

读不了的文件传不了。 权限规则里拒绝了 Read 的文件，同样不能上传。
一次上传的文件合计不超过 10MB。
有多个硬链接的文件会被拒绝。 node_modules 这类包管理器的目录里很常见。复制一份再传。
名字像凭据的文件会被拒绝。 比如 .env、.pem 或 .key 文件、.ssh 下的任何东西。

连不上的时候

检测不到扩展。 按顺序查：

在 chrome://extensions 里确认扩展装了并且启用着。
claude --version 确认 Claude Code 是新的。
Chrome 是不是开着。
输入 /chrome，选 Reconnect extension。
还不行，把 Claude Code 和 Chrome 都重启。

第一次开启这项集成时，Claude Code 会写一个配置文件，Chrome 在启动时才读它。所以第一次没检测到，重启一次 Chrome 往往就好了。

浏览器没反应。 先看页面上是不是弹着 alert、confirm 这类对话框。JavaScript 的对话框会挡住浏览器的事件，它收不到指令。你手动关掉，再告诉它继续。还不行就让它开一个新标签页重试。

用着用着断了。 长时间的会话里扩展的后台进程可能进入休眠。输入 /chrome 选 Reconnect extension。

提示 “Browser extension is not connected”。 除了扩展没装没开，还有一种情况：你属于不止一个 claude.ai 组织，而扩展登录的组织和 Claude Code 登录的不是同一个。用 /status 看 Claude Code 这边的 Organization，让扩展登录到同一个。文档提醒退出扩展的登录会丢掉里面保存的快捷指令和定时任务，所以先试别的办法。

桌面应用里的另一条路

Claude 桌面应用的 Code 标签页有自己的浏览器窗格：在应用里启动开发服务器，页面开在窗格里，它能看到运行中的页面、测接口、看日志，然后据此修改。这和 Chrome 集成是两套东西，不需要 Chrome 扩展。桌面应用的介绍见在 VS Code、JetBrains 和桌面应用里用 Claude Code。

这篇没有覆盖到的

全篇没有实测。 实测环境没有图形界面，也没有订阅账号。按钮名称、对话框的文字照官方文档写，版本更新后可能有出入。
“通过中转站用不了”是按文档推出来的，没有实际验证。
替代做法（浏览器自动化的 MCP 服务器、端到端测试）只提了方向，没有写具体步骤，本站也没有试。
企业环境的管理策略、IP 白名单、HIPAA 相关的限制没有展开。
Windows 上的几个特有问题只在文档里有，这里没有列。

系列的下一篇：大仓库和 monorepo 里用 Claude Code。
没有浏览器可用时，靠测试来验证改动：给老代码补测试。
权限模式和 auto 模式的分类器是怎么回事：权限模式怎么选。