企业官网建设流程全解析

不装MCP也能用：chrome-devtools-mcp命令行工具（CLI）完全使用手册

【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp

chrome-devtools-mcp是一个为 AI 编码代理打造的 Chrome DevTools 服务，而你完全不需要配置 MCP 也能用上它——因为它内置了一个实验性的chrome-devtools 命令行工具（CLI）。只需一条npm安装命令，你就能在终端里直接控制真实浏览器：打开网页、点击填写、截图、跑 Lighthouse 审计、录制性能 Trace，还能通过后台守护进程（daemon）保持浏览器状态不丢失。本文是一份面向新手的完整使用手册，从安装到排错，5 分钟上手。

为什么需要 Chrome DevTools CLI？

MCP 服务器适合在 IDE 或 AI 客户端里使用，但如果你想：

• 🖥️在纯终端里调试，不依赖任何 MCP 客户端；
• 🤖让 AI 生成可复现的自动化脚本，而不是每次都让代理"手动操作"；
• 🔁跨命令保持浏览器状态（已打开的页面、Cookie、登录态），

CLI 就是最轻量的选择。它的核心工作方式非常巧妙：

• 自动启动：第一次调用工具（如list_pages）时，CLI 会自动在后台拉起 MCP 服务器和浏览器；
• 状态持久：同一个后台实例会被后续命令复用，浏览器上下文不会重置；
• 手动可控：随时用start、stop、status管理后台进程。

💡 守护进程在 Linux/macOS 上使用 Unix 套接字，在 Windows 上使用命名管道，相关实现见 src/daemon/daemon.ts 和 src/daemon/client.ts。

一键安装：30 秒完成 chrome-devtools CLI 安装

只需全局安装一次，chrome-devtools命令即全局可用：

npm i chrome-devtools-mcp@latest -g chrome-devtools status # 验证安装是否成功

安装小贴士：

• ⚠️ 遇到command not found：确认 npm 全局 bin 目录在PATH中，然后重启终端；
• ⚠️ 遇到EACCES权限错误：不要使用sudo，建议改用 nvm 或配置 npm 全局目录；
• ⚠️ 版本过旧：先执行chrome-devtools stop再重新安装。

详细安装与排错说明见 skills/chrome-devtools-cli/references/installation.md。

chrome-devtools CLI 快速上手：从打开网页到截图

假设浏览器已就绪（第一次执行时会自动启动），整个工作流就三步：找页面 → 看快照 → 做操作。

第一步：导航与页面管理

chrome-devtools new_page "https://example.com" # 打开新标签页 chrome-devtools list_pages # 查看所有打开的页面 chrome-devtools navigate_page 1 --url "https://web.dev" # 让第 1 个页面跳转 chrome-devtools close_page 1 # 关闭页面

其中1是页面 ID（pageId），先执行list_pages就能知道当前有哪些页面。

第二步：截图与页面快照

chrome-devtools take_screenshot 1 --filePath screenshot.png chrome-devtools take_snapshot 1

take_snapshot会返回页面的无障碍树文本快照，每个元素都带一个uid（如1_1），后续点击、填写都靠它定位——这正是 CLI 比"盲猜选择器"更可靠的地方。

第三步：点击、填写与脚本执行

chrome-devtools click 1 "element-uid-123" # 点击快照中的元素 chrome-devtools fill 1 "input-uid-456" "search query" # 填写表单 chrome-devtools press_key 1 "Enter" # 按键 chrome-devtools evaluate_script "() => document.title" --pageId 1

性能与审计：一条命令跑 Lighthouse 和 Trace

chrome-devtools lighthouse_audit 1 --mode snapshot chrome-devtools performance_start_trace 1 --reload true --autoStop true --filePath trace.json.gz chrome-devtools list_console_messages 1 --types error # 只看报错信息

进阶技巧：daemon 管理与 JSON 输出

守护进程三件套：

chrome-devtools start # 启动/重启后台服务（默认 headless） chrome-devtools start --headless=false # 启动可视化浏览器窗口 chrome-devtools status # 查看后台是否在运行 chrome-devtools stop # 用完即停，释放浏览器

注意start后面的参数会透传给底层 MCP 服务器（如--userDataDir），并非所有参数都受支持，可用chrome-devtools start --help查看完整列表。

程序化集成：JSON 输出

默认输出是人类友好的 Markdown 文本；写脚本时加--output-format=json即可获得原始 JSON，方便用jq等工具解析：

chrome-devtools list_pages --output-format=json

命令行通用格式：

chrome-devtools <tool> [参数] [flags]

必填参数按位置传递（页面级工具的第一个参数是<pageId>），可选参数用--flags。完整工具清单参考 docs/tool-reference.md，CLI 命令模板与技巧见 skills/chrome-devtools-cli/SKILL.md。

故障排查：CLI 卡住或连接失败怎么办？

遇到问题按顺序尝试：

1. 先停后台：chrome-devtools stop—— 绝大多数卡死问题都能这样解决；
2. 开详细日志：DEBUG=* chrome-devtools list_pages查看完整输出；
3. 换版本：停止并全局重装chrome-devtools-mcp。

更多常见问题（如Target closed、WSL 环境等）汇总在 docs/troubleshooting.md。

延伸阅读：核心文件与文档路径

📌 小贴士：CLI 目前只支持 MCP 服务器中无需额外参数的工具，例如--categoryExtensions类工具暂不可用；wait_for、fill_form等命令也被排除在 CLI 生成之外。

总结：不需要任何 MCP 配置，chrome-devtoolsCLI 让你在终端里就能完成浏览器打开、交互、截图、性能分析和 Lighthouse 审计，配合--output-format=json还能轻松接入自动化脚本——是调试和脚本化浏览器操作的最短路径。

【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp