概要

Chrome DevTools MCPサーバー に新機能追加。 コーディングエージェント がアクティブなブラウザセッションへ直接接続可能に。 サインイン済みセッション や デバッグセッション の再利用が実現。 セキュリティ確保 のため、接続時にユーザー許可が必須。 今後さらに多くのDevToolsパネルデータ公開予定。

Chrome DevTools MCPサーバーの新機能概要

• Chrome DevTools MCPサーバー の強化
  • コーディングエージェントが アクティブなブラウザセッション へ直接接続可能
  • 既存セッションの再利用 や アクティブなデバッグセッション へのアクセスが可能
• サインイン済みセッション再利用
  • サインイン後のセッションを利用し、追加のサインイン不要
  • サインインが必要な問題解決をコーディングエージェントが担当可能
• デバッグセッションへのアクセス
  • DevTools UIでアクティブなデバッグセッションへコーディングエージェントがアクセス
  • ElementsパネルやNetworkパネルで選択した要素やリクエストを調査依頼可能
• 手動操作とAIアシストのシームレスな切り替え
  • 手動デバッグからAIへのタスク引き継ぎが容易
• 既存の接続方法も継続利用可能
  • MCP専用プロファイルでの起動
  • リモートデバッグポート経由の接続
  • 一時プロファイルでの複数インスタンス運用

新しいリモートデバッグフローの仕組み

• Chrome M144（Beta） に新機能追加
  • MCPサーバーが リモートデバッグ接続 をリクエスト可能
  • 既存のリモートデバッグ機能を拡張
• デフォルトではリモートデバッグ無効
  • chrome://inspect#remote-debugging で 明示的に有効化 が必要
• --autoConnectオプション による自動接続
  • MCPサーバーがアクティブなChromeインスタンスへ自動接続
  • デバッグセッション開始時、 ユーザー許可ダイアログ を表示しセキュリティ確保
  • デバッグ中は「 Chromeは自動テストソフトウェアにより制御されています」バナー表示

新しいリモートデバッグ機能の利用手順

• Step 1: Chromeでリモートデバッグを有効化
  • Chrome（バージョン144以上）で chrome://inspect/#remote-debugging にアクセス
  • ダイアログUIでデバッグ接続の許可/拒否を選択
• Step 2: MCPサーバーの自動接続設定
  • --autoConnect コマンドラインオプションを指定
  • 設定例（gemini-cliの場合）:

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

• Step 3: 設定テスト
  • gemini-cliで「Check the performance of https://developers.chrome.com」と入力
  • MCPサーバーがChromeインスタンスへ接続し、 ユーザー許可ダイアログ を表示
  • 許可後、developers.chrome.comを開きパフォーマンストレースを取得

コーディングエージェントによるデバッグセッションの引き継ぎ

• 自動化と手動操作の両立
  • DevToolsで問題発見後、調査や修正をAIコーディングエージェントへ引き継ぎ可能
  • ElementsパネルやNetworkパネルで選択した対象を直接調査依頼
• 今後の展望
  • さらに多くのパネルデータをコーディングエージェントへ段階的に公開予定
  • 継続的な機能拡張を予告

詳細・最新情報はGitHubのREADMEを参照