Does the server need Chrome to be running before it starts?

No. By default the server launches its own managed Chrome instance via Puppeteer when a tool that requires a browser is first called.

How do tools identify page elements?

Tools that interact with elements take a uid parameter. UIDs come from the page snapshot returned by take_snapshot. The agent calls take_snapshot, identifies the target element by uid, then passes that uid to the action tool.

What is the CrUX API and when does it send data externally?

The Chrome User Experience Report (CrUX) API provides real-user performance field data for public URLs. It can be disabled via a server flag to prevent any URL from being sent to Google's API.

最終更新：2026年3月 · ソース：chrome-devtools-mcp

Web 自動化オペレーター

AI エージェントに Chrome DevTools プロトコルを公開する MCP サーバー — MCP 互換クライアント内から信頼性の高いブラウザ自動化、ネットワーク検査、コンソールデバッグ、スクリーンショットキャプチャ、パフォーマンストレースを実現します。

← モジュール概要

概要

chrome-devtools-mcp は MCP サーバーとして起動し、Chrome ブラウザインスタンスに接続します。AI エージェントがライブブラウザと対話するために呼び出せる 6 カテゴリにわたる 26 のツールを提供します：要素のクリック、フォームの入力、ページナビゲーション、コンソール出力の読み取り、パフォーマンストレースのキャプチャなど。自動化は各操作後のページ状態を待機するために内部で Puppeteer を使用します。

プライバシーに関する注意

このサーバーはブラウザの内容を MCP クライアントに公開します。パフォーマンスツールは実際のユーザーフィールドデータのためにトレース URL を Google CrUX API に送信することがあります。使用統計はデフォルトで収集されます；両方ともサーバーフラグで無効にできます。

なぜ必要か

AI エージェントのブラウザ自動化には2つの一般的な失敗モードがあります。Selenium と Playwright は確定的なテストスクリプト向けに設計されています：どの要素をどの順序でクリックするかを事前に知っています。AI エージェントは観察し、推論し、適応する必要があります—DOM 構造を事前に知らず、動的に発見しなければなりません。スクリーンショットのみのアプローチはエージェントがページを視覚的に「見る」ことを可能にしますが、正確な要素参照を与えられず、意図をツール呼び出しとして表現できません。

Chrome DevTools プロトコル（CDP）は開発者が DevTools で使用するのと同じプリミティブを公開します：アクセシビリティツリー、JavaScript 実行、ネットワークトラフィック、コンソール出力、パフォーマンストレース。CDP で作業するエージェントはページ構造を正確に検査し、アクセシビリティロールで要素を識別し、任意の JavaScript を実行し、ブラウザがログした内容を正確に読み取れます—すべて単一の MCP インターフェースを通じて。

アーキテクチャ

3つの層が単一のエージェントツール呼び出しを処理するために連携します：

エージェント
  → MCP ツール呼び出し（click、fill、navigate_page など）
  → chrome-devtools-mcp サーバー
    → Puppeteer（Chrome 管理 + 操作結果の待機）
      → Chrome DevTools プロトコル（ブラウザ制御）
        → Chrome インスタンス

6 カテゴリにわたる 26 のツール：

入力自動化（8 ツール）

ツール	説明
click	uid で要素をクリック（シングルまたはダブルクリック）
drag	ある要素を別の要素にドラッグ
fill	入力にテキストを入力またはオプションを選択
fill_form	一回の呼び出しで複数のフォーム要素を入力
handle_dialog	ブラウザダイアログを承認または却下
hover	要素にホバー
press_key	キーまたはキーの組み合わせを押す
upload_file	ファイル入力要素でローカルファイルをアップロード

ナビゲーション（6 ツール）

ツール	説明
navigate_page	URL にナビゲート
new_page	新しいブラウザタブを開く
close_page	ページ ID でタブを閉じる
list_pages	開いているすべてのタブをリスト表示
select_page	ページ ID でタブにフォーカスを切り替え
wait_for	続行前に条件を待機

デバッグ（5）、ネットワーク（2）、パフォーマンス（3）、エミュレーション（2）

ツール	説明
take_screenshot	現在のページのスクリーンショットをキャプチャ
take_snapshot	ページアクセシビリティツリースナップショットをキャプチャ（要素 UID を返す）
evaluate_script	ページコンテキストで JavaScript を実行
get_console_message	ソースマップされたスタックトレース付きの特定のコンソールメッセージを取得
list_console_messages	現在のページのすべてのコンソールメッセージをリスト表示
list_network_requests	ページが行ったすべてのネットワークリクエストをリスト表示
get_network_request	ヘッダーとボディを含む特定のリクエストの詳細を取得
performance_start_trace	DevTools パフォーマンストレースを開始
performance_stop_trace	トレースを停止して生データを返す
performance_analyze_insight	トレースから実用的な洞察を抽出（オプションで CrUX フィールドデータを含む）
emulate	デバイスをエミュレート（モバイル、タブレットなど）
resize_page	ブラウザビューポートをリサイズ

重要な設計上の決定

アクセシビリティツリー UID — 先にスナップショット、次に操作

要素と対話するツールは uid パラメータを取ります。UID は take_snapshot が返すアクセシビリティツリーから取得します。エージェントは常に最初に take_snapshot を呼び出して現在の UID を取得し、次に対象 UID をアクションツールに渡します。これにより DOM が変更されると壊れやすい CSS セレクターや XPath 式が不要になります。

Puppeteer 操作結果の待機 — ポーリングループなし

すべての対話（クリック、入力、ナビゲート）の後、Puppeteer はエージェントに制御を返す前にページが安定するのを待ちます。エージェントはページの準備ができているかどうかを明示的にポーリングする必要はありません。これにより JavaScript がページを更新し終わる前にエージェントが操作するというタイミングバグの一般的なクラスがなくなります。

Selenium/Playwright より CDP

CDP は Playwright より低レベルのアクセスを提供します。エージェントはソースマップされたスタックトレース付きのコンソールメッセージを読み取り、ネットワークリクエストをインターセプトし、任意の JavaScript を実行し、DevTools レベルのパフォーマンストレースを記録できます。

管理された Chrome vs. 既存インスタンスへの接続

デフォルトでは、サーバーは専用プロファイルで独自の Chrome を起動します。エージェントがセッション状態（ログインアカウント）を維持する必要がある場合やマニュアルテストと並行して作業する場合は、リモートデバッグを有効にして実行している既存の Chrome インスタンスに接続できます。

よくある質問

サーバーが起動する前に Chrome が実行されている必要がありますか？

いいえ。デフォルトでは、ブラウザを必要とするツールが最初に呼び出されたときに、サーバーが Puppeteer 経由で独自の管理された Chrome インスタンスを起動します。Chrome はサーバーの起動時ではなく、実際に必要なときにのみ起動します。

ツールはどのようにページ要素を識別しますか？

要素と対話するツール（click、fill、hover）は uid パラメータを取ります。UID は take_snapshot が返すページスナップショットから取得します。エージェントは take_snapshot を呼び出し、uid で対象要素を識別し、その uid をアクションツールに渡します。

CrUX API とは何で、いつ外部にデータを送信しますか？

Chrome ユーザーエクスペリエンスレポート（CrUX）API は公開 URL の実際のユーザーパフォーマンスフィールドデータを提供します。performance_analyze_insight がラボトレースデータと一緒に使用します。サーバーフラグで無効にして URL が Google の API に送信されないようにできます。

Authors: Qiushi Wu & Orange 🍊