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