ランタイム分析情報を活用: エージェント向け Chrome DevTools のサードパーティ デベロッパー ツールを導入

Wolfgang Beyer
Wolfgang Beyer
X GitHub

公開日: 2026 年 6 月 18 日

最新のウェブ アプリケーションを効果的にデバッグするには、AI エージェントはソースコードだけでなく、実行時のアプリケーションの動作を理解する必要があります。

Chrome DevTools for agents 向けにサードパーティのデベロッパー ツールを導入します。アプリやフレームワークから AI エージェントに内部状態を直接確認させることができるようになりました。これにより、エージェントは画面上で発生していることと、バックグラウンドで実行されているロジックを結びつけることができます。

目標: 静的分析を超えて

最新のウェブ開発は、抽象化に基づいて構築されています。たとえば、Angular、React、Vue などのフレームワーク、WordPress や Shopify などの CMS プラットフォーム、CSS、3D グラフィック、アニメーション用のライブラリなどです。DevTools は最終的にレンダリングされた DOM に直接アクセスできますが、アプリケーションの「真実」は、コンポーネント階層、JavaScript シグナル、バックエンド状態など、フレームワークの内部状態に存在することがよくあります。

サードパーティのデベロッパー ツールに関する Google の目標は、あらゆるライブラリがこのリッチで実用的なコンテキストを AI エージェントと共有できるようにすることです。これにより、エージェントはこれまで「見えなかった」問題をデバッグできます。たとえば、次のような問題です。

  • コンポーネントの階層: ページ上の DOM 要素を、対応するフレームワーク コンポーネントと内部状態に直接マッピングします。
  • 内部状態の検査: デバッグ セッション内でサーバーサイドの状態やデータベース コンテンツに直接アクセスします。

仕組み: Discovery API

サードパーティのデベロッパー ツールは、イベントベースの JavaScript API を使用します。Chrome DevTools MCP サーバーは、グローバル window オブジェクトで devtoolstooldiscovery イベントをディスパッチして、これらのツールを検出します。devtoolstooldiscovery イベントは、すべてのページ ナビゲーションで自動的にディスパッチされます。選択したページが変更された場合も同様です。また、list_3p_developer_tools MCP ツールを使用して明示的にディスパッチすることもできます。

独自のツールを実装する

ライブラリまたはアプリケーションのツールを公開するには、この検出イベントをリッスンし、ToolGroup で応答する必要があります。

window.addEventListener('devtoolstooldiscovery', (event) => {
  event.respondWith({
    name: "My Library Tools",
    description: "Tools for inspecting internal library state",
    tools: [
      {
        name: "getInternalState",
        description: "Returns the current internal state of the framework.",
        inputSchema: {
          type: "object",
          properties: {
            componentId: { type: "string" }
          }
        },
        execute: async (input) => {
          // Access your framework's internal registry
          return myFramework.getState(input.componentId);
        }
      }
    ]
  });
});

実装は次のとおりです。

  1. スキーマを定義する: JSON スキーマを使用して、ツールが想定する入力を定義します。
  2. ロジックを処理する: ページのコンテキストで実行され、シリアル化可能なデータを返す execute 関数を実装します。
  3. DOM 要素: シリアル化できないオブジェクトは、エージェントのページと DevTools 間で送信できません。DOM 要素は例外です。ツールが DOM 要素を返すと、エージェント用 DevTools は、take_snapshot ツールで使用される同じ UID に自動的にマッピングします。これにより、エージェントはすべてのページ要素（フレームワークから取得した要素か、ページ スナップショットから取得した要素かに関係なく）を同じ方法で操作できます。

MCP を使用してツールを操作する

ツールを登録すると、コーディング エージェントはエージェント用 DevTools を介してツールとやり取りできるようになります。list_3p_developer_tools MCP ツールは、ページで利用可能なサードパーティ ツールの説明を返します。また、選択したページが変更されると（ナビゲーション後など）、DevTools は利用可能なツールのリストを MCP ツールのレスポンスに追加します。

これらのツールを使用するには、エージェントが execute_3p_developer_tool を呼び出します。デベロッパー ツールは、入力パラメータがツールの定義と一致していることを確認するために、入力パラメータを自動的に検証します。

evaluate_script MCP ツールを使用してツールを呼び出すこともできます。エージェントは、DevTools がページで実行する JavaScript スニペットを提供します。このスニペットは、サードパーティのデベロッパー ツールを呼び出し、その出力をすぐに使用して計算を行うことができます。

evaluate_script を使用すると、エージェントは次のことができるため、複雑なデバッグに効果的です。

  • 作成オペレーション: 複数のステップを 1 つの実行に結合します。
  • シリアル化できない値を処理する: ページ コンテキストでフレームワーク固有のオブジェクトまたはシグナルを直接処理します。
  • パフォーマンスの最適化: シリアル化のオーバーヘッドを最小限に抑え、エージェントとブラウザ間の往復回数を減らします。

早期の成功: Angular の統合

Google は Angular チームと協力して、次の 2 つのサードパーティ デベロッパー ツールを実装しました。

  1. シグナル グラフツール: エージェントが状態とビューの関係を可視化できるようにします。これにより、無限ループや更新の失敗の原因となる依存関係を特定できます。
  2. 依存性注入（DI）グラフツール: エレメント インジェクタを公開します。これにより、エージェントはサービスが提供されている場所や欠落している場所を正確に確認できます。Angular の DI グラフはランタイム専用の構成であるため、静的解析だけではプロバイダ エラーをデバッグできません。
Angular Signal Graph ツールを使用してリアクティブ ループをデバッグする AI エージェントを示すスクリーンキャスト。

React チームは、サードパーティのデベロッパー ツールを使った実験も開始しました。

エージェント型デバッグの未来を Google とともに築く

この試験運用版の機能は、バージョン 0.25.0 以降のエージェント向け Chrome DevTools でご利用いただけます。これを有効にするには、--categoryExperimentalThirdParty コマンドライン フラグを使用します。

フレームワーク、ライブラリ、ツールを管理していて、コーディング エージェントのデバッグ エクスペリエンスを改善したい場合は、ぜひご協力ください。

エージェント型ウェブ開発の未来を一緒に築きましょう。