公開日: 2026 年 5 月 19 日
AI コーディング ツールはコードの作成に非常に優れていますが、実行とは切り離されていることがよくあります。複雑なウェブアプリを生成できますが、その動作を観察したり、ライブ ブラウザで出力を検査したりすることはできません。
エージェント用の Chrome DevTools は、コーディング エージェントがコードをリアルタイムで検証、デバッグ、最適化するために必要な可視性を提供します。数か月前に初めてご紹介しましたが、このたび、エージェント向けの Chrome DevTools が安定版 1.0 としてリリースされました。
エージェントをブラウザに接続する
エージェント向け Chrome DevTools を使用すると、エージェントが実際のユーザーと同じようにサイトを体験できます。この安定版リリースには、ユーザーとエージェントが Chrome とやり取りするためのいくつかの方法が含まれています。
- Model Context Protocol（MCP）サーバー: 大規模言語モデル（LLM）を DevTools のデバッグ機能に接続するサーバー。
- コマンドライン インターフェース（CLI）: エージェントがアクションをスクリプトにバッチ処理できる、トークン効率の高い代替手段。
- エージェント スキル: ユーザー補助やパフォーマンスのデバッグなどのタスクで、特定ツールをいつどのように使用するかをエージェントに教える専門的な指示。
自動的にデバッグ、エミュレート、監査する
リリース 1.0 では、以前は手動で行っていた高度なデバッグ タスクをコーディング エージェントが実行できるようになりました。
品質監査を自動化する
エージェントは、Lighthouse 監査を実行してウェブサイトの品質を評価できるようになりました。アクセシビリティ、SEO、ベスト プラクティス、エージェント ブラウジングに関する問題を特定できます。これは、ランタイムを理解するリンターのようなものです。品質ゲートとして使用すると、コーディング エージェントが本番環境に到達する前に重大なブロッカーを検出するエキスパートになります。
実際のユーザー エクスペリエンスをエミュレートする
エージェントは、エージェント用の DevTools を使用して、さまざまなデバイスや場所でサイトがどのように表示され、動作するかをエミュレーション ツールを使用してテストできます。ウィンドウのサイズ変更、位置情報のシミュレート、ネットワークと CPU の速度を調整して実際の状況を再現できます。これにより、ブラウザのサイズを手動で変更しなくても、エージェントはハンバーガー メニューなどのモバイル固有の動作をテストできます。
Chrome 拡張機能を開発してデバッグする
エージェントに Chrome 拡張機能の開発だけでなく、デバッグも依頼できます。エージェントは、拡張機能のアクションを直接インストール、再読み込み、トリガーできます。これにより、開発中の「保存と更新」の頻繁なサイクルを自動化できます。バックグラウンド スクリプトや拡張機能ページを詳しく調べて、より複雑なブラウザ設定のバグを修正することもできます。
WebMCP ツールをデバッグしてテストする
また、この新しい API の実装を支援するため、WebMCP（ウェブ モデル コンテキスト プロトコル）のオリジン トライアルで詳細な可視性を提供します。
エージェントがシグナルに依存して DOM をナビゲートするプランを推測するのではなく、WebMCP を使用して公開する構造化ツールと直接やり取りできます。これにより、これらのツールの開発、テスト、デバッグが容易になります。エージェントは、これらのツールを一覧表示し、プログラムで呼び出し、リアルタイムで正確性を検証できます。これにより、サイトへの WebMCP サポートの追加とテストのプロセスが効率化されます。
メモリリークを検出してデバッグする
また、メモリ分析専用のツールも追加しました。エージェントがヒープ スナップショットを取得して、切り離された DOM ノードなどのメモリリークを特定できるようになりました。エージェントは、メモリリークのデバッグに関する専門的なスキルを使用して、パフォーマンス エキスパートとして機能し、アプリケーションを効率的かつ高速に保つことができます。
自動接続でセッションを引き継ぐ
エージェントが独自のサンドボックス化されたブラウザ インスタンスを開く（通常、エージェントの DevTools がエージェントにブラウザへのアクセス権を付与する方法）のではなく、現在のブラウザ コンテキストをエージェントと共有できます。これは、認証されたダッシュボードなど、ログインが必要なものをデバッグする場合に最適です。この場合、すべての再認証を行うことなく、AI エージェントに技術的な調査を引き継いでもらうことができます。
サードパーティのデベロッパー ツールで内部状態を公開する
サードパーティのデベロッパー ツールを使用すると、ウェブ アプリケーションが内部状態とコンポーネントの詳細を AI エージェントと直接共有できます。これらのツールは、通常は標準分析から隠されているデータへのアクセスを提供することで、複雑なロジックを理解するために必要なコンテキストをエージェントに提供します。これにより、ブラウザでのアプリの実際の動作に基づいて、より正確なデバッグ候補が表示されます。
始める
安定版は npm を使用してインストールするか、選択したエージェントで直接構成できます。
Antigravity
エージェント向けの Chrome DevTools は、Antigravity 2.0 にバンドルされています。ブラウザ サブエージェントを使用すると、すぐに使用を開始できます。次のようなスラッシュ コマンドを試してください。
/browser Navigate to the Google homepage
専門的なエージェント スキルにアクセスするには、初期設定の Build with Google の手順中またはアプリケーション設定内で、DevTools プラグインをインストールすることをおすすめします。詳細については、Antigravity Browser Subagent のドキュメントをご覧ください。
Gemini CLI
MCP パッケージとスキルを拡張機能としてインストールするには、次のコマンドを使用します。
$ gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
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 のドキュメントをご覧ください。GitHub のソースコードを調べることもできます。