エージェント向け Chrome DevTools は、Chrome DevTools の機能を AI コーディング ワークフローに統合するツールスイートです。エージェント向け Chrome DevTools をインストールすると、次の機能にアクセスできます。
- MCP サーバー: オープンソース Model Context Protocol を使用して、AI エージェントをライブブラウザ インスタンスに接続します。
- Chrome DevTools CLI: ブラウザをターミナルから直接操作するためのインターフェースです。
- エージェント スキル: アクセシビリティや パフォーマンスのデバッグなど、複雑なタスクで複数のツールを 連携させる方法をエージェントに教える専門家による手順です。
ウェブ開発のコンテキストでは、エージェント向け Chrome DevTools はデバッグ機能を AI エージェントに統合します。
たとえば、エージェントはツールを使用してパフォーマンス トレースを記録して評価し、ウェブサイトのパフォーマンスを分析して改善点を見つけることができます。ウェブ開発以外にも、エージェント向け DevTools を使用すると、エージェントは静的な HTML を取得するだけでなく、ライブウェブを閲覧することもできます。
設定
このガイドでは、エージェント向け Chrome DevTools を設定して、コーディング エージェントがライブ Chrome ブラウザを制御して検査できるようにする方法について説明します。
chrome-devtools-mcp パッケージを使用して、コーディング エージェント（Gemini、Claude、Cursor、Copilot など）からライブ Chrome ブラウザを制御して検査します。エージェント向け Chrome DevTools にはフルパッケージのツールが用意されていますが、CLI はシェルベースの自動化を対象としたサブセットのみをサポートしています。
サポートされている IDE とモデル
エージェント向け Chrome DevTools は、MCP プロトコルをサポートするツールまたは IDE をサポートしています。これには、Antigravity、Gemini CLI、Claude Code、Cursor、Copilot などが含まれます。
セキュリティ上の考慮事項
エージェントはアクセスしたページを表示して操作できるため、アクティブな認証済みセッションでブラウザに接続すると、エージェントがユーザーに代わって効果的に操作できます。エージェントと共有したくない機密情報や個人情報は共有しないでください。
前提条件
エージェント向け Chrome DevTools をインストールする前に、環境が次の要件を満たしていることを確認してください。
エージェント向け Chrome DevTools を設定するには、希望するコーディング環境に合った方法を選択します。エージェントによっては手動でのインストールが必要ですが、ツールが事前に統合されているものもあります。
Antigravity
エージェント向け Chrome DevTools には、Antigravity 2.0 が事前にバンドルされています。すぐに ブラウザ サブエージェント で使用を開始できます。次のようなスラッシュ コマンドを試してください。
/browser Navigate to the Google homepage
特殊なエージェント スキルにアクセスするには、初期設定の [Build with Google] ステップまたはアプリケーション設定で DevTools プラグインをインストールすることをおすすめします。詳細については、Antigravity ブラウザ サブエージェントのドキュメントをご覧ください。
CLI を使用してインストールする
エージェント向け Chrome DevTools を設定するには、エージェントがサポートしている場合は、JSON 構成ファイルまたは CLI コマンドを使用してサーバーを直接インストールできます。エージェントによっては、エージェント スキルを含む公式の拡張機能やプラグインが用意されています。エージェント スキルは、エージェントが DevTools 機能を使用するのに役立つ専門家による手順です。
エージェントがここに記載されていない場合は、エージェント向け Chrome DevTools GitHub リポジトリでインストール方法を確認してください。
エージェント向け Chrome DevTools をコマンドライン エージェントに追加するには、特定のエージェントの組み込み CLI コマンドを使用します。
Gemini CLI
次のコマンドを使用して、MCP パッケージと付属のスキルを含む Gemini CLI 拡張機能をインストールします。
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
次のコマンドを使用して、MCP パッケージのみをインストールします。
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code
エージェント向け Chrome DevTools を Claude Code プラグインとしてインストールするには、Claude Code で次のスラッシュ コマンドを使用します。マーケットプレイス レジストリを追加します。
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
マーケットプレイス レジストリからプラグインをインストールします。
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
詳細については、Chrome DevTools Claude Plugin ページの公式ページをご覧ください。
Codex
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
JSON 構成を使用してインストールする
mcpServers 構成キーをサポートする他のエージェントの場合は、このエントリを手動で追加し、npm i
chrome-devtools-mcp を使用してエージェント向け DevTools をインストールしてください。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
他のエージェントにインストールする
記載されていないエージェント用に構成するには、 Chrome DevTools MCP GitHub リポジトリをご覧ください。
設定をテストする
すべてが機能しているかどうかを確認するには、エージェントに次のプロンプトを入力します。
Check the performance of https://developers.chrome.com
エージェントがブラウザ ウィンドウを開き、パフォーマンス トレースを記録します。
セットアップに関するトラブルシューティング
エージェントがツールを実行できず、Chrome DevTools スキルにアクセスできる場合、問題の自動修正が試行されることがあります。自動修正されない場合は、エージェントに明示的にプロンプトを表示できます。
Use the Chrome DevTools troubleshooting skill to fix my setup.
より具体的に指定することもできます。
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
詳細構成
エージェントがブラウザにアクセスする他の方法をいくつかご紹介します。
ヘッドレス モードを構成する
ブラウザ ウィンドウを表示せずにバックグラウンド タスクを実行する場合は、Chrome をヘッドレス（UI なし）モードで実行できます。サーバー引数に --headless フラグを追加します。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
既存のブラウザ セッションに接続する
デフォルトでは、エージェント向け DevTools は新しい Chrome インスタンスを起動します。ただし、--autoConnect フラグを使用すると、エージェントを既存のブラウザ セッションに接続できます。これは、ログインまたはすでに開始したセッションの背後にある問題をエージェントが調査する必要がある場合に特に便利です。
既存のセッションに接続する方法は 2 つあります。
自動接続を使用する（Chrome 144 以降）
Chrome DevTools MCP サーバーが --autoConnect オプションで構成されている場合、MCP サーバーはアクティブな Chrome インスタンスに接続し、リモート デバッグ セッションをリクエストします。
- 実行中の Chrome ブラウザで
chrome://inspect/#remote-debuggingに移動して、リモート デバッグを有効にします。 MCP 構成を更新して、
--autoConnectフラグを追加します。{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }エージェントにプロンプトを発行します。Chrome に、リモート デバッグ セッションを許可するユーザー権限を求めるダイアログが表示されます。[許可] をクリックします。
リモート デバッグ ポートを使用して手動で接続する
--autoConnect を使用できない場合（サンドボックス環境内でエージェントを実行する場合など）は、デバッグポートを使用して Chrome を手動で起動できます。例（macOS）:
リモート デバッグ ポートを有効にして Chrome ブラウザを起動します。セキュリティ上の理由から、カスタム ユーザーデータ ディレクトリも指定する必要があります。
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable--browser-urlパラメータを使用して接続するようにエージェントを構成します。{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }