在 Debian 上用 Chrome DevTools MCP 让 AI Agent 调试前端
前端调试不再只靠人眼和 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 替你盯着，并且给出结构化结果。
