chrome-devtools-mcp
命令行工具ChromeDevTools/chrome-devtools-mcp
让 AI 编码代理控制 Chrome DevTools 的 MCP 服务器。
项目简介
Chrome DevTools MCP 服务器,让 AI 代理调试、自动化并分析 Chrome 浏览器性能。与 Puppeteer 和 DevTools 前端集成,实现可靠自动化和性能洞察。
README 预览
# Chrome DevTools for Agents\n\n[](https://npmjs.org/package/chrome-devtools-mcp)\n\nChrome DevTools for Agents (`chrome-devtools-mcp`) lets your coding agent (such as Gemini, Claude, Cursor or Copilot)\ncontrol and inspect a live Chrome browser. It acts as a Model-Context-Protocol\n(MCP) server, giving your AI coding assistant access to the full power of\nChrome DevTools for reliable automation, in-depth debugging, and performance analysis.\nA [CLI](docs/cli.md) is also provided for use without MCP.\n\n## [Tool reference](./docs/tool-reference.md) | [Changelog](./CHANGELOG.md) | [Contributing](./CONTRIBUTING.md) | [Troubleshooting](./docs/troubleshooting.md) | [Design Principles](./docs/design-principles.md)\n\n## Key features\n\n- **Get performance insights**: Uses [Chrome\n DevTools](https://github.com/ChromeDevTools/devtools-frontend) to record\n traces and extract actionable performance insights.\n- **Advanced browser debugging**: Analyze network requests, take screenshots and\n check browser console messages (with source-mapped stack traces).\n- **Reliable automation**. Uses\n [puppeteer](https://github.com/puppeteer/puppeteer) to automate actions in\n Chrome and automatically wait for action results.\n\n## Disclaimers\n\n`chrome-devtools-mcp` exposes content of the browser instance to the MCP clients\nallowing them to inspect, debug, and modify any data in the browser or DevTools.\nAvoid sharing sensitive or personal information that you don't want to share with\nMCP clients.\n\n`chrome-devtools-mcp` officially supports Google Chrome and [Chrome for Testing](https://developer.chrome.com/blog/chrome-for-testing/) only.\nOther Chromium-based browsers may work, but this is not guaranteed, and you may encounter unexpected behavior. Use at your own discretion.\nWe are committed to providing fixes and support for the latest version of [Extended Stable Chrome](https://chromiumdash.appspot.com/schedule).\n\nPerformance tools may send trace URLs to the Google CrU
常见问题 (2)
故障排除如何解决在 chrome-devtools-mcp 中同时使用 emulate() 设置移动视口和网络节流时出现的“Navigation timeout”错误?
故障排除
如何解决在 chrome-devtools-mcp 中同时使用 emulate() 设置移动视口和网络节流时出现的“Navigation timeout”错误?在 chrome-devtools-mcp v1.0.1 中,这是一个已知问题。网络节流会在导航超时乘数更新之前应用,导致在慢速网络条件(如 Slow 3G)下,视口更改触发页面重新加载时采用默认的 10 秒超时。解决方法:将 emulate 调用拆分为两次独立调用。例如,先使用仅包含 networkConditions 参数的 emulate 调用,然后使用仅包含 viewport 参数的第二次调用(或顺序相反)。这样可避免在未延长超时的情况下发生重新加载。PR #2134 中已提出永久性修复方案。
故障排除如何在使用 Chrome DevTools MCP 时绕过“允许远程调试”权限对话框?
故障排除
如何在使用 Chrome DevTools MCP 时绕过“允许远程调试”权限对话框?使用启用了远程调试的专用Chrome配置文件。启动Chrome时添加:--remote-debugging-port=9222 --user-data-dir=/path/to/profile。然后将MCP服务器连接到http://127.0.0.1:9222。由于专用配置文件已预先授权调试,因此可以避免权限对话框。推荐用于开发和测试。由于安全考虑,未实现持久化权限批准功能。