公開日: 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 ツールをデバッグしてテストする
また、WebMCP（Web Model Context Protocol）オリジン トライアルの可視性を高め、この新しい API の実装を支援します。
エージェントがシグナルに依存して DOM のナビゲーション プランを推測するのではなく、WebMCP を使用して公開する構造化ツールと直接やり取りできます。これにより、これらのツールの開発、テスト、デバッグが容易になります。エージェントは、リスト表示、プログラムによる呼び出し、正確性のリアルタイム検証を行うことができます。 これにより、サイトへの WebMCP サポートの追加とテストのプロセスが効率化されます。
メモリリークを検出してデバッグする
メモリ分析専用のツールも追加しました。エージェントはヒープ スナップショットを取得して、切り離された DOM ノードなどのメモリリークを特定できるようになりました。エージェントは、メモリリークのデバッグに特化したスキルを使用して、パフォーマンスのエキスパートとして機能し、アプリケーションを軽量かつ高速に保つことができます。
自動接続でセッションを引き継ぐ
エージェントが独自のサンドボックス化されたブラウザ インスタンスを開くのではなく（エージェント向け DevTools では通常、エージェントがブラウザにアクセスできるようにします）、現在のブラウザ コンテキストをエージェントと共有できます。これは、認証されたダッシュボードなど、ログインが必要なものをデバッグする場合に最適です。この場合、AI エージェントが技術的な調査を引き継ぎ、すべてを再認証する必要はありません。
サードパーティ デベロッパー ツールで内部状態を公開する
サードパーティ デベロッパー ツールを使用すると、ウェブ アプリケーションは内部状態とコンポーネントの詳細を AI エージェントと直接共有できます。通常は標準分析から隠されているデータにアクセスすることで、エージェントは複雑なロジックを理解するために必要なコンテキストを取得できます。これにより、ブラウザでのアプリケーションの実際の動作に基づいて、より正確なデバッグ候補が生成されます。
始める
npm を使用して安定版リリースをインストールするか、選択したエージェントで直接構成できます。
Antigravity
エージェント向け Chrome DevTools には、Antigravity 2.0 がバンドルされています。ブラウザ サブエージェント ですぐに使用を開始できます。次のようなスラッシュ コマンドを使用してみてください。
/browser Navigate to the Google homepage
専門的なエージェント スキルにアクセスするには、初期設定の [Google でビルド] ステップまたはアプリケーション設定で DevTools プラグインをインストールすることをおすすめします。詳細については、Antigravity ブラウザ サブエージェントのドキュメントをご覧ください。
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 で ソースコードを確認することもできます。