不装MCP也能用chrome-devtools-mcp命令行工具CLI完全使用手册【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcpchrome-devtools-mcp是一个为 AI 编码代理打造的 Chrome DevTools 服务而你完全不需要配置 MCP 也能用上它——因为它内置了一个实验性的chrome-devtools 命令行工具CLI。只需一条npm安装命令你就能在终端里直接控制真实浏览器打开网页、点击填写、截图、跑 Lighthouse 审计、录制性能 Trace还能通过后台守护进程daemon保持浏览器状态不丢失。本文是一份面向新手的完整使用手册从安装到排错5 分钟上手。为什么需要 Chrome DevTools CLIMCP 服务器适合在 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-mcplatest -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是页面 IDpageId先执行list_pages就能知道当前有哪些页面。第二步截图与页面快照chrome-devtools take_screenshot 1 --filePath screenshot.png chrome-devtools take_snapshot 1take_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 和 Tracechrome-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 --headlessfalse # 启动可视化浏览器窗口 chrome-devtools status # 查看后台是否在运行 chrome-devtools stop # 用完即停释放浏览器注意start后面的参数会透传给底层 MCP 服务器如--userDataDir并非所有参数都受支持可用chrome-devtools start --help查看完整列表。程序化集成JSON 输出默认输出是人类友好的 Markdown 文本写脚本时加--output-formatjson即可获得原始 JSON方便用jq等工具解析chrome-devtools list_pages --output-formatjson命令行通用格式chrome-devtools tool [参数] [flags]必填参数按位置传递页面级工具的第一个参数是pageId可选参数用--flags。完整工具清单参考 docs/tool-reference.mdCLI 命令模板与技巧见 skills/chrome-devtools-cli/SKILL.md。故障排查CLI 卡住或连接失败怎么办遇到问题按顺序尝试先停后台chrome-devtools stop—— 绝大多数卡死问题都能这样解决开详细日志DEBUG* chrome-devtools list_pages查看完整输出换版本停止并全局重装chrome-devtools-mcp。更多常见问题如Target closed、WSL 环境等汇总在 docs/troubleshooting.md。延伸阅读核心文件与文档路径资料相对路径CLI 官方文档docs/cli.md工具完整参考docs/tool-reference.md故障排查指南docs/troubleshooting.mdCLI 技能文档含全部命令示例skills/chrome-devtools-cli/SKILL.md安装指南skills/chrome-devtools-cli/references/installation.mdCLI 生成脚本scripts/generate-cli.ts守护进程实现src/daemon/start/stop 端到端测试tests/e2e/chrome-devtools-start-stop.test.ts 小贴士CLI 目前只支持 MCP 服务器中无需额外参数的工具例如--categoryExtensions类工具暂不可用wait_for、fill_form等命令也被排除在 CLI 生成之外。总结不需要任何 MCP 配置chrome-devtoolsCLI 让你在终端里就能完成浏览器打开、交互、截图、性能分析和 Lighthouse 审计配合--output-formatjson还能轻松接入自动化脚本——是调试和脚本化浏览器操作的最短路径。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考