Remote Browser 支持
远程浏览器支持允许 Cline 利用远程 Chrome 实例,利用与某些 Web 开发测试用例相关的身份验证令牌和会话 cookie。
Cline 中的 Remote Browser 功能允许 AI Assistant 直接通过受控浏览器实例与 Web 内容进行交互。这将启用几个强大的功能:
查看网站并与之交互
测试本地运行的 Web 应用程序
监控控制台日志和错误
执行浏览器作,例如单击、键入和滚动
Cline 中的远程浏览器
什么是远程浏览器?
Remote Browser 允许 Cline 直接查看网站并与之交互。此功能使 Cline 能够:
访问网站并查看其内容
测试本地运行的 Web 应用程序
填写表单并单击元素
捕获所见内容的屏幕截图
滚动浏览页面以查看更多内容
如何使用 Remote Browser
基本命令
您可以通过简单的说明让 Cline 使用浏览器:
点击元素 :“Click the login button”
键入文本 :“在搜索框中键入 '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
)
Cline 现在应该能够从 WSL 中使用 Remote Browser 功能。
Last updated