
2026/03/16 4:12
「Chrome DevTools MCP」 (原文と同じく略語をそのまま使用します)
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
改訂要約
Chrome の MCP(Machine‑Code Processor)サーバーは、現在実行中の Chrome セッションに直接コーディングエージェントを接続できるようになり、新しいインスタンスを毎回起動する必要がなくなりました。
この機能を利用するには、
chrome://inspect#remote-debugging でリモートデバッグを有効化し、MCP サーバーを --autoConnect フラグ付きで起動します(例:gemini-cli --autoConnect --channel=beta)。エージェントがセッションを要求すると、Chrome は許可ダイアログを表示し、「Chrome is being controlled by automated test software」というバナーを表示します。エージェントはそのアクティブなセッションに対して Network や Elements などの DevTools パネルへアクセスできます。
MCP サーバーは依然として元々の起動方法をサポートしています:ユーザープロファイルの指定、リモートデバッグポート経由での接続、または隔離された一時プロファイルの実行。
サンプルワークフローは次のとおりです。リモートデバッグを有効化した後、エージェントプロンプトに「Check the performance of https://developers.chrome.com」と入力すると、MCP サーバーが接続し、ページを開き、パフォーマンストレースを取得します。
Chrome M144(Beta)で利用可能なこの機能は、デベロッパーが新しいセッションを開くことなく手動の DevTools 使用と AI 支援デバッグをシームレスに切り替えられるようにし、将来的に MCP を通じてコーディングエージェントへより多くの DevTools パネルデータを段階的に公開する基盤を整備します。
本文
公開日:2025年12月11日
Chrome DevTools MCPサーバーに、多くのユーザーから要望されていた機能―「コーディングエージェントがアクティブなブラウザセッションへ直接接続できる」―を実装しました。
この新機能により、コーディングエージェントは次のことが可能になります。
-
既存のブラウザセッションを再利用
サインイン後の作業で不具合を修正したい場合でも、新たなサインインなしで現在の閲覧セッションにアクセスできます。 -
アクティブなデバッグセッションへアクセス
コーディングエージェントは、DevTools のネットワークパネルや要素パネルで失敗したリクエスト・要素を選択し、検証を依頼できるようになります。これにより、手動と AI アシスタンスのデバッグがスムーズに切り替えられます。
【実際の操作例】
自動接続機能は、Chrome DevTools MCP が Chrome インスタンスへ接続する既存の方法に追加されるものです。なお、以下の手段で引き続き接続が可能です。
- Chrome DevTools MCP サーバー専用ユーザープロファイル(現在のデフォルト)で Chrome を起動
- リモートデバッグポート経由で実行中の Chrome インスタンスへ接続
- 暫定プロファイルを使用した複数の分離済み Chrome インスタンスを起動
仕組み
Chrome M144(現在ベータ版)に新機能を追加し、Chrome DevTools MCP サーバーがリモートデバッグ接続を要求できるようにしました。これは Chrome の既存のリモートデバッグ機能を拡張したものです。デフォルトではリモートデバッグは無効化されており、
chrome://inspect#remote-debugging を開き手動で有効化する必要があります。
MCP サーバーを
--autoConnect オプション付きで起動すると、アクティブな Chrome インスタンスに接続しリモートデバッグセッションを要求します。悪用防止のため、Chrome は毎回ユーザー許可ダイアログを表示します。デバッグセッションがアクティブになると、画面上部に「Chrome is being controlled by automated test software」というバナーが表示されます。
使い始める
-
Chrome でリモートデバッグを有効化
- Chrome ≥ 144 の場合は
にアクセスし、リモートデバッグを有効にします。ダイアログ UI で受信接続の許可/拒否を設定してください。chrome://inspect/#remote-debugging
- Chrome ≥ 144 の場合は
-
MCP サーバーを自動接続用に設定
-
フラグ付きで chrome-devtools-mcp を起動します。例:--autoConnect
用設定は以下のようになります。gemini-cli{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--autoConnect", "--channel=beta" ] } } }
-
-
設定をテスト
-
を開き、次のようなプロンプトを実行します。gemini-cliCheck the performance of https://developers.chrome.com -
MCP サーバーは実行中の Chrome インスタンスへの接続を試み、許可ダイアログが表示されます。「Allow」をクリックするとサーバーが
を開き、パフォーマンストレースを取得します。developers.chrome.com
-
詳細な手順については GitHub の README を参照してください。
コーディングエージェントにデバッグセッションを任せる
ライブの Chrome インスタンスへ接続することで、手動で DevTools を使用しつつ AI アシストを組み合わせられます。サイト上で問題を発見した場合は、DevTools で該当要素やネットワークリクエストを検査し、MCP サーバー経由でコーディングエージェントに調査・修正を依頼できます。
これは第一歩に過ぎません。今後は Chrome DevTools MCP Server を通じて、より多くのパネルデータをコーディングエージェントへ段階的に公開していく予定です。ぜひご期待ください!