Claude Code 上线了一个全新的浏览器功能。对前端开发者来说，这可能不是一次普通更新，而是一次工作流层面的改变。
过去，如果你用 Claude Code 做前端，流程通常是这样的：先写代码，再打开另一个浏览器标签页，刷新页面，查看效果，然后切回 Claude Code，继续修改那些看起来不太对的地方。
写几行，切一次。
改一点，再刷新一次。
大量时间，就这样浪费在窗口之间的反复横跳上。
现在，Claude Code 直接把浏览器塞进了应用里，终于结束了这种让人崩溃的切换。
更新后的 Claude Code 桌面应用，已经在界面内部集成了浏览器面板。
其中最好用的功能，是你可以直接选中页面元素，或者在截图上进行标注，再把这些信息反馈到提示词中。
从此以后，代码和实时预览终于出现在同一个窗口里。
更关键的是，Claude 不仅能看到页面，还可以主动截图、点击元素，并检查自己生成的内容是否真的符合要求。
我第一时间就觉得，这个功能会非常适合喜欢使用 Claude Code 桌面版的人。
至于终端环境，我之前一直在使用 Claude Code Chrome 扩展来完成类似的操作。
为了看看这个新浏览器到底好不好用，我让 Claude 创建了一个 HTML 联系表单页面。
发现一个低成本 AI 平台：
GPT-5.6 倍率0.1， Claude Code 4.8 都能用，倍率 0.25，还支持 image-2 生图。
适合 Codex / Claude Code 用户。
关注公众号后，后台回复 aihub 即可获取体验额度。
实际体验，比我预想中更惊艳。
接下来，我会完整介绍 Claude Code 浏览器如何运行、Claude 怎样利用它预览并验证自己的工作，以及浏览器面板中都提供了哪些控制选项。
Claude Code 浏览器是什么？
Claude Code 浏览器，是一个直接内置在桌面应用中的多标签浏览器面板。
它和聊天窗口、代码内容处于同一个界面。你既可以在这里预览正在运行的项目，也能浏览外部文档，还可以把页面交给 Claude，让它检查自己刚刚完成的工作。
在 macOS 上，按下 Cmd+Shift+B 就能打开浏览器；在 Windows 上，对应的快捷键是 Ctrl+Shift+B。
除此之外，你也可以在会话工具栏的 Views 菜单中找到它。
第一次打开浏览器面板时，页面会显示一个“Browse and verify”界面，并提供一个 Set up dev server 按钮。
在 Claude 连接正在运行的服务器，或者载入某个网址之前，这里就是浏览器功能的起点。
它主要解决两类需求。
第一类是应用预览。
Claude 可以启动项目的开发服务器，把运行结果直接显示在面板里。随后，它会截取页面画面、检查实际效果，并在结束回复前确认自己的修改是否正确。
第二类是外部浏览。
你可以在项目旁边打开任意网址，例如技术文档、问题追踪页面，或者开发过程中需要参考的其他网站。
整个面板的使用方式和普通浏览器非常相似。
它拥有地址栏、前进与后退按钮，也支持多标签页布局，操作逻辑和大家熟悉的 Chrome、Firefox 基本一致。
在测试过程中，我注意到 Claude Code 浏览器使用的是一个独立的全新配置环境，与个人浏览器完全分开。
你原来保存的登录状态、浏览记录，都不会被自动带入。
换句话说，开发环境和私人账号被隔离开了，既减少干扰，也能降低不必要的风险。
Claude Code 浏览器实测
这次测试，我使用的提示词非常简单：
create a HTML contact form page
Claude 开始工作后不到几秒钟，窗口右上角就出现了一个蓝色通知标记。
这意味着当前会话已经激活了浏览器面板。
Claude 仍然在继续执行任务。又过了几秒，它便完成了文件创建。
不过，第一次测试并不算完全顺利。
浏览器一度卡在白屏状态，没有显示任何预览。如果你也遇到这种情况，只需要先关闭右上角的通知提示，页面通常就能恢复正常。
清除通知后，浏览器终于成功展示了 contact.html。
Claude 创建的是一个完整的联系表单，包含四个字段：姓名、邮箱、主题和留言内容。
除此之外，它还加入了行内校验、邮箱格式检查、浅色与深色主题支持，以及提交成功后的反馈信息。
继续观察后，我发现了一个非常有意思的细节。
每次修改文件后，Claude 都会截取一次页面渲染结果，检查是否存在错误，并在确认界面显示正常后，才结束本轮回复。
对于任何包含 UI 的项目来说，这种能力都能明显缩短反馈链路。
以前，你需要自己切换到浏览器，刷新页面，再判断结果是否正确；现在，预览画面会随着对话一起更新，整个过程中几乎不必离开 Claude Code。
这不是简单地少开了一个窗口。
真正被改变的，是前端开发中最频繁、最琐碎，也最容易打断思路的那部分流程。
外部浏览、安全控制与浏览器选项
Claude Code 的浏览器面板并不只是一个项目预览器。
它本身就是一套完整的多标签浏览器，你可以在正在运行的项目旁边，直接打开任意外部网址。
在 macOS 上使用 Cmd+Shift+B，或者在 Windows 上按下 Ctrl+Shift+B 打开面板，然后在地址栏中输入网址即可。
无论是开发文档、GitHub Issue、设计参考，还是其他编码时需要查看的网站，都可以和当前会话并排显示。
当你点击 Claude Code 聊天区域中的外部链接时，系统会给出两个选项：
在内置浏览器面板中打开，或者在系统默认浏览器中打开。
如果你不想每次都看到选择提示，可以在点击链接时按住 macOS 的 Cmd 键，或者 Windows 的 Ctrl 键，链接便会直接跳转到系统浏览器。
你还可以在内置面板中登录网站，包括通过弹窗完成的 OAuth 登录流程，例如 Google 登录。
对于需要测试登录状态、用户权限和身份验证流程的开发场景，这一点非常实用。
Claude 操作外部网页时会发生什么？
Claude 可以读取外部网站，也能够与页面进行交互。
它使用的，正是检查本地应用时所使用的那套浏览器工具。
不过，在 Claude 第一次操作某个新网站之前，系统会弹出权限卡片。只有在你作出选择后，它才会继续执行。
你一共有三个选项：
Allow once：仅允许 Claude 在本次访问中操作该网站。Always allow：保存授权，之后 Claude 可以继续操作这个网站。
每一个网站都需要单独授权，子域名同样会被视为不同站点。
所有已保存的权限，都可以随时在设置页面中撤销。
即使某个网站已经获得授权，Claude 也不会擅自购买商品、注册账号，或者绕过验证码。
遇到这些敏感操作时，它仍然需要你的参与和确认。
这套设计很重要。
因为浏览器自动化越强，权限边界就越不能模糊。Claude Code 并没有因为追求便利，就直接拿走所有控制权，而是把最终决定留给了用户。
浏览器菜单
浏览器面板右上角的设置菜单中，提供了多项实用控制功能。
各个选项的作用如下。
Open file
将本地 HTML、PDF、图片或视频文件直接载入浏览器面板，无需提前运行开发服务器。
Save screenshot
截取当前浏览器面板中显示的内容，并保存页面当前状态。
Manage allowed sites
查看 Claude 已经获得操作权限的外部网站，并撤销不再需要的授权。
Open links in Browser
控制聊天中的外部链接是否自动在内置浏览器面板中打开。
Disable auto verify
关闭每次编辑后的自动验证。
即使关闭该功能，Claude 仍然能够使用浏览器，只是不会在每次修改后主动检查。只有当你明确要求时，它才会执行验证。
Persist sessions
在开发服务器重启后，继续保留 Cookie 和本地存储数据，避免登录状态被反复清空。
如果你的项目包含登录流程，Persist sessions 会格外有用。
在没有开启该选项的情况下，开发服务器每次重启，当前会话状态都可能被重置。这意味着你必须重新登录，再从头进入需要测试的页面。
而开启会话持久化后，Cookie 和本地存储会被继续保留，你不必因为服务器重启，一遍又一遍地重复身份验证。
配置开发服务器
如果项目中不存在可识别的服务器配置，浏览器面板不会直接显示实时预览，而是提供一个“Set up dev server”按钮。
点击后，Claude 会扫描当前项目，寻找能够运行的服务器。
Press enter or click to view image in full size
在我的测试项目中，目录里只有一个静态的 contact.html 文件。
其中既没有 package.json，也没有 Python 项目文件或 docker-compose.yml。
Claude 判断当前项目不存在可以直接启动的服务，因此没有强行创建或运行服务器配置。
当它无法自动找到服务器时，会给出 .claude/launch.json 的配置格式，让你手动定义启动方式。
配置结构如下：
{
"version": "0.0.1",
"configurations": [
{
"name": ",
"runtimeExecutable": "",
"runtimeArgs": ["],
"port":
}
]
}
你需要把 runtimeExecutable 设置为项目使用的运行环境，例如 yarn、npm、node 或 python。
runtimeArgs 则用来填写启动服务器时需要执行的参数。
不过，在真正写入配置之前，Claude 会先检查你的电脑上已经安装了哪些运行环境。
这一步会触发权限确认卡片。
此时，你依然会看到三个选项：Allow once、Always allow 和 Deny。
选择 Allow once，代表只允许 Claude 在当前会话中执行这次检查。
选择 Always allow，则会保存当前授权。之后遇到类似命令时，Claude 可以直接运行，不必反复弹出提示。
授权完成后，Claude 会执行环境检查，并根据检测结果，为当前项目推荐更加合适的运行方式。
如果项目只有静态 HTML 文件，其实完全可以跳过开发服务器。
直接使用浏览器菜单中的 Open file，就能把本地文件载入面板中查看。
这种方式更简单，也没有必要为了一个静态页面额外搭建服务。
最后
Claude Code 的内置浏览器，属于那种看起来只是增加了一个面板，真正用起来却会改变开发习惯的功能。
在这次测试中，我越来越清楚地意识到：过去那种打开 Chrome、检查元素、切回编辑器、修改代码、再次刷新的工作方式，正在迅速过时。
不是传统浏览器不能用了，而是新的开发流程，已经开始变得更加直接。
代码写完以后，Claude 自己打开页面。
页面出现以后，Claude自己截图。
发现问题以后，它继续修改。
改完以后，它再检查一次。
整个闭环都在同一个窗口中完成，而开发者只需要关注最终目标。
自动验证也是这次更新中让我印象最深的功能之一。
Claude 在每次编辑后检查自己的输出，确实能够减少大量基础性的界面检查工作，也能让不少问题在进入人工代码审查之前，就被提前发现。
它当然无法彻底代替开发者的判断。
复杂交互是否合理、视觉设计是否符合产品定位、用户体验是否真正优秀，仍然需要人来决定。
然而，那些机械、重复、容易遗漏的检查工作，已经可以交给 Claude 先做一遍。
对于前端工程师，以及任何需要开发 UI 组件的人来说，这都不是一个可有可无的小功能。
粤ICP备14082021号
免费POC，
零成本试错
