Matthias Rohmer
José Luis Zapata
エージェント向け Chrome DevTools を構成して、ブラウザとのやり取りの方法、有効にするツール、データの処理方法をカスタマイズできます。
Model Context Protocol（MCP）クライアント構成ファイルの args 配列にコマンドライン フラグを渡して、サーバーを構成します。通常、これは config.json ファイルです。
たとえば、Chrome をヘッドレス モードで実行して Canary チャンネルを使用するには、次の構成を使用します。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless",
"--channel=canary"
]
}
}
}
一般的な構成シナリオ
次のシナリオでは、エージェント向け Chrome DevTools を構成する一般的な方法について説明します。
ヘッドレス モードで実行する
ブラウザ ウィンドウを表示せずにバックグラウンド タスクを実行するには、Chrome をヘッドレス（UI なし）モードで実行します。--headless フラグをサーバー引数に追加します。
既存のブラウザ セッションに接続する
デフォルトでは、エージェント向け DevTools は新しい Chrome インスタンスを起動します。ただし、エージェントを既存のブラウザ セッションに接続することもできます。これは、すでに開始したセッションでエージェントが問題を調査する必要がある場合に便利です（たとえば、すでにログインしている場合など）。
既存のセッションには、次の 2 つの方法で接続できます。
自動接続（Chrome 144 以降）
--autoConnect フラグを使用すると、MCP サーバーは実行中の Chrome インスタンスに自動的に接続します。
- 実行中の Chrome ブラウザで
chrome://inspect/#remote-debuggingに移動し、[リモート デバッグ] を有効にします。 - MCP 構成に
--autoConnectを追加します:json "args": ["chrome-devtools-mcp@latest", "--autoConnect"] - エージェントが接続を試みると、権限を求めるダイアログが Chrome に表示されます。[許可] をクリックします。
手動接続
サンドボックス環境などで --autoConnect を使用できない場合は、デバッグポートを指定して Chrome を手動で起動し、--browser-url を使用して接続できます。
- リモート デバッグを有効にして、カスタム ユーザーデータ ディレクトリを指定して、ターミナルから Chrome を起動します。
- macOS:
shell /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable - Windows:
shell start chrome --remote-debugging-port=9222 --user-data-dir=%TEMP%\chrome-profile-stable - Linux:
shell google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable
- macOS:
- このポートに接続するようにエージェントを構成します:
json "args": ["chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222"]
構成オプションのリファレンス
以降のセクションでは、使用可能な構成フラグについて説明します。最新の オプションと更新については、Chrome DevTools MCP GitHub リポジトリをご覧ください。
接続オプション
これらのオプションを使用して、サーバーが Chrome に接続する方法を構成します。
| フラグ | タイプ | デフォルト | 説明 |
|---|---|---|---|
--autoConnect または --auto-connect |
ブール値 | false |
ローカルで実行中の Chrome（144 以降）インスタンスに自動的に接続します。chrome://inspect/#remote-debugging を使用してリモート デバッグを有効にする必要があります。 |
--browserUrl または --browser-url-u |
文字列 | false |
実行中のデバッグ可能な Chrome インスタンス（http://127.0.0.1:9222 など）に接続します。 |
--wsEndpoint または --ws-endpoint-w |
文字列 | false |
実行中の Chrome インスタンスに接続する WebSocket エンドポイント（ws://127.0.0.1:9222/devtools/browser/<id> など）。--browserUrl の代替。 |
--wsHeaders または --ws-headers |
文字列 | false |
JSON 形式の WebSocket 接続のカスタム ヘッダー（'{"Authorization":"Bearer token"}' など）。--wsEndpoint でのみ機能します。 |
ブラウザの起動オプション
これらのオプションは、MCP サーバーが Chrome を起動するときに適用されます。
| フラグ | タイプ | デフォルト | 説明 |
|---|---|---|---|
--headless |
ブール値 | false |
Chrome をヘッドレス（UI なし）モードで実行します。 |
--channel |
文字列 | stable |
使用する Chrome チャンネルを指定します。選択肢: canary、dev、beta、stable。 |
--executablePath または --executable-path-e |
文字列 | false |
カスタム Chrome 実行可能ファイルのパス。 |
--userDataDir または --user-data-dir |
文字列 | 説明をご覧ください。 | ユーザーデータ ディレクトリのパス。デフォルトは $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE です。 |
--isolated |
ブール値 | false |
ブラウザが閉じるときに自動的にクリーンアップされる一時的なユーザーデータ ディレクトリを作成します。 |
--viewport |
文字列 | false |
初期ビューポート サイズ（1280x720 など）。ヘッドレス モードの場合、最大サイズは 3840x2160 です。 |
--proxyServer または --proxy-server |
文字列 | false |
Chrome に渡されるプロキシ サーバー構成。 |
--chromeArg または --chrome-arg |
配列 | false |
Chrome に渡す追加の引数。 |
--ignoreDefaultChromeArg または --ignore-default-chrome-arg |
配列 | false |
Chrome のデフォルト引数を明示的に無効にします。 |
セキュリティとプライバシーのオプション
これらのオプションを使用して、セキュリティ設定とデータ プライバシーを管理します。
| フラグ | タイプ | デフォルト | 説明 |
|---|---|---|---|
--acceptInsecureCerts または --accept-insecure-certs |
ブール値 | false |
自己署名証明書と有効期限切れの証明書に関連するエラーを無視します。使用する際はご注意ください。 |
--blockedUrlPattern または --blocked-url-pattern |
配列 | false |
指定した URL パターンをブロックして、ネットワーク アクセスを制限します（URLPattern を使用）。ナビゲーションとサブリソースをブロックします。 |
--allowedUrlPattern または --allowed-url-pattern |
配列 | false |
指定した URL パターンのみを許可して、ネットワーク アクセスを制限します。Chrome 149 以降が必要です。 |
--redactNetworkHeaders または --redact-network-headers |
ブール値 | false |
機密性の高いネットワーク ヘッダーをクライアントに返す前に秘匿化します。 |
--usageStatistics または --usage-statistics |
ブール値 | true |
ツールの改善のために使用状況統計情報の収集を有効にします。CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS 環境変数または CI 環境変数を使用して無効にすることもできます。 |
--performanceCrux または --performance-crux |
ブール値 | true |
パフォーマンス トレースの URL を Google CrUX API に送信して、実際のユーザー エクスペリエンス データを取得します。 |
機能カテゴリ
これらのフラグを使用して、ツールのグループを有効または無効にできます。
| フラグ | タイプ | デフォルト | 説明 |
|---|---|---|---|
--categoryEmulation または --category-emulation |
ブール値 | true |
エミュレーションに関連するツールを有効にします。 |
--categoryNetwork または --category-network |
ブール値 | true |
ネットワークに関連するツールを有効にします。 |
--categoryPerformance または --category-performance |
ブール値 | true |
パフォーマンスに関連するツールを有効にします。 |
--categoryExtensions または --category-extensions |
ブール値 | false |
拡張機能に関連するツールを有効にします。パイプ接続でのみサポートされます。 |
--categoryExperimentalThirdParty または --category-experimental-third-party |
ブール値 | false |
検査対象のページで公開されているサードパーティ デベロッパー ツールを有効にします。 |
--categoryExperimentalWebmcp または --category-experimental-webmcp |
ブール値 | false |
WebMCP ツールのデバッグを有効にします。WebMCP 機能が有効になっている Chrome 149 以降が必要です。 |
--memoryDebugging または --memory-debugging |
ブール値 | false |
メモリ デバッグ ツールを有効にします。 |
スクリーンショットのオプション
これらのオプションを使用して、エージェントがスクリーンショットをキャプチャする方法をカスタマイズします。
| フラグ | タイプ | デフォルト | 説明 |
|---|---|---|---|
--screenshotFormat または --screenshot-format |
文字列 | false |
デフォルトの出力形式（png）をオーバーライドします。選択肢: jpeg、png、webp。jpeg 形式と webp 形式はサイズが小さいため、AI 会話のコンテキスト サイズを削減できます。 |
--screenshotQuality または --screenshot-quality |
数値 | false |
jpeg と webp の圧縮品質（0 ～ 100）をオーバーライドします。 |
--screenshotMaxWidth または --screenshot-max-width |
数値 | false |
最大幅（ピクセル単位）。大きなスクリーンショットは縮小されます。 |
--screenshotMaxHeight または --screenshot-max-height |
数値 | false |
最大高さ（ピクセル単位）。大きなスクリーンショットは縮小されます。 |
試験運用版のオプション
これらのオプションを使用して、開発中の試験運用版の機能を有効にします。
| フラグ | タイプ | デフォルト | 説明 |
|---|---|---|---|
--experimentalPageIdRouting または --experimental-page-id-routing |
ブール値 | false |
ページ スコープのツールで pageId を公開して、同時エージェント セッションでリクエストをルーティングします。 |
--experimentalDevtools または --experimental-devtools |
ブール値 | false |
DevTools ターゲットでの自動化を有効にします。 |
--experimentalVision または --experimental-vision |
ブール値 | false |
座標ベースのツール（click_at など）を有効にします。通常、スクリーンショットを見て正確な座標を生成できるコンピュータ使用モデルが必要です。 |
--experimentalStructuredContent または --experimental-structured-content |
ブール値 | false |
構造化された形式のコンテンツを出力します。 |
--experimentalIncludeAllPages または --experimental-include-all-pages |
ブール値 | false |
あらゆる種類のページ（ウェブビューやバックグラウンド ページなど）を含めます。 |
--experimentalScreencast または --experimental-screencast |
ブール値 | false |
スクリーンキャスト ツールを公開します（PATH に ffmpeg が必要です）。 |
--experimentalFfmpegPath または --experimental-ffmpeg-path |
文字列 | false |
ffmpeg 実行可能ファイルのパス。 |
その他のオプション
これらのオプションを使用して、ロギングを構成したり、簡略化されたツールセットを有効にしたりできます。
| フラグ | タイプ | デフォルト | 説明 |
|---|---|---|---|
--slim |
ブール値 | false |
3 つのツール（ナビゲーション、スクリプト実行、スクリーンショット）の簡略化されたセットを公開します。基本的なブラウザ タスクに便利です。 |
--logFile または --log-file |
文字列 | false |
デバッグログを書き込むファイルのパス。 |
環境変数
次の環境変数を使用してサーバーを構成することもできます。
CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS: 設定すると、使用状況統計情報の収集が無効になります（--no-usage-statisticsと同じ）。CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS: 設定すると、更新の定期的なチェックが無効になります。CI: 設定すると、使用状況統計情報の収集が無効になります。DEBUG:*に設定すると、詳細なデバッグ ロギングが有効になります（--logFileと組み合わせて使用します）。