天度 AI 实战库浏览全部案例 ↗

测试本地网页应用,并在一次会话中修复错误

Claude in Chrome中的Claude Code可以编写代码、打开本地服务器、通过界面操作、查看控制台错误并修复问题,而开发者无需接触浏览器。

具体怎么做
Claude in Chrome 扩展通过 `claude --chrome` 或 `/chrome` 与 Claude Code 连接。它共享开发者的真实 Chrome 会话,包括登录信息;新域名需要一次审批。在要求添加仪表板表格筛选器时,Claude 编写了相关组件,打开页面并测试了筛选功能。发现 URL 查询参数未更新,修复了路由逻辑,并通过重新加载确认了修复效果。
做到了什么
该过滤示例经历了三次迭代,开发人员无需使用浏览器即可完成。设置仅限于开发人员的个人工作站:需要可见的 Chrome 窗口,因此无法使用 CI 或无头运行方式,且仅能在 Chrome 和 Edge 中运行。
上手要点
浏览器交互会消耗大量令牌,每次交互约占上下文的 7.7%。作者将 API 定价视为无用的浪费,并指出需要 Max 订阅才能满足高使用需求。

你可以这样试

使用 Claude Code

使用[启动命令]在本地启动应用,然后在[localhost URL]通过Chrome打开它,并点击[功能或流程]。查看浏览器控制台和网络错误,在代码中找出问题原因,并进行修复。重复此过程,直到流程正常运行且无控制台错误。最后总结你所做的修改内容。未经我许可,请勿提交或推送任何内容。