Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

Wolfgang Beyer

公開日: 2026 年 6 月 18 日

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

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

目標: 静的分析の先へ

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

サードパーティデベロッパーツールを使用する目的は、あらゆるライブラリがこの豊富な実用的なコンテキストを 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);
        }
      }
    ]
  });
});

実装は次のとおりです。

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

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

ツールを登録すると、コーディングエージェントは DevTools for Agents を介してツールを操作できます。list_3p_developer_tools MCP ツールは、ページで使用可能なサードパーティツールの説明を返します。また、選択したページが変更されると（移動後など）、DevTools は使用可能なツールのリストを MCP ツールのレスポンスに追加します。

これらのツールを使用するには、エージェントが execute_3p_developer_tool を呼び出します。DevTools は、入力パラメータがツールの定義と一致するように自動的に検証します。

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

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

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

早期の成功: Angular の統合

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

シグナルグラフツール: エージェントは状態とビューの関係を可視化できるため、無限ループや更新の失敗の原因となる依存関係を特定できます。
依存性注入（DI）グラフツール: 要素インジェクタを公開します。これにより、エージェントはサービスが提供されている場所や不足している場所を正確に確認できます。Angular の DI グラフは実行時のみの構成であるため、静的分析だけではプロバイダエラーをデバッグできません。

Angular シグナルグラフツールを使用してリアクティブループをデバッグする AI エージェントのスクリーンキャスト。

React チームもサードパーティデベロッパーツールを試しています。

エージェントデバッグの未来を Google とともに築きましょう

この試験運用版の機能は、バージョン 0.25.0 以降の Chrome DevTools for Agents で使用できます。有効にするには、--categoryExperimentalThirdParty コマンドラインフラグを使用します。

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

ドキュメントを確認する: GitHub のテクニカルガイド。
お問い合わせ: Google は、これらの API を反復処理し、AI を活用したウェブデバッグの未来を定義するパートナーを募集しています。お問い合わせは、GitHub リポジトリで issue を作成してください。

エージェントウェブ開発の未来を Google とともに築いていきましょう。

ランタイム分析情報を活用: エージェント向け Chrome DevTools のサードパーティ デベロッパー ツールを導入 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。