OpenSource-Hub

chrome-devtools-mcp

CLI ツール

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

FAQ (2)

トラブル対応
chrome-devtools-mcpでemulate()を使ってモバイルビューポートとネットワークスロットルを同時に設定する際に発生する'Navigation timeout'エラーを修正する方法

これはchrome-devtools-mcp v1.0.1における既知の問題です。ネットワークスロットルがナビゲーションタイムアウトの乗数更新前に適用されるため、Slow 3Gのような低速ネットワーク条件下でビューポート変更によりページリロードが発生した場合、デフォルトの10秒タイムアウトが発生します。回避策: emulate呼び出しを2回に分割します。例えば、最初のemulate呼び出しではnetworkConditionsのみを指定し、2回目の呼び出しでviewportを指定する(またはその逆)。これにより、延長されたタイムアウトなしでのリロードを回避できます。恒久的な修正はPR #2134で提案されています。

参照 Issue #2115
トラブル対応
Chrome DevTools MCPを使用する際に、'Allow remote debugging'の許可ダイアログをバイパスする方法は?

リモートデバッグを有効にした専用のChromeプロファイルを使用してください。Chromeを次のコマンドで起動します: --remote-debugging-port=9222 --user-data-dir=/path/to/profile。その後、MCPサーバーを http://127.0.0.1:9222 に接続します。専用プロファイルがデバッグ用に事前承認されているため、許可ダイアログが表示されません。開発およびテストに推奨されます。セキュリティ上の理由から、許可承認を永続化する機能は実装されていません。

参照 Issue #825