ChromeをAIエージェントの目にする ─ Chrome DevTools MCPで開発中のブラウザをそのまま調査

Googleが公式に公開している「Chrome DevTools MCP」は、Claude CodeやCursorといったAIコーディングエージェントを、起動中のChromeブラウザに直接接続するためのMCPサーバーだ。AIがネットワークリクエストを見たり、DOM要素を調べたり、コンソールのエラーを読んだりできるようになる。MCP（AIエージェントにツールを繋ぐ規格）に対応したツールであれば、Claude CodeやCursorなど主要なエージェントから利用できる。

何ができるか

Chrome DevTools MCPをAIエージェントに接続すると、エージェントは以下の操作が可能になる：

ネットワークリクエストの確認 ─ APIレスポンスのステータスやペイロードを調べる
DOM要素の検査 ─ DevToolsのElementsパネルで選択した要素を読み取る
コンソールログの取得 ─ スタックトレース付きでエラーを確認（ソースマップ対応）
スクリーンショット ─ 現在の画面状態をキャプチャ
パフォーマンストレース ─ Chromeのパフォーマンス計測を実行して分析

つまり「このページのAPIが500を返しているのを直して」と頼むと、エージェントがリクエスト内容を直接確認しながらコードを修正できる。

2つの接続方法

方法1：自動接続（Chrome M144以降）

Chrome 144（現在ベータ）から対応した新しい接続方式。--autoConnect オプションを付けてMCPサーバーを起動すると、Chromeがリモートデバッグ接続の許可ダイアログを表示する。ユーザーが許可すると、すでに開いているタブのセッション（ログイン状態など）をそのまま使える。

Claude Codeへの追加は以下のコマンドで行う：

1
claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest --autoConnect --channel=beta

方法2：リモートデバッグポート経由（従来の方法）

Chromeを --remote-debugging-port=9222 で起動し、MCPサーバーをそのポートに向ける。サンドボックス環境やCIでの自動テストに向いている。

セキュリティ上の注意

自動接続を有効にすると、Chromeのタブに「自動テストソフトウェアで制御中」というバナーが表示される。AIが勝手にブラウザを操作している状態がひと目でわかる設計になっている。

インストール

1
npx chrome-devtools-mcp@latest

Claude CodeのMCP設定に追加する場合は、claude mcp add コマンドまたは設定ファイルに直接記述する。

実際の使いどころ

Webアプリの開発中に最も役立つのは「なぜこのAPIが失敗しているのか」の調査だ。従来はエラーログをコピーしてAIに貼り付ける手順が必要だったが、Chrome DevTools MCPがあればエージェントが自分でネットワークパネルを確認しに行く。

ログイン済みのセッションを使えるのも地味に重要で、認証が必要なページのデバッグをそのまま依頼できる。ただし X.com のようにセキュリティ制限が厳しいサービスでは、MCP 経由の操作がブロックされるケースがある。自社開発の Web アプリや API の確認が主な用途と考えておいたほうがいい。