エージェント向け Chrome DevTools は、Chrome DevTools の機能を AI コーディング ワークフローに導入するツールスイートです。エージェント向け Chrome DevTools をインストールすると、以下にアクセスできるようになります。
- MCP サーバー: オープンソースの Model Context Protocol を使用して、AI エージェントをライブブラウザ インスタンスに接続します。
- Chrome DevTools CLI: ターミナルからブラウザを直接操作するためのインターフェース。
- エージェント スキル: ユーザー補助やパフォーマンスのデバッグなどの複雑なタスクで複数のツールを連携させる方法をエージェントに教える専門的な指示。
ウェブ開発のコンテキストでは、エージェント向け Chrome DevTools により、デバッグ機能が AI エージェントに統合されます。
たとえば、エージェントはツールを使用してパフォーマンス トレースを記録して評価し、ウェブサイトのパフォーマンスを分析して、改善の可能性を特定できます。エージェント向けの DevTools を使用すると、ウェブ開発だけでなく、静的な HTML を取得するだけでなく、ライブ ウェブを閲覧することもできます。
セットアップ
このガイドでは、コーディング エージェントがライブの Chrome ブラウザを制御して検査できるように、エージェント向け Chrome DevTools を設定する方法について説明します。
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 Browser Subagent のドキュメントをご覧ください。
CLI を使用してインストールする
エージェント向け Chrome DevTools を設定するには、エージェントがサポートしている場合は、JSON 構成ファイルまたは CLI コマンドを使用してサーバーを直接インストールできます。エージェントのスキルや、エージェントが DevTools の機能を使用するのに役立つ専門家の指示を含む公式の拡張機能やプラグインを提供するエージェントもあります。
エージェントがここに記載されていない場合は、Chrome DevTools for Agents 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 で次のスラッシュ コマンドを使用します。Marketplace レジストリを追加します。
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
マーケットプレイス レジストリからプラグインをインストールします。
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
詳しくは、公式の Chrome DevTools Claude プラグインのページをご覧ください。
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.
次のステップ
セットアップをカスタマイズするには、構成をご覧ください。