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 (5)
トラブル対応chrome-devtools-mcpでemulate()を使ってモバイルビューポートとネットワークスロットルを同時に設定する際に発生する'Navigation timeout'エラーを修正する方法
これはchrome-devtools-mcp v1.0.1における既知の問題です。ネットワークスロットルがナビゲーションタイムアウトの乗数更新前に適用されるため、Slow 3Gのような低速ネットワーク条件下でビューポート変更によりページリロードが発生した場合、デフォルトの10秒タイムアウトが発生します。回避策: emulate呼び出しを2回に分割します。例えば、最初のemulate呼び出しではnetworkConditionsのみを指定し、2回目の呼び出しでviewportを指定する（またはその逆）。これにより、延長されたタイムアウトなしでのリロードを回避できます。恒久的な修正はPR #2134で提案されています。
トラブル対応npm EOVERRIDE エラー（CONNECTION_CLOSED）で起動に失敗する chrome-devtools-mcp Claude Code プラグインの修正方法
このプラグインは npx chrome-devtools-mcp@<version> でサーバーを起動し、npx はカレントワーキングディレクトリの package.json に対して依存関係の解決を行います。プロジェクトに直接の依存関係と競合する overrides エントリーがある場合（Dependabot/Renovate が依存関係を更新した際に、ピン留めされたセキュリティ override が更新されないままだとよく発生します。例: "dependencies": {"dompurify": "^3.4.16"} vs "overrides": {"dompurify": "^3.4.14"}）、npx はサーバーが起動する前に npm error code EOVERRIDE で終了し、Claude Code には Connection failed (CONNECTION_CLOSED) としか表示されません。
回避策:
1. プロジェクトの package.json を修正する: overrides のバージョンを直接の依存関係と一致させる（override を依存関係と同じ範囲に更新する）ことで揃え、その後 npm install を実行します。
2. package.json に競合する overrides が含まれていないディレクトリから Claude Code を起動します。
3. cwd の package.json をバイパスして、サーバー自体が動作することを確認します:
npx -y --prefix "$HOME" chrome-devtools-mcp@1.11.0 --version
または sh -c 'cd ~ && npx -y chrome-devtools-mcp@1.11.0 --version'
プラグインレベルの修正: .claude-plugin/plugin.json で、インラインの mcpServers の args にプレフィックスを追加し、npx がプロジェクトの package.json を無視するようにします: "args": ["--prefix", "${CLAUDE_PLUGIN_DATA}", "chrome-devtools-mcp@<version>"]。なお、Claude Code は ${CLAUDE_PLUGIN_DATA} と ${HOME} を展開しますが、${PLUGIN_DATA} は展開しません（これは Claude Code が無視する同梱の mcp.json に記載されているものです）。
トラブル対応take_heapsnapshot で同じ .heapsnapshot ファイルを上書きした後に、ヒープスナップショットツールに古いデータが表示されるのはなぜですか？
ヒープスナップショットは、最初に読み込まれた後、ファイルパスによってキャッシュされます。take_heapsnapshotで同じパスを上書きしても、キャッシュされたスナップショットは無効化されないため、get_heapsnapshot_details、query_heapsnapshot_objectsなどのツールは古いキャプチャの分析を続けます。強制的に再読み込みするには、再度分析する前にそのパスに対してclose_heapsnapshotを呼び出してください: {"name":"close_heapsnapshot","arguments":{"filePath":"/path/to/same.heapsnapshot"}} その後にget_heapsnapshot_detailsまたはquery_heapsnapshot_objectsを呼び出します。あるいは、snapshot-<timestamp>.heapsnapshotのように、キャプチャごとに一意のfilePathを使用して、キャッシュを完全に回避することもできます。
トラブル対応--allowUnrestrictedPaths=false が機能しない場合、Chrome DevTools MCP CLI のファイルアクセスを temp ディレクトリに制限するにはどうすればよいですか？
これは chrome-devtools-mcp 1.10.1 および main コミット b2f522c におけるバグです。CLI モードでは明示的に指定した --allowUnrestrictedPaths=false が無視され、1.10.1 ではこのフラグがデーモンに渡されません。回避策として、--workspace を使用してファイルツールを OS の一時ディレクトリに限定してください:
chrome-devtools stop
chrome-devtools start --workspace="$(node -p "require('os').tmpdir()")" --no-usage-statistics --no-performance-crux再起動後、そのディレクトリ外への書き込みは Access denied: path ... is not within any of the configured workspace roots というエラーで失敗するはずです。実行中のデーモンは chrome-devtools status で確認してください。また、明示的な --allowUnrestrictedPaths=false を正しく尊重する修正を含むリリースにアップグレードする方法もあります。--workspace は、非推奨となったフラグに代わる推奨手段であり続けます。
トラブル対応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 に接続します。専用プロファイルがデバッグ用に事前承認されているため、許可ダイアログが表示されません。開発およびテストに推奨されます。セキュリティ上の理由から、許可承認を永続化する機能は実装されていません。