Chrome DevTools MCP

エージェント向け Chrome DevTools

エージェント向け Chrome DevTools（chrome-devtools-mcp）を使用すると、コーディングエージェント（Antigravity、Claude、Cursor、Copilot など）がライブの Chrome ブラウザを制御および検査できます。これは Model-Context-Protocol（MCP）サーバーとして機能し、AI コーディングアシスタントに Chrome DevTools の全機能へのアクセスを提供して、信頼性の高い自動化、詳細なデバッグ、パフォーマンス分析を実現します。MCP を使用しない場合に備えて、CLI も提供されています。

ツールリファレンス | 変更履歴 | コントリビューション | トラブルシューティング | 設計原則

主な機能

• パフォーマンスインサイトの取得: https://github.com/ChromeDevTools/devtools-frontend を使用してトレースを記録し、実用的なパフォーマンスインサイトを抽出します。
• 高度なブラウザデバッグ: ネットワークリクエストの分析、スクリーンショットの撮影、ブラウザコンソールメッセージ（ソースマップ付きスタックトレースを含む）の確認が可能です。
• 信頼性の高い自動化: puppeteer を使用して Chrome でのアクションを自動化し、アクションの結果を自動的に待機します。

免責事項

chrome-devtools-mcp はブラウザインスタンスのコンテンツを MCP クライアントに公開し、ブラウザまたは DevTools 内のあらゆるデータを検査、デバッグ、変更できるようにします。MCP クライアントと共有したくない機密情報や個人情報を共有しないでください。

chrome-devtools-mcp は公式には Google Chrome と Chrome for Testing のみをサポートしています。他の Chromium ベースのブラウザでも動作する可能性がありますが、これは保証されておらず、予期しない動作が発生する可能性があります。自己責任で使用してください。最新バージョンの Extended Stable Chrome に対する修正とサポートを提供することに取り組んでいます。

パフォーマンスツールは、実際のユーザーエクスペリエンスデータを取得するためにトレース URL を Google CrUX API に送信する場合があります。これにより、ラボデータとともにフィールドデータを提示することで、総合的なパフォーマンス像を提供します。このデータは https://developer.chrome.com/docs/crux によって収集されます。これを無効にするには、--no-performance-crux フラグを付けて実行してください。

使用統計

Google は、Chrome DevTools MCP の信頼性とパフォーマンスを向上させるために、使用統計（ツール呼び出しの成功率、レイテンシ、環境情報など）を収集します。

データ収集はデフォルトで有効です。サーバー起動時に --no-usage-statistics フラグを渡すことでオプトアウトできます：

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google はこのデータを Google プライバシーポリシー に従って取り扱います。

Chrome DevTools MCP に対する Google の使用統計の収集は、Chrome ブラウザの使用統計とは独立しています。Chrome のメトリクスをオプトアウトしても、このツールが自動的にオプトアウトされるわけではなく、その逆も同様です。

CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS または CI の環境変数が設定されている場合、収集は無効になります。

更新チェック

デフォルトでは、サーバーは定期的に npm レジストリの更新をチェックし、新しいバージョンが利用可能な場合に通知をログに記録します。CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS 環境変数を設定することで、これらの更新チェックを無効にできます。

要件

• Node.js LTS バージョン。
• Chrome 現在の安定版またはそれ以降。
• npm

はじめに

MCP クライアントに次の設定を追加します：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

[!NOTE] chrome-devtools-mcp@latest を使用すると、MCP クライアントは常に最新バージョンの Chrome DevTools MCP サーバーを使用します。

基本的なブラウザタスクのみを行う場合は、--slim モードを使用します：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

Slim ツールリファレンス を参照してください。

MCP クライアント設定

エディタやエージェント（例：Antigravity、Claude Code、Cursor、VS Code）に固有のセットアップ手順については、クライアント設定ガイド を参照してください。

最初のプロンプト

MCP クライアントで次のプロンプトを入力して、すべてが機能しているか確認します：

Check the performance of https://developers.chrome.com

MCP クライアントがブラウザを開き、パフォーマンストレースを記録するはずです。

[!NOTE] MCP サーバーは、MCP クライアントが実行中のブラウザインスタンスを必要とするツールを使用すると、ブラウザを自動的に起動します。Chrome DevTools MCP サーバーに接続するだけでは、ブラウザは自動的に起動しません。

ツール

問題が発生した場合は、トラブルシューティングガイド を確認してください。サポートされているすべての MCP 機能の完全なリストについては、ツールリファレンス を参照してください。

設定

サーバーパラメータ（例：--headless、--isolated、--slim）の完全なリストと、WebSocket 接続の設定方法については、設定ガイド を参照してください。

高度な使用法

同時セッションの処理、永続的なユーザーデータディレクトリ、新しいインスタンスを起動する代わりに実行中の Chrome インスタンスへの接続、Android でのデバッグなどの高度な機能については、高度な使用法ガイド を参照してください。

ブラウザサブエージェントとしての統合

エージェンティックツールを開発していて、製品の一部として統合されたブラウザサブエージェントを提供したい場合は、エージェント向け Chrome DevTools の上に構築することをお勧めします。

リファレンス実装については、Gemini CLI ブラウザエージェントのドキュメント を参照してください。