> For the complete documentation index, see [llms.txt](https://modelmesh.gitbook.io/cline-zhong-wen-ban-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modelmesh.gitbook.io/cline-zhong-wen-ban-docs/remote-browser-zhi-chi.md).

# Remote Browser 支持

Cline 中的 Remote Browser 功能允许 AI Assistant 直接通过受控浏览器实例与 Web 内容进行交互。这将启用几个强大的功能：

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

## **Cline-胜算云增强版中的远程浏览器**

### **什么是远程浏览器？** <a href="#what-is-remote-browser" id="what-is-remote-browser"></a>

Remote Browser 允许 Cline 直接查看网站并与之交互。此功能使 Cline-胜算云增强版 能够：

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

### **如何使用 Remote Browser** <a href="#how-to-use-remote-browser" id="how-to-use-remote-browser"></a>

#### **基本命令**

您可以通过简单的说明让 Cline-胜算云增强版 使用浏览器：

* **打开网站** ：“使用浏览器检查 [https://example.com](https://example.com/) 的网站”
* **点击元素** ：“Click the login button”
* **键入文本** ：“在搜索框中键入 'Hello world'”
* **滚动页面** ：“向下滚动以查看更多内容”
* **关闭浏览器** ：“立即关闭浏览器”

#### **示例工作流**

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

```
Can you start my React app with "npm start" and then check if it's working properly at http://localhost:3000?
```

#### **分析网站：**

```
Can you visit https://example.com and tell me what you think about its design and layout?
```

&#x20;**填写表格：**

```
Please go to https://example.com/contact, fill out the contact form with some test data, and s
```

### **需要了解的重要事项** <a href="#important-things-to-know" id="important-things-to-know"></a>

#### **一次一个浏览器**

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 应用程序。这些日志包含在每个屏幕截图中。

### **常见用例** <a href="#common-use-cases" id="common-use-cases"></a>

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

### **故障排除** <a href="#troubleshooting" id="troubleshooting"></a>

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

### **在 WSL 中将远程浏览器与 VS Code 结合使用** <a href="#using-remote-browser-with-vs-code-in-wsl" id="using-remote-browser-with-vs-code-in-wsl"></a>

在 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 中使用 Remote Browser 功能。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://modelmesh.gitbook.io/cline-zhong-wen-ban-docs/remote-browser-zhi-chi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
