エージェント向け 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.
次のステップ
設定をカスタマイズするには、構成をご覧ください。