用語解説

Chrome DevTools Protocol

Chromium系ブラウザのリモート操作用インターフェース。ローカルのデバッグポートを通じて、プログラムがタブを調べて操作できます。

定義

Chrome DevTools Protocol(CDP)は、Chromeが開発ツール向けに公開しているインターフェースです。組み込みのデベロッパーツールが使っているのと同じ経路を、ローカルのWebSocketを通じてほかのプログラムにも開放したものです。これを使うと、プログラムはタブを開き、ページを移動し、DOMを読み、入力を送り、スクリーンショットを撮れます。

Chrome 136以降、ブラウザはデフォルトのユーザーデータディレクトリに対して従来のリモートデバッグ用フラグを無視します。そのため、操作されるChromeには、inspectページのリモートデバッグ設定(Chrome 144以降)か、専用のポートを持つ専用のユーザーデータディレクトリのどちらかが必要です。

出典: Chrome DevTools Protocol · Chrome for Developers: Changes to remote debugging switches · chrome-devtools-mcp: configuration

具体例

たとえば、Chrome 144以降を使っているとします。chrome://inspect/#remote-debuggingを開いてリモートデバッグを有効にし、Chrome DevTools MCPを--autoConnectで起動します。Chromeが接続を許可するかを尋ねてくるので、使うつもりのウィンドウで承認します。これで、エージェントは開いているタブを一覧にして操作できるようになります。

分離しておきたい場合や、Chromeのバージョンが古い場合は、専用のユーザーデータディレクトリを持つ2つ目のChromeをポート9222で起動し、MCPサーバーにhttp://127.0.0.1:9222を指定します。Chrome 136以降、ふだん使いのプロファイルでは従来のフラグだけではもう動きません。両方のコマンドを下に載せています。

# Mode A: Chrome 144+, remote debugging enabled on chrome://inspect/#remote-debugging
npx -y chrome-devtools-mcp@latest --autoConnect

# Mode B: dedicated profile on a loopback port
"<path to Chrome>" --remote-debugging-port=9222 --user-data-dir="$PWD/.browser/chrome" about:blank
npx -y chrome-devtools-mcp@latest --browserUrl=http://127.0.0.1:9222

ディレクトリへのローンチで重要な理由

CDPは、あなたがログインしているブラウザを、エージェントが操作できるものに変える仕組みです。だからこそ注意が必要です。デバッグポートは、ログインが必要なページも含めてブラウザ全体を操作できます。ポートをループバックアドレスに限定し、決してトンネルで外部に出さず、ひとまとまりの作業が終わったら閉じることは、任意の強化策ではなく、セットアップの一部です。

LaunchRepoでの扱い

BROWSER-SETUP.mdには2つのモードがあります。A:Chrome 144以降でchrome://inspectからリモートデバッグを有効にし、Chrome DevTools MCPに自動接続させます。接続の確認ダイアログは、使うつもりのウィンドウで承認します。B:専用のユーザーデータディレクトリを持つChromeを127.0.0.1:9222で起動し、MCPサーバーにそのURLを指定します。2つを同時に使わないこと、公開ポートを使わないこと。そして、プロセスが動いているだけではアクセスできたとはみなさず、表示中のタブが実際に動くことを確認します。

さらに詳しく

コーディングエージェントをChromeに接続する

2つの接続モードの手順、公開ページでの動作確認、そしてひとまとまりの作業のあとでデバッグポートを閉じる方法を説明しています。

リポジトリの中で用語を確かめる

LaunchRepoは、299件のディレクトリ別プレイブック、プロダクト情報ファイル、申請トラッカーをまとめたもので、あなた自身のエージェントが実行します。€49.00を一度支払えば、所有するすべてのプロダクトに使えます。

料金を見る