ChromeDevTools/chrome-devtools-mcp

Chrome DevTools for agents (chrome-devtools-mcp)

何であるか – Model‑Context‑Protocol (MCP) を介して Chrome DevTools 機能を公開する Node ベースのサーバー。AI コーディングアシスタント（Claude、Copilot、Cursor、Antigravity など）が実際の Chrome ブラウザを操作可能にし、ページの検査、パフォーマンストレースの記録、ネットワークトラフィックのデバッグ、スクリーンショットの撮影、Puppeteer を用いた自動化を実行できます。

重要性 – 現代の AI エージェントはコード生成には優れていますが、ライブブラウザと信頼できる方法でやり取りする手段が必要です。MCP を使用することで、エージェントは「この URL を開いてパフォーマンスレポートを取得して」や「このボタンをクリックしてコンソール出力を返して」といった要求をカスタム Selenium スクリプトを書かずに実行できます。サーバーが Chrome の起動、結果の待機、DevTools データを JSON に変換するなどの重い処理を担当するため、エージェントは高レベルの推論に集中できます。

主な機能

• パフォーマンスの洞察 – Chrome トレースを記録し、メトリクスを抽出。必要に応じて CrUX API からリアルユーザーのデータを追加して補完。
• デバッグユーティリティ – ネットワークログ、コンソールメッセージ（ソースマップ付きスタックトレース）、スクリーンショットにアクセス可能。
• 信頼性の高い自動化 – Puppeteer をラップして、クリック、ナビゲーション、フォーム入力などを自動で実行。ページの安定性を自動で待機。
• MCP インターフェース – 上記すべてを標準の JSON over WebSocket プロトコルで公開。AI エージェントがツールとして呼び出せます。
• CLI モード – MCP クライアントなしで即時利用可能なスタンドアロンコマンドラインツール（npx chrome-devtools-mcp）。

導入方法

1. Node LTS と最新の安定版 Chrome をインストール。
2. エージェントの MCP 設定にサーバーを追加。例：

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

3. エージェントのプロンプトで Check the performance of https://developers.chrome.com のようなタスクを依頼。サーバーが Chrome を起動し、トレースを記録して分析結果を返します。
4. 軽量利用の場合は --slim --headless でサーバーを起動。

設定と高度な使い方 – フラグでヘッドレスモード、個別ユーザーデータディレクトリ、同時セッション数、既存の Chrome インスタンスへの接続、Android デバッグなどを制御できます。詳細はリンクされたドキュメントを参照。

プライバシーとデータ – 既定では匿名の使用統計を送信し、フィールドパフォーマンスデータを取得するために CrUX API を問い合わせる可能性があります。--no-usage-statistics または環境変数 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS / CI を使用して無効化可能です。

主なユーザー – AI ベースのコーディングアシスタント、IDE 拡張機能、ウェブをブラウズし、ページ速度をプロファイリング、フロントエンドコードをデバッグする必要がある自律エージェントを開発する開発者。

---

すべての詳細はリポジトリの README から直接取得されています。