> ## Documentation Index
> Fetch the complete documentation index at: https://cat.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 远程浏览器支持

> 远程浏览器支持允许 Cline 利用远程 Chrome 实例，利用与某些 Web 开发测试用例相关的身份验证令牌和会话 cookie。

Cline 中的远程浏览器功能允许 AI 助手通过受控的浏览器实例直接与 Web 内容交互。这启用了几个强大的功能：

* 查看网站并与之交互
* 测试本地运行的 Web 应用程序
* 监控控制台日志和错误
* 执行浏览器操作，如点击、输入和滚动

## Cline 中的远程浏览器

### 什么是远程浏览器？

远程浏览器允许 Cline 直接查看网站并与之交互。此功能使 Cline 能够：

* 访问网站并查看其内容
* 测试您本地运行的 Web 应用程序
* 填写表单并点击元素
* 捕获其所见内容的屏幕截图
* 滚动页面以查看更多内容

### 如何使用远程浏览器

#### 基本命令

您可以用简单的指令要求 Cline 使用浏览器：

* **打开网站**："使用浏览器检查 [https://example.com](https://example.com/) 的网站"
* **点击元素**："点击登录按钮"
* **输入文本**："在搜索框中输入'Hello world'"
* **滚动页面**："向下滚动以查看更多内容"
* **关闭浏览器**："现在关闭浏览器"

#### 示例工作流

**测试 Web 应用程序：**

```javascript
可以用"npm start"启动我的 React 应用，然后检查它在 http://localhost:3000 是否正常工作吗？
```

**分析网站：**

```javascript
您可以访问 https://example.com 并告诉我您对其设计和布局的看法吗？
```

**填写表单：**

```javascript
请访问 https://example.com/contact，用一些测试数据填写联系表单，并提交。
```

### 需要了解的重要事项

#### 一次一个浏览器

Cline 一次只能使用一个浏览器。如果您想访问不同的网站，您可以：

* 要求 Cline 在同一个浏览器会话中导航到新的 URL
* 要求 Cline 关闭当前浏览器并打开新的

#### 使用其他工具前必须关闭浏览器

如果您希望 Cline 在使用浏览器后编辑文件或运行命令，您必须首先要求它关闭浏览器：

```javascript
关闭浏览器，然后更新 CSS 文件以修复我们看到的对齐问题。
```

#### Cline 看到的内容

浏览器有固定的视口大小（默认为 900x600 像素），类似于小型笔记本电脑屏幕。Cline 将在每次操作后分享屏幕截图，这样您就可以确切地看到它看到的内容。

#### 控制台日志

Cline 捕获浏览器控制台日志，这对调试 Web 应用程序很有帮助。这些日志包含在每个屏幕截图中。

### 常见用例

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

### 故障排除

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

### 在 WSL 中使用 VS Code 的远程浏览器

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

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

```powershell
# 允许 WSL 连接到 Chrome 的调试端口
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 内使用远程浏览器功能。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.