Chrome 浏览器集成

Chrome 集成是 Claude Code 伸向浏览器的手。装上它，Claude 就能开页面、点按钮、填表单、跑一遍前端流程——还能截一张图回来，和设计稿逐像素比对。在 best-practice 仓库的「Hot」概念表里，它和 Computer Use 是邻居——都属于「把 Claude 的手伸到代码之外」的那一类。

它解决了什么问题

前端开发的痛点不在写代码，在「写完得看」。改一个样式，得切到浏览器刷新；调一个交互，得点一遍流程验证；交付前还得和设计稿对一遍像素。这些活琐碎、重复、容易偷懒跳过。Chrome 集成让 Claude 替你干——它开页面、它点流程、它截图，结果递到你眼前。

怎么开

两个 flag 一开一关：

# 启用 Chrome 集成
claude --chrome

# 明确禁用（覆盖默认行为）
claude --no-chrome

--no-chrome 的存在，意味着 Chrome 集成可能有默认开启的版本/场景——当你不想要它时，用这个 flag 明确关掉。具体默认行为以官方最新文档为准。

它能干什么

开起来后，Claude 多了一组「浏览器之手」：

能力	用途
打开网页、导航	跑到指定 URL 看页面
点击、输入	模拟用户操作，走一遍交互流程
截图	抓当前页面状态
读取 DOM	看页面结构、抓内容

Web 自动化与测试

最直接的用法是自动化测试——让 Claude 当一个不知疲倦的 QA：

# 让 Claude 开页面、走登录流程、验证结果
claude --chrome "打开 http://localhost:3000，走一遍登录，截图每一步给我看"

适合回归测试、表单提交流程、跨页交互验证——这些手动点要半小时，Claude 点一遍几分钟。

截图比对设计稿

best-practices 里专门提到「take a screenshot」这条——让 Claude 跑起来页面后截一张图，和设计稿放一块比：

> 把页面截个图，和设计稿 design.png 比对，告诉我哪里不一致

这把「视觉验收」从人眼逐像素对，变成 Claude 帮你看一遍、列出差异点。设计走查、像素还原校验、UI 回归——都能这么干。

和 Computer Use 的区别

Chrome 集成和 Computer Use 都让 Claude 「操作可见界面」，但定位不同：

	Chrome 集成	Computer Use
作用域	专管浏览器	整个桌面、任何 GUI
接入方式	`--chrome` flag	computer-use MCP server
适合	web 自动化、前端测试、设计稿比对	桌面应用、跨应用流程、无 CLI 的 GUI 工具

要测 web？Chrome 集成更专、更轻。要点桌面应用？才需要上 Computer Use。两者也可叠加——浏览器里测不了的，再请 Computer Use 接管桌面。

什么时候用

适合：

前端回归测试——改完样式让它点一遍验证。
设计稿走查——截图比对，列差异点。
表单/流程自动化——走一遍提交、走一遍登录。
抓页面内容——把动态渲染后的 DOM 抓回来分析。

不适合：

纯后端、纯命令行的活——没必要开浏览器。
一次性看一眼页面——直接开浏览器自己看更快。

小贴士：跑前端测试时，让 Claude 开发服务器先跑起来（npm run dev），再 --chrome 接入 localhost，是个常见的本地闭环。敏感站点记得别让它乱提交真实数据。

一句话总结

Chrome 集成让 Claude 接管浏览器——--chrome 启用、--no-chrome 禁用，做 web 自动化与测试，截图比对设计稿。专管浏览器，比 Computer Use 更轻；前端回归、设计走查、流程自动化是它的主场。

下一站，回到 Auto Mode 看看怎么平衡这套能力里的效率与安全，或去自动化与 CI 把这些能力串进流水线。🚀