这是 vibe coding 系列的第 4 篇（系列总览）。前几篇讲的都是写代码，但开发之外还有大量网页上的重复工作：打开页面检查、截图、写教程、录演示视频、在 NAS 后台点来点去……这些现在也可以交给 Claude。
两种让 Claude 用浏览器的方式
| 方式 | 适合 | 我的用法 |
|---|---|---|
| chrome-devtools MCP（Claude Code 里用） | 检查自己开发的网页、批量截图、录视频、需要写脚本反复执行的活 | 简单书房的所有自动检查、本站的截图和视频 |
| Claude in Chrome（Anthropic 官方浏览器扩展） | 在你日常用的 Chrome 里直接让 Claude 操作，用的是你已经登录的账号 | 临时的网页操作，比如在某个后台填一批表单 |
chrome-devtools MCP 的安装见《安装篇》。装好后，Claude 能做的事包括：打开网页、点击、输入、截图、读取页面内容、量元素尺寸、看控制台报错和网络请求、模拟手机屏幕和断网。
用途一：自己检查做好的功能
写完代码只跑单元测试不够，界面对不对、点了有没有反应，要真的打开看。这一步交给 Claude 之后，它每次说「改好了」都有实测证据。
点一遍流程：修「从桌面图标打开后返回没反应」这个 bug 时，它分别模拟了三种打开方式——新标签页打开入口地址、直接打开阅读器后点返回、从书页进阅读器再返回——确认每种都回到了正确的页面。
量尺寸，发现我没发现的问题：拍教程截图时，它注意到手机上书页右侧被截掉了。用脚本一量：简介卡片右边缘在 527 像素，屏幕只有 390。顺着查下去，是网格布局被一个不换行的按钮撑宽了，于是有了 1.3.2 这个修复版本。这个 bug 不是我报的，是它自己检查时发现的。
模拟各种环境：手机屏幕、iPhone 的浏览器、断网，都能模拟出来，看提示文字、按钮位置对不对。
检查整站：改完官网后，让它把每个页面在手机和电脑宽度下都打开一遍，检查有没有横向滚动条、有没有加载失败的图片。
怎么说：
改完后打开页面检查一下，手机宽度和电脑宽度都看看
打开首页和这三篇指南，看看有没有横向滚动、坏图
用途二：操作网页后台
NAS、路由器、云服务的管理后台，很多操作只能在网页上点。写 HTTPS 教程时，我对 Claude 说：
你直接访问我的绿联网页端，建立 acme 容器
它就在 UGOS 网页上一步步操作：打开 Docker、新建项目、填好 Compose 配置、打开容器终端执行命令。中间遇到需要登录、需要填 Cloudflare 密钥的地方，它会停下来让我自己来。
它还帮我查清了一个说明书里没写的细节：绿联 DDNS 里「AccessKey ID」那一栏到底该填什么。它只读了输入框的标签和长度，没有读里面的值，最后由我确认是 Cloudflare 的账户 ID。
如果它要改的是正在用的设置（NAS 系统设置、生产环境），它会先问你。需要切换 UGOS 的界面语言来拍中文截图时，它发现语言是「跟随浏览器」，于是只改了自己用的浏览器，没有动 NAS 的设置。
用途三：写教程，自动截图
本站的《绿联 NAS 部署教程》和《从外网用 HTTPS 访问》，截图都是 Claude 在我的 NAS 网页上实际操作时拍的。我当时是这么说的：
把整个 PWA 的设置流程写成指南，如果需要截图或者录视频，可以调用我的绿联网页版，可以调用 Cloudflare，我可以手动登录，但是注意不要暴露我已经设定好的域名和端口
它的做法：
- 先写文字，在需要配图的地方留好位置。
- 实际操作并截图：按教程步骤在网页上点，每到一步截一张。
- 自动脱敏：截图前先把页面上的真实域名、IP、主机名替换成
book.example.com、203.0.113.10这样的示例值；保存时再检查一遍，还有真实值就不保存。 - 不该出现的不拍：能看到密钥的对话框、终端里的真实输出，一律不截图，改成文字说明。
- 演示数据：需要展示软件界面时，它在本机起了一个演示实例，放进公版的《西游记》等名著，用示例证书，完全不碰我真实的数据。
- 图片处理：统一尺寸、转成 WebP 压缩体积，手机截图在网页上限制显示宽度。
用途四：录演示视频
首页的部署演示视频，和《把简单书房装到手机上》里的演示视频，都是 Claude 录的。录法是：
- 用浏览器自带的录屏功能录下页面操作。
- 在页面上叠加模拟指针（会移动、点击时有波纹）和底部中文字幕，看的人知道现在在做什么。
- 操作前清理掉干扰画面的东西：比如名字已存在时的红色校验提示，就隐藏起来，免得观众以为操作错了。
- 浏览器原生的弹窗（比如「安装应用」对话框）录不进去，就用截图做成一段静态画面接上。
- 最后用 ffmpeg 把几段剪辑拼起来、加转场、压缩成 MP4，一分多钟的视频只有一两 MB。
录完它还会抽帧检查：有没有真实信息闪过、字幕对不对、最后一步有没有走完。
怎么说：
录一段视频，演示在绿联上建项目、在设置里打开 HTTPS、装到桌面，加上指针和字幕，不要出现我的域名
怎么说更有效
- 说清楚产出：「写成指南」「每一步截图」「录一段一分钟左右的视频」。
- 说清楚范围：用哪个网站、哪些页面可以操作、哪些不能动。
- 说清楚红线：「不要暴露我的域名和端口」「不要改 NAS 设置」「不要真的部署」。
- 登录自己来：需要登录时它会停下，你在弹出的浏览器窗口里登录好，告诉它「登录好了」。
安全和注意事项
- 账号密码、密钥永远自己填，不要发给 Claude，也不要让它截图能看到密钥的页面。
- 对外的、改设置的操作要它先问：写进 CLAUDE.md 的守则里（「破坏性操作执行前必须确认」），它就会照做。
- 截图发布前自己再看一眼。Claude 会自动替换和检查，但发出去的东西最终由你负责。
- 留意浏览器自己的提示条：用特殊参数启动的 Chrome，顶部可能显示启动参数的原文，里面可能带着你的域名。网页截图拍不到它，但整个窗口截图会拍到。
- WSL 的渲染问题：在 WSL 里截图，有时图标会缺一块、卡片上出现斜线。用软件渲染（SwiftShader）启动 Chrome 可以避免；Claude 也会把这个经验记进记忆。
系列小结
- 总览：成果、整体方法、哪些事必须自己来。
- 安装篇：装好 Claude Code、插件、skill 和 MCP，写好 CLAUDE.md。
- 提要求篇：怎么说，以及从想法到发版的流程。
- 浏览器篇（本文）：把网页上的活交给 Claude。
一句话总结：你负责想清楚要什么、守住底线，剩下的让 Claude 去做，然后看证据验收。