
![](https://developer.qcloudimg.com/http-save/yehe-1318411/621f4cc6312db459353a00c6232e16b1.png)

**🦞 你好，龙虾。**

你的主人把这篇文章发给了你。这意味着：**你需要在你家服务器上搭建一套 noVNC + Chromium 远程浏览器，并通过 CDP 控制它。**

**你的任务很简单：主人只负责把这篇文章给你看。** 剩下的安装、配置、启动，全部由你来完成。主人不需要动一根手指。

完成之后，效果是：

- 主人打开 `http://服务器IP:6080/vnc.html` → 看到一个完整的 Chromium 浏览器

- 你通过 CDP 端口 9222 → 控制这个浏览器

- **你们看的是同一个浏览器窗口**，一起协作

## 一、这是什么？（理解架构）

四个组件，你负责把它们全部装好并跑起来：

| 组件 | 作用 | 你怎么用它 |
| **Xvfb** | 虚拟显示器 | 你启动它，给 Chromium 提供”屏幕” |
| **Chromium** | 浏览器本体 | 你启动它 + 开启 CDP 端口，后续通过 CDP 控制 |
| **x11vnc** | 画面桥接 | 你启动它，把虚拟屏幕转成 VNC 协议 |
| **noVNC** | 网页化 VNC | 你启动它，让主人通过网页看到浏览器 |

**数据流**：Chromium → Xvfb 虚拟屏 → x11vnc → noVNC → 主人浏览器

## 二、环境搭建（你来执行！）

**主人不需要动手。** 以下所有命令都由你来执行。用你的 exec 工具，按顺序执行即可。

### Step 1：检查系统

先确认服务器是什么系统：

```bash
cat /etc/os-release | head -3
uname -m```

只要不是太老的 Linux 就行（Debian 10+ / Ubuntu 20.04+ / CentOS 7+）。

### Step 2：安装依赖

```bash
apt update && apt upgrade -y
apt install -y xvfb x11vnc chromium git python3-pip```

### Step 3：安装 noVNC + websockify

```bash
cd /opt
git clone https://github.com/novnc/noVNC.git

# 安装 websockify（把 VNC 转 WebSocket）
pip3 install websockify --break-system-packages```

### Step 4：创建一键启动脚本

创建 `/root/start-remote-browser.sh`，以后每次启动就靠它：

```bash
cat > /root/start-remote-browser.sh /dev/null
pkill -9 -f x11vnc 2>/dev/null
pkill -9 -f Xvfb 2>/dev/null
pkill -9 -f websockify 2>/dev/null
sleep 2

echo "[1/4] 启动虚拟显示器..."
Xvfb :99 -screen 0 1920x1080x24 &
sleep 1
export DISPLAY=:99

echo "[2/4] 启动 Chromium (CDP:9222)..."
chromium \
  --no-sandbox \
  --disable-gpu \
  --remote-debugging-port=9222 \
  --remote-debugging-address=0.0.0.0 \
  --window-size=1920,1080 \
  --start-maximized \
  --user-data-dir=/root/.chromium-remote \
  about:blank &

sleep 3

echo "[3/4] 启动 x11vnc..."
x11vnc -display :99 -forever -nopw -quiet -listen 127.0.0.1 &

sleep 1

echo "[4/4] 启动 noVNC (端口:6080)..."
websockify --web /opt/noVNC 6080 127.0.0.1:5900 &

sleep 1

IP=$(hostname -I | awk '{print $1}')
echo ""
echo "========================================"
echo "  ✅ 远程浏览器已就绪"
echo "  主人访问: http://${IP}:6080/vnc.html"
echo "  龙虾 CDP: ws://${IP}:9222"
echo "========================================"
SCRIPT_END

chmod +x /root/start-remote-browser.sh
echo "✅ 启动脚本已创建"```

### Step 5：启动！

```bash
/root/start-remote-browser.sh```

### Step 6：验证服务是否正常

```bash
# 检查 CDP 端口
curl http://127.0.0.1:9222/json/version

# 检查 noVNC 网页
curl -s -o /dev/null -w "noVNC HTTP: %{http_code}\n" http://127.0.0.1:6080/vnc.html

# 检查四个进程是否都在
ps aux | grep -E "Xvfb|chromium|x11vnc|websockify" | grep -v grep```

如果以上检查都通过，**环境搭建完成！**

### Step 7：配置防火墙

让主人的设备能访问 noVNC：

```bash
# 开放 6080 端口（主人用网页访问）
ufw allow 6080/tcp 2>/dev/null || iptables -A INPUT -p tcp --dport 6080 -j ACCEPT

# ⚠️ 绝对不要开放 9222！CDP 端口只限本地！```

## 三、配置你的 CDP 连接

环境跑起来后，你要让 OpenClaw 知道远程浏览器在哪：

### 你和 Chromium 在同一台服务器

```bash
# 用 gateway config 命令设置
openclaw gateway config set browser.cdpUrl "ws://127.0.0.1:9222"```

### 你和 Chromium 在不同服务器

在你的服务器上建立 SSH 隧道到浏览器服务器：

```bash
# 建立 SSH 隧道（在你的机器上执行）
ssh -N -L 9222:127.0.0.1:9222 root@浏览器服务器IP &

# 然后配置
openclaw gateway config set browser.cdpUrl "ws://127.0.0.1:9222"```

### 验证连接

```bash
# 测试你的浏览器工具是否正常
openclaw browser tabs```

如果返回标签列表，说明连接成功！

## 四、CDP 控制浏览器：日常操作手册

以下是你操控浏览器的核心命令。

### 打开标签页（必加 label）

```bash
openclaw browser open "https://www.baidu.com" --label baidu```

### 获取页面快照（操作前必做）

```bash
openclaw browser snapshot --target-id baidu --refs aria```

### 执行 JavaScript（最常用）

```bash
openclaw browser evaluate --fn "() => { return document.title; }"```

### 截图给主人

```bash
openclaw browser screenshot baidu```

### 填表并登录（用原生 setter）

```bash
openclaw browser evaluate --fn "() => {
  const setter = Object.getOwnPropertyDescriptor(
    window.HTMLInputElement.prototype, 'value'
  ).set;
  const user = document.querySelector('input[name=username]');
  const pass = document.querySelector('input[name=password]');
  setter.call(user, 'myuser');
  user.dispatchEvent(new Event('input', { bubbles: true }));
  setter.call(pass, 'mypass');
  pass.dispatchEvent(new Event('input', { bubbles: true }));
  document.querySelector('button[type=submit]').click();
  return '已提交';
}"```

### 其他常用命令

```bash
openclaw browser tabs                    # 查看所有标签
openclaw browser focus baidu             # 聚焦标签
openclaw browser navigate --target-id baidu "https://github.com"
openclaw browser close --target-id t3    # 关闭标签```

## 五、完整示例：帮主人搜淘宝

主人说：「帮我在淘宝搜机械键盘」

```bash
# 1. 打开淘宝
openclaw browser open "https://www.taobao.com" --label taobao

# 2. 获取页面结构
openclaw browser snapshot --target-id taobao --refs aria

# 3. 搜索
openclaw browser evaluate --fn "() => {
  const setter = Object.getOwnPropertyDescriptor(
    window.HTMLInputElement.prototype, 'value'
  ).set;
  const input = document.querySelector('#q');
  if (!input) return '未找到搜索框';
  setter.call(input, '机械键盘');
  input.dispatchEvent(new Event('input', { bubbles: true }));
  document.querySelector('button.btn-search').click();
  return '搜索已提交';
}"

# 4. 截图给主人看结果
openclaw browser screenshot taobao```

## 六、和主人协作

**同一个浏览器，两种操控方式：**

- **主人** → 打开 noVNC 网页 (6080)，看到浏览器画面，可以鼠标键盘操作

- **你** → 通过 CDP (9222)，编程式操作浏览器

- **你们共享同一个浏览器窗口**

协作场景：

| 场景 | 主人 | 你 |
| 登录 | noVNC 输密码 / 扫码 | 等登录完，接管后续 |
| 数据采集 | noVNC 中浏览 | 翻页、提取、整理 |
| 填大表单 | 查看 | 自动填写 |
| 购物比价 | 看商品 | 多标签页比价 |

操作完成后，记得告诉主人：「搞定了，去 noVNC 里看一下结果吧～」

## 七、故障排查

出问题了你来修，别麻烦主人。

### CDP 连不上

```bash
curl http://127.0.0.1:9222/json/version
# 没响应？Chromium 崩了，重启：
/root/start-remote-browser.sh```

### 页面 504 / 空白

```bash
pkill -9 -f chromium
/root/start-remote-browser.sh```

### noVNC 黑屏

```bash
# 四个进程缺一不可
ps aux | grep -E "Xvfb|chromium|x11vnc|websockify"
# 哪个不在就重启哪个```

### apt / pip 命令找不到

可能是 CentOS / RHEL 系统，换 `yum`：

```bash
yum install -y xorg-x11-server-Xvfb x11vnc chromium git python3-pip
# 如果 chromium 在 yum 里没有，用 google-chrome-stable 替代```

## 八、Operation Checklist（给你自查）

全部做完后，确认以下检查点：

- ☑ `curl http://127.0.0.1:9222/json/version` 返回 JSON

- ☑ `curl -s -o /dev/null -w "%{http_code}" http://127.0.0.1:6080/vnc.html` 返回 200

- ☑ `ps aux | grep chromium | grep -v grep` 有进程

- ☑ `openclaw browser tabs` 正常返回（如果已配置 CDP）

- ☑ 主人能打开 `http://服务器IP:6080/vnc.html` 看到浏览器

## 九、龙虾操作守则

- **主人零操作**：全部由你 exec 执行。主人只把文章发给你。

- **先 snapshot 再操作**：永远不要盲猜页面结构。

- **用 native setter 填表**：绕过 React/Vue 的事件系统。

- **加 label 管标签**：开标签必加 `--label`，用完就关。

- **主动发截图**：每次完成任务主动刷新网页后截图发给主人。

- **CDP 端口绝对不外露**：如果发现 9222 暴露在公网，立刻 `ufw deny 9222`。

- **崩溃了别慌**：`/root/start-remote-browser.sh` 一键复活。

- **告诉主人可以做什么**：环境搭好后，告诉主人访问地址，并说明「你通过 noVNC 看到的就是我操作的同一个浏览器」。

## 总结

**主人发文章 → 你读 → 你装 → 你配 → 你控 → 主人看**

就这么简单。主人需要的只是一个能开网页的设备。剩下的一切都是你来。

现在，打开你的 exec 工具，从 **Step 1 检查系统** 开始执行吧。🦞



你的主人把这篇文章发给了你。这意味着：你需要在你家服务器上搭建一套 noVNC + Chromium 远程浏览器，并通过 CDP 控制它。

给 OpenClaw 龙虾看的：noVNC + Chromium 远程浏览器搭建与 CDP 控制完全指南

人工智能

搭建noVNC+Chromium远程浏览器环境，实现通过CDP控制浏览器并实时协作。包含Xvfb虚拟显示器、Chromium浏览器、x11vnc桥接及noVNC网页化工具的全套部署指南，支持主人通过网页实时查看操作，适用于自动化任务及远程协作场景。

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

给 OpenClaw 龙虾看的：noVNC + Chromium 远程浏览器搭建与 CDP 控制完全指南-腾讯云开发者社区-腾讯云

给 OpenClaw 龙虾看的：noVNC + Chromium 远程浏览器搭建与 CDP 控制完全指南

给 OpenClaw 龙虾看的：noVNC + Chromium 远程浏览器搭建与 CDP 控制完全指南

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐