設定

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 インスタンスに自動的に接続します。

  1. 実行中の Chrome ブラウザで chrome://inspect/#remote-debugging に移動し、[リモート デバッグ] を有効にします。
  2. MCP 構成に --autoConnect を追加します。 json "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
  3. エージェントが接続を試みると、Chrome に権限を求めるダイアログが表示されます。[許可] をクリックします。

手動接続

--autoConnect を使用できない場合（サンドボックス環境など）は、デバッグポートを使用して Chrome を手動で起動し、--browser-url を使用して接続できます。

  1. リモート デバッグが有効で、カスタム ユーザーデータ ディレクトリが指定された状態で、ターミナルから 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
  2. このポートに接続するようにエージェントを構成します。 json "args": ["chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222"]

一時ディレクトリ外のファイルへのアクセスを許可する

ファイルの読み取りまたは書き込みを行うツール（スクリーンショットやトレースの保存、拡張機能の読み込みなど）は、構成されたワークスペース ルート内のパスにのみアクセスできます。サーバーは、MCP クライアントが MCP ルート機能を通じて提供するルートと、--filesystemRoot（エイリアス --workspace）で渡すディレクトリを使用します。クライアントがルートを提供せず、--filesystemRoot を設定しない場合、ファイル アクセスは OS の一時ディレクトリに制限されます。他のパスのリクエストは Access denied: ... is not within any of the configured workspace roots エラーで失敗します。

プロジェクト ディレクトリへのアクセスを許可するには、サーバー引数に --filesystemRoot を追加します。フラグを繰り返して、複数のディレクトリを指定できます。

"args": ["chrome-devtools-mcp@latest", "--filesystemRoot=/path/to/project"]

構成オプションのリファレンス

以降のセクションでは、使用可能な構成フラグについて説明します。最新のオプションと更新については、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 パフォーマンス トレースから Google CrUX API に URL を送信して、実際のユーザー エクスペリエンス データを取得します。
--javascriptEvaluation または --javascript-evaluation ブール値 true JavaScript の実行を無効にするには、false に設定します。無効にすると、スクリプト評価ツールが無効になり、navigate_page の initScript パラメータがオフになり、javascript:、data:、vbscript: の URL への移動が禁止されます。
--filesystemRoot または --filesystem-root
--workspace		 配列 OS の一時ディレクトリ MCP クライアントが提供するルートに加えて、ファイル アクセス ツールが使用できるディレクトリ。複数回指定できます。一時ディレクトリ外のファイルへのアクセスを許可するをご覧ください。
--allowUnrestrictedPaths または --allow-unrestricted-paths ブール値 false 非推奨: 代わりに --workspace=/ を使用してください。MCP クライアントがルートを提供しない場合に適用されるパス制限を無効にします。

機能カテゴリ

これらのフラグを使用して、ツールのグループを有効または無効にできます。

フラグ タイプ デフォルト 説明
--categoryInput または --category-input ブール値 true 入力に関連するツールを有効にします。
--categoryNavigation または --category-navigation ブール値 true ナビゲーションに関連するツールを有効にします。
--categoryEmulation または --category-emulation ブール値 true エミュレーションに関連するツールを有効にします。
--categoryNetwork または --category-network ブール値 true ネットワークに関連するツールを有効にします。
--categoryPerformance または --category-performance ブール値 true パフォーマンスに関連するツールを有効にします。
--categoryDebugging または --category-debugging ブール値 true デバッグに関連するツールを有効にします。
--categoryMemory または --category-memory ブール値 true メモリに関連するツールを有効にします。
--categoryExtensions または --category-extensions ブール値 false 拡張機能に関連するツールを有効にします。パイプ接続でのみサポートされます。
--categoryPwa または --category-pwa ブール値 false プログレッシブ ウェブアプリを自動化するツール（インストール、起動、アンインストール、OS の状態）を有効にします。パイプ接続でのみサポートされます。
--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 最大高さ（ピクセル単位）。これより大きいスクリーンショットは縮小されます。

試験運用版のオプション

これらのオプションを使用して、開発中の試験運用版機能を有効にします。

フラグ タイプ デフォルト 説明
--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 実行可能ファイルへのパス。
--experimentalScreencastFps または --experimental-screencast-fps 数値 false スクリーンキャスト録画のフレーム/秒。値を小さくすると、ffmpeg がエンコードするよりも速くフレームを生成するページでメモリ負荷を軽減できます。

その他のオプション

これらのオプションを使用して、ロギング、ページ ルーティング、ソースマップを構成したり、簡略化されたツールセットを有効にしたりできます。

フラグ タイプ デフォルト 説明
--slim ブール値 false 3 つのツール（ナビゲーション、スクリプト実行、スクリーンショット）のシンプルなセットを公開します。基本的なブラウザタスクに便利です。
--pageIdRouting または --page-id-routing ブール値 true ページスコープのツールで pageId が必要で、ページ ID でリクエストをルーティングします。これは、同時エージェント セッションに役立ちます。無効にするには --no-page-id-routing を使用します。
--sourceMaps または --source-maps ブール値 true DevTools でソースマップを有効にします。無効にするには、--no-source-maps を使用します。
--logFile または --log-file 文字列 false デバッグログを書き込むファイルのパス。詳細ログを有効にするには、環境変数 NODE_DEBUG を * に設定します。
--config 文字列 false JSON 構成ファイルへのパス。

環境変数

次の環境変数を使用してサーバーを構成することもできます。

  • CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS: 設定すると、使用統計情報の収集が無効になります（--no-usage-statistics と同等）。
  • CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS: 設定すると、更新の定期的なチェックが無効になります。
  • CI: 設定すると、使用統計情報の収集が無効になります。
  • NODE_DEBUG: * に設定すると、詳細なデバッグ ロギングが有効になります（--logFile と連携して動作します）。