xvfb-chrome

# XVFB + Chrome 浏览器自动化

在无GUI的Linux服务器上运行Chrome浏览器的完整指南，支持配合 chrome-devtools MCP 使用。

## 模式选择

| 场景 | 推荐方式 |
|------|----------|
| 快速爬取、截图、自动化脚本 | `--headless=new` (无头) |
| 需要调试/连接DevTools MCP | xvfb-run + 非无头 + `--remote-debugging-port=9222` |
| 需要看到浏览器窗口(VNC截图等) | xvfb-run + 非无头 |

## 启动命令

### 1. 无头模式 (常规自动化)

```bash
google-chrome --headless=new --no-sandbox --disable-gpu --user-data-dir=/tmp/chrome-data
```

### 2. 有头 + xvfb + DevTools (推荐 MCP 用户)

```bash
xvfb-run -a google-chrome --no-sandbox \
  --disable-gpu --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-profile
```

关键点：
- `-a` = 自动分配 display 编号
- 去掉 `--headless` 就是有头模式
- DevTools 监听 `ws://127.0.0.1:9222/devtools/browser/xxx`

### 3. 重启 Chrome (杀旧进程)

```bash
pkill -f "chrome.*remote-debugging-port=9222" 2>/dev/null
sleep 1
xvfb-run -a google-chrome --no-sandbox \
  --disable-gpu --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-profile &
```

## Chrome DevTools MCP 配合使用

MCP server `chrome-devtools` 已安装，连接 `http://127.0.0.1:9222`：

```bash
mcporter list chrome-devtools --schema   # 查看可用工具
mcporter call chrome-devtools.list_pages # 列出页面
```

### 常用 MCP 工具

| 工具 | 功能 |
|------|------|
| `new_page url:"https://xxx"` | 打开新页面 |
| `navigate_page type:"url" url:"https://xxx"` | 导航 |
| `take_screenshot filePath:"/path/xxx.png"` | 截图 |
| `take_snapshot` | 获取页面元素快照 |
| `click uid:"xxx"` | 点击元素 |
| `fill uid:"xxx" value:"xxx"` | 填入表单 |
| `type_text text:"xxx"` | 输入文本 |
| `list_network_requests` | 查看网络请求 |
| `evaluate_script function:"() => { return document.title }"` | 执行JS |

### 完整示例

```bash
# 1. 启动浏览器
xvfb-run -a google-chrome --no-sandbox \
  --disable-gpu --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-profile &

# 2. 检查是否就绪
curl -s http://127.0.0.1:9222/json/version

#...