远程浏览器支持
Caret 中的远程浏览器功能允许 AI 助手通过受控的浏览器实例直接与 Web 内容交互。这提供了几个强大的功能：
- 查看和与网站交互
- 测试本地运行的 Web 应用程序
- 监控控制台日志和错误
- 执行浏览器操作，如点击、输入和滚动
Caret 中的远程浏览器
什么是远程浏览器？
远程浏览器允许 Caret 直接查看和与网站交互。此功能使 Caret 能够：
- 访问网站并查看其内容
- 测试您本地运行的 Web 应用程序
- 填写表单并点击元素
- 捕获它所看到的屏幕截图
- 滚动页面以查看更多内容
如何使用远程浏览器
基本命令
您可以通过简单的指令要求 Caret 使用浏览器：
- 打开网站："使用浏览器检查 https://example.com 上的网站"
- 点击元素："点击登录按钮"
- 输入文本："在搜索框中输入'Hello world'"
- 滚动页面："向下滚动以查看更多内容"
- 关闭浏览器："现在关闭浏览器"
示例工作流
测试 Web 应用程序：
您能用"npm start"启动我的 React 应用程序，然后检查它是否在 http://localhost:3000 正常工作吗？
分析网站：
您能访问 https://example.com 并告诉我您对其设计和布局的看法吗？
填写表单：
请访问 https://example.com/contact，用一些测试数据填写联系表单并提交。
需要了解的重要事项
一次一个浏览器
Caret 一次只能使用一个浏览器。如果您想访问不同的网站，可以：
- 要求 Caret 在同一浏览器会话中导航到新 URL
- 要求 Caret 关闭当前浏览器并打开新的
在使用其他工具之前必须关闭浏览器
如果您希望 Caret 在使用浏览器后编辑文件或运行命令，必须首先要求它关闭浏览器：
关闭浏览器，然后更新 CSS 文件以修复我们看到的对齐问题。
Caret 看到的内容
浏览器具有固定的视口大小（默认为 900x600 像素），类似于小笔记本电脑屏幕。Caret 会在每次操作后分享屏幕截图，这样您就能准确看到它所看到的内容。
控制台日志
Caret 捕获浏览器控制台日志，这对调试 Web 应用程序很有帮助。这些日志包含在每个屏幕截图中。
常见用例
- Web 开发：测试您的网站和 Web 应用程序
- UI/UX 审查：获得关于网站设计和可用性的反馈
- 内容研究：让 Caret 浏览网站收集信息
- 表单测试：验证表单是否正常工作
- 响应式设计测试：检查网站在不同屏幕尺寸下的外观
故障排除
- 如果网站无法加载：尝试提供带有 http:// 或 https:// 前缀的直接 URL
- 如果点击不起作用：尝试更准确地描述元素的位置
- 如果浏览器似乎卡住：要求 Caret 关闭浏览器并重试
在 WSL 中的 VS Code 中使用远程浏览器
在 WSL 中运行 VS Code 时，您需要配置 Windows 以允许 WSL 连接到 Chrome。按照以下步骤操作：
以管理员身份打开 PowerShell 并运行：
# 允许 WSL 连接到 Chrome 的调试端口
New-NetFirewallRule -DisplayName "WSL Chrome Debug" -Direction Inbound -LocalPort 9222 -Protocol TCP -Action Allow
在 VS Code 中配置 Caret：
- 打开 VS Code 设置
- 搜索"Caret: Chrome Executable Path"
- 将值设置为您的 Chrome 可执行文件的路径（例如，
C:\Program Files\Google\Chrome\Application\chrome.exe）
现在 Caret 应该能够从 WSL 内部使用远程浏览器功能。