在 Debian 上用 Chrome DevTools MCP 让 AI Agent 调试前端

May 13, 2026 · 6 min read

前端调试不再只靠人眼和 DevTools 面板。把 Chrome DevTools MCP 接入编程 Agent 后，截图、网络请求追踪、性能录制、Console 日志抓取全变成 Agent 可直接调用的工具——在 Debian 服务器上无头浏览器跑起来就能用。

Debian 安装 Chromium

Debian 12/13 上 Chromium 的安装路径已经统一到 apt 仓库。一行命令装好：

sudo apt-get update && sudo apt-get install -y chromium

装完后验证版本：

chromium --version

Debian 仓库的 Chromium 默认不开启远程调试端口，但 chrome-devtools-mcp 通过 puppeteer 启动时会自动带上 --remote-debugging-port，不需要手动指定。

如果你的环境对 X11 显示有要求，但服务器没有桌面，用 headless 模式即可——后文配置里直接加 --headless。

部分 Debian 最小安装缺少字体和中文渲染，补一下：

sudo apt-get install -y fonts-noto-cjk

chrome-devtools-mcp 是什么

chrome-devtools-mcp 是 ChromeDevTools 团队官方维护的 MCP Server。它把 Chrome DevTools 的能力封装成标准 MCP 工具，让任何支持 MCP 的编程 Agent（Claude Code、Codex、Gemini CLI、Cursor 等）都能直接操控浏览器。

核心能力覆盖三大方向：

自动化操作：click、fill、navigate_page、type_text 等 10+ 输入工具，用 puppeteer 驱动，自动等待页面响应
调试与检查：take_snapshot 获取页面 DOM 结构（含 uid）、list_console_messages 抓 console 日志、get_network_request 追踪请求、evaluate_script 执行 JS
性能分析：performance_start_trace / performance_stop_trace 录制 trace，performance_analyze_insight 提取可执行的性能优化建议；还有 lighthouse_audit 一键跑 Lighthouse

和手动打开 DevTools 面板相比，Agent 通过 MCP 拿到的数据是结构化的——不是在 Console 面板里翻日志，而是直接拿到 JSON 格式的错误列表、网络瀑布图、内存快照。

项目地址：https://github.com/ChromeDevTools/chrome-devtools-mcp

debain 配置 chrome 的服务

创建文件 /etc/systemd/system/chromium-headless.service

[Unit]
Description=Chromium Headless for Chrome DevTools MCP
After=network.target

[Service]
Type=simple
User=root
Group=root
Restart=on-failure
RestartSec=5
ExecStart=/usr/bin/chromium \
  --headless \
  --remote-debugging-port=9222 \
  --remote-debugging-address=127.0.0.1 \
  --user-data-dir=/data/projects/chrome-profiles/vibecuting-chrome-profile \
  --no-first-run \
  --no-default-browser-check \
  --disable-dev-shm-usage \
  --disable-gpu \
  --no-sandbox \
  about:blank
ExecStop=/usr/bin/pkill -f "chromium.*--remote-debugging-port=9222"
KillMode=process
TimeoutStopSec=15

[Install]
WantedBy=multi-user.target

Codex 配置 MCP

OpenAI Codex 同样支持 MCP Server。CLI 注册方式：

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

或者手动编辑 .codex/config.toml：

[mcp_servers.chrome-devtools]
command = "env"
args = [
    "-u", "http_proxy",
    "-u", "https_proxy",
    "-u", "HTTP_PROXY",
    "-u", "HTTPS_PROXY",
    "-u", "ALL_PROXY",
    "-u", "all_proxy",
    "-u", "npm_config_proxy",
    "-u", "npm_config_https_proxy",
    "-u", "npm_config_http_proxy",
    "-u", "npm_config_all_proxy",
    "-u", "NO_PROXY",
    "-u", "no_proxy",
    "npx",
    "-y",
    "chrome-devtools-mcp@latest",
    "--browserUrl=http://127.0.0.1:9222",
    "--no-usage-statistics",
    "--no-performance-crux"
]

startup_timeout_ms 在 Debian 上建议设到 20 秒以上。Chromium 无头模式第一次启动冷启动偏慢，超时太短会让 MCP 连接失败。

Codex 的 MCP 工具调用方式和 Claude Code 基本一致——Agent 识别到页面调试需求时自动调用对应工具。

安装技能

npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill chrome-devtools

实战调试流程

配置完成后，在 Agent 里输入调试指令就能触发浏览器操作。以 Claude Code 为例：

1. 页面加载检查

打开 https://your-app.dev 并截图，检查首页是否正常渲染

Agent 会调用 navigate_page → take_screenshot，把截图返回给你。无头模式下截图是 PNG，直接在终端里看到。

2. Console 错误追踪

列出当前页面的 console 错误

Agent 调用 list_console_messages，返回结构化的错误列表，包含 source-mapped 的堆栈信息——比手动翻 Console 面板效率高。

3. 性能录制

录制 https://your-app.dev 的性能 trace 并分析

Agent 调用 performance_start_trace → navigate_page → performance_stop_trace → performance_analyze_insight，输出具体的优化建议（LCP 改善、JS bundle 缩减等）。

4. 网络请求排查

查看首页加载的所有网络请求，找出耗时超过 500ms 的

Agent 调用 list_network_requests 返回全部请求列表，再从里面过滤慢请求。

5. DOM 结构快照

对登录表单做快照，找到邮箱输入框的 uid

Agent 调用 take_snapshot，返回带 uid 的 DOM 树。拿到 uid 后可以直接 fill 或 click 对应元素，完成自动化表单操作。

整个流程的关键：不需要写 puppeteer 脚本，不需要手动开 DevTools，Agent 直接用自然语言指令驱动浏览器完成调试任务。

chrome-devtools-mcp 把前端调试从手动操作变成 Agent 可编排的工具链。Debian 服务器上装好 Chromium、配上无头模式的 MCP Server，Claude Code 和 Codex 就能直接截图、抓日志、录 trace、分析性能。调试不再依赖人眼盯着 DevTools 面板——Agent 替你盯着，并且给出结构化结果。

Debian 安装 Chromium​

chrome-devtools-mcp 是什么​

debain 配置 chrome 的服务​

Codex 配置 MCP​

安装技能​

实战调试流程​