跳过主要内容
Cline 中的远程浏览器功能允许 AI 助手通过受控的浏览器实例直接与 Web 内容进行交互。这使得多项强大的功能得以实现
  • 查看和与网站交互
  • 测试本地运行的 Web 应用程序
  • 监控控制台日志和错误
  • 执行点击、输入和滚动等浏览器操作

​
Cline 中的远程浏览器

​
什么是远程浏览器？

远程浏览器允许 Cline 直接查看和与网站交互。此功能使 Cline 能够
  • 访问网站并查看其内容
  • 测试本地运行的 Web 应用程序
  • 填写表单和点击元素
  • 捕获所见内容的屏幕截图
  • 滚动页面以查看更多内容

​
如何使用远程浏览器

​
基本命令

您可以使用简单的指令要求 Cline 使用浏览器
  • 打开网站：“使用浏览器检查网站 https://example.com”
  • 点击元素：“点击登录按钮”
  • 输入文本：“在搜索框中输入‘Hello world’”
  • 滚动页面：“向下滚动以查看更多内容”
  • 关闭浏览器：“现在关闭浏览器”

​
示例工作流程

测试 Web 应用程序 
Can you start my React app with "npm start" and then check if it's working properly at https://:3000?
分析网站 
Can you visit https://example.com and tell me what you think about its design and layout?
填写表单 
Please go to https://example.com/contact, fill out the contact form with some test data, and submit it.

​
重要须知

​
一次只能使用一个浏览器

Cline 一次只能使用一个浏览器。如果您想访问另一个网站，可以
  • 要求 Cline 在同一浏览器会话中导航到新 URL
  • 要求 Cline 关闭当前浏览器并打开新浏览器

​
在使用其他工具之前必须关闭浏览器

如果您希望 Cline 在使用浏览器后编辑文件或运行命令，必须先要求它关闭浏览器 
Close the browser and then update the CSS file to fix the alignment issue we saw.

​
Cline 的视角

浏览器具有固定的视口大小（默认为 900x600 像素），类似于小型笔记本电脑屏幕。Cline 会在每次操作后分享屏幕截图，以便您准确了解它所看到的内容。

​
控制台日志

Cline 会捕获浏览器控制台日志，这有助于调试 Web 应用程序。这些日志随每个屏幕截图一起提供。

​
常见用例

  • Web 开发：测试您的网站和 Web 应用程序
  • UI/UX 审查：获取有关网站设计和可用性的反馈
  • 内容研究：让 Cline 浏览网站以收集信息
  • 表单测试：验证表单是否正常工作
  • 响应式设计测试：检查网站在不同屏幕尺寸下的显示效果

​
故障排除

  • 如果网站无法加载：尝试提供带有 http:// 或 https:// 前缀的直接 URL
  • 如果点击无效：尝试更精确地描述元素的位置
  • 如果浏览器似乎卡住：要求 Cline 关闭浏览器并重试

​
在 WSL 中使用 VS Code 搭配远程浏览器

当在 WSL 中运行 VS Code 时，您需要配置 Windows 以允许 WSL 连接到 Chrome。请按照以下步骤操作

​
以管理员身份打开 PowerShell 并运行

# Allow WSL to connect to Chrome's debugging port
New-NetFirewallRule -DisplayName "WSL Chrome Debug" -Direction Inbound -LocalPort 9222 -Protocol TCP -Action Allow

​
在 VS Code 中配置 Cline

  1. 打开 VS Code 设置
  2. 搜索“Cline: Chrome Executable Path”
  3. 将值设置为您的 Chrome 可执行文件路径（例如，C:\Program Files\Google\Chrome\Application\chrome.exe）
现在 Cline 应该能够在 WSL 中使用远程浏览器功能了。