このページは Cloud Translation API によって翻訳されました。

コーディングエージェントが Chrome DevTools MCP を使用してブラウザセッションをデバッグできるようにする

Sebastian Benz

Alex Rudenko

公開日: 2025 年 12 月 11 日

多くのユーザーから要望のあった Chrome DevTools MCP サーバーの機能強化をリリースしました。コーディングエージェントがアクティブなブラウザセッションに直接接続できるようになりました。

この機能強化により、コーディングエージェントは次のことができるようになります。

既存のブラウザセッションを再利用する: ログインが必要な問題の修正をコーディングエージェントに依頼する場合を考えてみましょう。コーディングエージェントは、追加のログインを必要とせずに、現在のブラウジングセッションに直接アクセスできるようになりました。
アクティブなデバッグセッションにアクセスする: コーディングエージェントが DevTools UI でアクティブなデバッグセッションにアクセスできるようになりました。たとえば、Chrome DevTools のネットワークパネルで失敗したネットワークリクエストが見つかった場合は、そのリクエストを選択して、コーディングエージェントに調査を依頼します。[要素] パネルで選択した要素についても同様です。手動デバッグと AI 支援デバッグをシームレスに切り替えられるこの新機能に期待しています。

デモ動画:

自動接続機能は、Chrome DevTools MCP が Chrome インスタンスに接続する既存の方法に追加されたものです。なお、次のことは引き続き可能です。

Chrome DevTools MCP サーバー固有のユーザープロファイル（現在のデフォルト）で Chrome を実行します。
リモートデバッグポートを使用して実行中の Chrome インスタンスに接続します。
複数の Chrome インスタンスを分離して実行します。各インスタンスは一時プロファイルで実行されます。

仕組み

Chrome M145（現在は Canary 版）に、Chrome DevTools MCP サーバーがリモートデバッグ接続をリクエストできる新機能が追加されました。この新しいフローは、Chrome の既存のリモートデバッグ機能をベースに構築されています。デフォルトでは、Chrome でリモートデバッグ接続は無効になっています。デベロッパーは、まず chrome://inspect#remote-debugging にアクセスして、この機能を明示的に有効にする必要があります。

Chrome DevTools MCP サーバーが --autoConnect オプションで構成されている場合、MCP サーバーはアクティブな Chrome インスタンスに接続し、リモートデバッグセッションをリクエストします。悪意のあるユーザーによる不正使用を避けるため、Chrome DevTools MCP サーバーがリモートデバッグセッションをリクエストするたびに、Chrome はユーザーにダイアログを表示し、リモートデバッグセッションを許可する権限を求めます。また、デバッグセッションがアクティブな間、Chrome の上部に「Chrome は自動テストソフトウェアによって制御されています」というバナーが表示されます。

リモートデバッグのフロー: まず、リモートデバッグ機能を有効にします。次に、リモートデバッグ接続リクエストを確認します。デバッグセッションはバナーテキストで示されます。 — Chrome の新しいリモートデバッグフローと UI。

始める

新しいリモートデバッグ機能を使用する。まず Chrome でリモートデバッグを有効にしてから、新しい自動接続機能を使用するように Chrome DevTools MCP サーバーを構成する必要があります。

ステップ 1: Chrome でリモートデバッグを設定する

Chrome でリモートデバッグを設定する手順は次のとおりです。

chrome://inspect/#remote-debugging に移動して、リモートデバッグを有効にします。
ダイアログ UI に沿って、デバッグ接続の受信を許可または拒否します。

Chrome でリモートデバッグを有効にする方法を示すスクリーンショット — クライアントがリモートデバッグ接続をリクエストする前に、リモートデバッグを有効にする必要があります。

ステップ 2: 実行中の Chrome インスタンスに自動的に接続するように Chrome DevTools MCP サーバーを構成する

chrome-devtools-mcp サーバーを実行中の Chrome インスタンスに接続するには、MCP サーバーセットの --autoConnect コマンドライン引数を使用します。

次のコードスニペットは、gemini-cli の構成例です。

{
   "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--channel=canary"
      ]
    }
  }
}

ステップ 3: 設定をテストする

gemini-cli を開き、次のプロンプトを実行します。

Check the performance of https://developers.chrome.com

Chrome DevTools MCP サーバーは、実行中の Chrome インスタンスへの接続を試みます。ユーザー権限を求めるダイアログが表示されます。

リモートデバッグセッションを有効にするようユーザーに求める Chrome のダイアログ。 — リモートデバッグセッションを開始するユーザー権限を求める Chrome。

[許可] をクリックすると、Chrome DevTools MCP サーバーが developers.chrome.com を開き、パフォーマンストレースを取得します。

詳しい手順については、GitHub の README をご覧ください。

コーディングエージェントにデバッグセッションを引き継がせる

実行中の Chrome インスタンスに接続できるため、自動化と手動制御のどちらかを選択する必要はありません。DevTools を自分で使用することも、コーディングエージェントにデバッグタスクを渡すこともできます。ウェブサイトで問題を発見した場合は、DevTools を開いて、問題の原因となっている要素を特定できます。コーディングエージェントに問題を解決してもらう場合は、Chrome DevTools MCP Server を使用して解決できます。[要素] パネルで要素を選択し、コーディングエージェントに問題の調査を依頼できます。

ネットワークパネルでも同様に動作します。ネットワークリクエストを選択して、コーディングエージェントに調査を依頼できます。

ただし、これは最初のステップにすぎません。Chrome DevTools MCP サーバーを通じて、パネルデータをコーディングエージェントに段階的に公開していく予定です。どうぞご期待ください。