Chrome DevTools MCP

エージェント向け Chrome DevTools

エージェント向け Chrome DevTools (chrome-devtools-mcp) を使用すると、コーディングエージェント (Antigravity、Claude、Cursor、Copilot など) が 実行中の Chrome ブラウザを制御および検査できます。これは Model-Context-Protocol (MCP) サーバーとして機能し、AI コーディングアシスタントに Chrome DevTools の全機能へのアクセスを提供し、信頼性の高い自動化、詳細なデバッグ、パフォーマンス分析を可能にします。 MCP なしで使用するための CLI も提供されています。

ツールリファレンス | 変更履歴 | コントリビューション | トラブルシューティング | 設計原則

主な機能

• パフォーマンスインサイトの取得: Chrome DevTools を使用して トレースを記録し、実用的なパフォーマンスインサイトを抽出します。
• 高度なブラウザデバッグ: ネットワークリクエストの分析、スクリーンショットの撮影、 ブラウザコンソールメッセージの確認 (ソースマップ付きスタックトレースを含む)。
• 信頼性の高い自動化: puppeteer を使用して Chrome でのアクションを自動化し、アクション結果を自動的に待機します。

免責事項

chrome-devtools-mcp はブラウザインスタンスのコンテンツを MCP クライアントに公開し、 ブラウザまたは DevTools 内のあらゆるデータの検査、デバッグ、変更を許可します。 MCP クライアントと共有したくない機密情報や個人情報の共有は避けてください。

chrome-devtools-mcp は Google Chrome および Chrome for Testing のみを公式にサポートしています。 他の Chromium ベースのブラウザでも動作する可能性はありますが、保証されておらず、予期しない動作が発生する場合があります。自己責任で使用してください。 私たちは Extended Stable Chrome の最新バージョンに対する修正とサポートの提供に努めています。

パフォーマンスツールは、実際のユーザーエクスペリエンスデータを取得するために、トレース URL を Google CrUX API に送信する場合があります。これにより、 フィールドデータをラボデータと共に提示することで、全体的なパフォーマンスの全体像を提供できます。このデータは Chrome User Experience Report (CrUX) によって収集されます。これを無効にするには、 --no-performance-crux フラグを指定して実行します。

使用統計

Google は、Chrome DevTools MCP の信頼性とパフォーマンスを向上させるために、使用統計 (ツール呼び出しの成功率、レイテンシ、環境情報など) を収集します。

データ収集はデフォルトで有効です。サーバー起動時に --no-usage-statistics フラグを渡すことでオプトアウトできます:

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google はこのデータを Google プライバシーポリシー に従って取り扱います。

Chrome DevTools MCP の使用統計の Google による収集は、Chrome ブラウザの使用統計とは独立しています。Chrome メトリクスをオプトアウトしても、このツールから自動的にオプトアウトされるわけではなく、その逆も同様です。

CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS または CI 環境変数が設定されている場合、収集は無効になります。

更新チェック

デフォルトでは、サーバーは定期的に npm レジストリで更新を確認し、新しいバージョンが利用可能な場合に通知をログに記録します。 これらの更新チェックは、CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS 環境変数を設定することで無効にできます。

要件

• Node.js LTS バージョン。
• Chrome 現在の安定版以降。
• npm

はじめに

以下の設定を MCP クライアントに追加します:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

[!NOTE] chrome-devtools-mcp@latest を使用すると、MCP クライアントは常に最新バージョンの Chrome DevTools MCP サーバーを使用するようになります。

基本的なブラウザタスクのみを実行する場合は、--slim モードを使用します:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

Slim ツールリファレンス を参照してください。

MCP クライアント設定

amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

cmd mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

copilot

/mcp add

code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'

droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"

# Either MCP only:
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
# Or as a Gemini extension (MCP+Skills):
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

grok mcp add chrome-devtools npx chrome-devtools-mcp@latest

mcp-proxy --transport streamablehttp --port 8080 -- npx -y chrome-devtools-mcp@latest

[[mcp_servers]]
name = "chrome-devtools"
transport = "stdio"
command = "npx"
args = ["chrome-devtools-mcp@latest"]

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": ["npx", "-y", "chrome-devtools-mcp@latest"]
    }
  }
}

qodercli mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest

MCP クライアントで次のプロンプトを入力して、すべてが正常に動作するか確認します。

Check the performance of https://developers.chrome.com

MCP クライアントがブラウザを開き、パフォーマンストレースを記録します。

[!NOTE] MCP クライアントが実行中のブラウザインスタンスを必要とするツールを使用すると、MCP サーバーは自動的にブラウザを起動します。Chrome DevTools MCP サーバーに単独で接続しても、ブラウザは自動的に起動しません。

ツール

問題が発生した場合は、トラブルシューティングガイドをご確認ください。

• 入力自動化 (10 ツール)
  • click
  • drag
  • fill
  • fill_form
  • handle_dialog
  • hover
  • press_key
  • type_text
  • upload_file
  • click_at
• ナビゲーション自動化 (6 ツール)
  • close_page
  • list_pages
  • navigate_page
  • new_page
  • select_page
  • wait_for
• エミュレーション (2 ツール)
  • emulate
  • resize_page
• パフォーマンス (3 ツール)
  • performance_analyze_insight
  • performance_start_trace
  • performance_stop_trace
• ネットワーク (2 ツール)
  • get_network_request
  • list_network_requests
• デバッグ (8 ツール)
  • evaluate_script
  • get_console_message
  • lighthouse_audit
  • list_console_messages
  • take_screenshot
  • take_snapshot
  • screencast_start
  • screencast_stop
• メモリ (12 ツール)
  • take_heapsnapshot
  • close_heapsnapshot
  • compare_heapsnapshots
  • get_heapsnapshot_class_nodes
  • get_heapsnapshot_details
  • get_heapsnapshot_dominators
  • get_heapsnapshot_duplicate_strings
  • get_heapsnapshot_edges
  • get_heapsnapshot_object_details
  • get_heapsnapshot_retainers
  • get_heapsnapshot_retaining_paths
  • get_heapsnapshot_summary
• 拡張機能 (5 ツール)
  • install_extension
  • list_extensions
  • reload_extension
  • trigger_extension_action
  • uninstall_extension
• サードパーティ (2 ツール)
  • execute_3p_developer_tool
  • list_3p_developer_tools
• WebMCP (2 ツール)
  • execute_webmcp_tool
  • list_webmcp_tools

設定

Chrome DevTools MCP サーバーは、以下の設定オプションをサポートしています。

• --autoConnect/ --auto-connect 指定すると、channel パラメータで識別されるユーザーデータディレクトリからローカルで実行されているブラウザ (Chrome 144+) に自動的に接続します (デフォルトチャネルは stable)。Chrome インスタンスで chrome://inspect/#remote-debugging を介してリモートデバッグサーバーを起動しておく必要があります。

  • 型: boolean
  • デフォルト: false

• --browserUrl/ --browser-url, -u 実行中のデバッグ可能な Chrome インスタンスに接続します (例: http://127.0.0.1:9222)。詳細は次を参照してください: https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance.

  • 型: string
  • デフォルト: false

• --wsEndpoint/ --ws-endpoint, -w 実行中の Chrome インスタンスに接続するための WebSocket エンドポイント (例: ws://127.0.0.1:9222/devtools/browser/)。--browserUrl の代替です。

  • 型: string
  • デフォルト: false

• --wsHeaders/ --ws-headers WebSocket 接続用のカスタムヘッダーを JSON 形式で指定します (例: '{"Authorization":"Bearer token"}')。--wsEndpoint でのみ機能します。

  • 型: string
  • デフォルト: false

• --headless ヘッドレス (UI なし) モードで実行するかどうか。

  • 型: boolean
  • デフォルト: false

• --executablePath/ --executable-path, -e カスタム Chrome 実行可能ファイルへのパス。

  • 型: string
  • デフォルト: false

• --isolated 指定すると、ブラウザの終了後に自動的にクリーンアップされる一時的な user-data-dir を作成します。デフォルトは false です。

  • 型: boolean
  • デフォルト: false

• --userDataDir/ --user-data-dir Chrome のユーザーデータディレクトリへのパス。デフォルトは $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE です。

  • 型: string
  • デフォルト: false

• --channel 使用する別の Chrome チャネルを指定します。デフォルトは安定版チャネルです。

  • 型: string
  • 選択肢: canary, dev, beta, stable
  • デフォルト: false

• --logFile/ --log-file デバッグログを書き込むファイルへのパス。詳細ログを有効にするには、環境変数 DEBUG を * に設定します。バグレポートの送信に役立ちます。

  • 型: string
  • デフォルト: false

• --viewport サーバーによって起動された Chrome インスタンスの初期ビューポートサイズ。例: 1280x720。ヘッドレスモードでの最大サイズは 3840x2160px です。

  • 型: string
  • デフォルト: false

• --proxyServer/ --proxy-server ブラウザ起動時に --proxy-server として渡される Chrome のプロキシサーバー設定。詳細は https://www.chromium.org/developers/design-documents/network-settings/ を参照してください。

  • 型: string
  • デフォルト: false

• --acceptInsecureCerts/ --accept-insecure-certs 有効にすると、自己署名証明書や期限切れ証明書に関するエラーを無視します。注意して使用してください。

  • 型: boolean
  • デフォルト: false

• --experimentalPageIdRouting/ --experimental-page-id-routing ページスコープのツールで pageId を公開し、ページ ID でリクエストをルーティングするかどうか (同時エージェントセッションに役立ちます)。

  • 型: boolean
  • デフォルト: false

• --experimentalDevtools/ --experimental-devtools DevTools ターゲットに対する自動化を有効にするかどうか。

  • 型: boolean
  • デフォルト: false

• --experimentalVision/ --experimental-vision click_at(x,y) などの座標ベースのツールを有効にするかどうか。通常、スクリーンショットを見て正確な座標を生成できる computer-use モデルが必要です。

  • 型: boolean
  • デフォルト: false

• --memoryDebugging/ --memory-debugging, -experimentalMemory メモリデバッグツールを有効にするかどうか。

  • 型: boolean
  • デフォルト: false

• --experimentalStructuredContent/ --experimental-structured-content 構造化されたフォーマット済みコンテンツを出力するかどうか。

  • 型: boolean
  • デフォルト: false

• --experimentalIncludeAllPages/ --experimental-include-all-pages WebView やバックグラウンドページなど、すべての種類のページをページとして含めるかどうか。

  • 型: boolean
  • デフォルト: false

• --experimentalScreencast/ --experimental-screencast 実験的なスクリーンキャストツールを公開します (ffmpeg が必要)。ffmpeg をインストールし (https://www.ffmpeg.org/download.html)、MCP サーバーの PATH で利用可能であることを確認してください。

  • 型: boolean
  • デフォルト: false

• --experimentalFfmpegPath/ --experimental-ffmpeg-path スクリーンキャスト記録用の ffmpeg 実行可能ファイルへのパス。

  • 型: string
  • デフォルト: false

• --categoryExperimentalWebmcp/ --category-experimental-webmcp WebMCP ツールのデバッグを有効にするには true に設定します。Chrome 149+ と次のフラグが必要です: --enable-features=WebMCP,DevToolsWebMCPSupport

  • 型: boolean
  • デフォルト: false

• --chromeArg/ --chrome-arg Chrome の追加引数。chrome-devtools-mcp によって Chrome が起動される場合にのみ適用されます。

  • 型: array
  • デフォルト: false

• --blockedUrlPattern/ --blocked-url-pattern 指定された URL パターンをブロックして、ブラウザのネットワークアクセスを制限します (https://urlpattern.spec.whatwg.org/ を使用)。接続時にブロックされた URL を持つターゲットからサイレントにデタッチし、ランタイムリクエスト (ナビゲーションとサブリソースを含む) をブロックします。パターンの配列を受け入れます。

  • 型: array
  • デフォルト: false

• --allowedUrlPattern/ --allowed-url-pattern 指定された URL パターンのみを許可して、ブラウザのネットワークアクセスを制限します (https://urlpattern.spec.whatwg.org/ を使用)。Chrome 149+ が必要です。接続時に許可されていない URL を持つターゲットからサイレントにデタッチし、ランタイムリクエスト (ナビゲーションとサブリソースを含む) をブロックします。パターンの配列を受け入れます。

  • 型: array
  • デフォルト: false

• --ignoreDefaultChromeArg/ --ignore-default-chrome-arg Chrome のデフォルト引数を明示的に無効にします。chrome-devtools-mcp によって Chrome が起動される場合にのみ適用されます。

  • 型: array
  • デフォルト: false

• --categoryEmulation/ --category-emulation エミュレーションに関連するツールを除外するには false に設定します。

  • 型: boolean
  • デフォルト: true

• --categoryPerformance/ --category-performance パフォーマンスに関連するツールを除外するには false に設定します。

  • 型: boolean
  • デフォルト: true

• --categoryNetwork/ --category-network ネットワークに関連するツールを除外するには false に設定します。

  • 型: boolean
  • デフォルト: true

• --categoryExtensions/ --category-extensions 拡張機能に関連するツールを含めるには true に設定します。注: この機能は現在、パイプ接続でのみサポートされています。autoConnect、browserUrl、wsEndpoint は、149 がリリースされるまでこの機能ではサポートされません。

  • 型: boolean
  • デフォルト: false

• --categoryExperimentalThirdParty/ --category-experimental-third-party 検査対象のページ自体によって公開されるサードパーティの開発者ツールを有効にするには true に設定します。

  • 型: boolean
  • デフォルト: false

• --performanceCrux/ --performance-crux パフォーマンストレースから CrUX API に URL を送信してフィールドパフォーマンスデータを取得するのを無効にするには false に設定します。

  • 型: boolean
  • デフォルト: true

• --usageStatistics/ --usage-statistics 使用統計の収集をオプトアウトするには false に設定します。Google はツール改善のために使用データを収集し、Google プライバシーポリシー (https://policies.google.com/privacy) に基づいて処理されます。これは Chrome ブラウザのメトリクスとは独立しています。CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS または CI 環境変数が設定されている場合は無効になります。

  • 型: boolean
  • デフォルト: true

• --screenshotFormat/ --screenshot-format 呼び出し元が指定しない場合に take_screenshot が使用するデフォルトの出力形式を上書きします。JPEG と WebP は PNG よりも約 3 ～ 5 倍小さく、AI 会話のコンテキストサイズを削減するのに役立ちます。未設定の場合は、既存のデフォルト ("png") が維持されます。

  • 型: string
  • 選択肢: jpeg, png, webp
  • デフォルト: false

• --screenshotQuality/ --screenshot-quality 呼び出し元が指定しない場合に take_screenshot が JPEG および WebP に使用するデフォルトの圧縮品質 (0-100) を上書きします。値が小さいほどファイルサイズが小さくなります。PNG では無視されます。未設定の場合は、Puppeteer のデフォルトが維持されます。

  • 型: number
  • デフォルト: false

• --screenshotMaxWidth/ --screenshot-max-width スクリーンショットの最大幅 (ピクセル単位)。キャプチャされた画像がこれより広い場合、返される前に (アスペクト比を維持して) 縮小されます。AI 会話のコンテキストサイズを削減します。未設定の場合は、リサイズなしを意味します。

  • 型: number
  • デフォルト: false

• --screenshotMaxHeight/ --screenshot-max-height スクリーンショットの最大高さ（ピクセル単位）。キャプチャされた画像がこれより高い場合、返される前にダウンスケール（アスペクト比を維持）されます。--screenshot-max-width と組み合わせることができ、小さい方の倍率が優先されます。未設定の場合はリサイズされません。

  • 型: number
  • デフォルト: false

• --slim ナビゲーション、スクリプト実行、スクリーンショットのみをカバーする「スリム」な3つのツールセットを公開します。基本的なブラウザタスクに役立ちます。

  • 型: boolean
  • デフォルト: false

• --redactNetworkHeaders/ --redact-network-headers true の場合、クライアントに返す前に、機密性が高いと見なされるネットワークヘッダーの一部を編集します。

  • 型: boolean
  • デフォルト: false

• --allowUnrestrictedPaths/ --allow-unrestricted-paths 設定されている場合、MCP クライアントがルート機能をネゴシエートしない場合に適用されるデフォルトのパス制限を無効にします。デフォルトでは、ルートが設定されていない場合、ファイル書き込みツールは OS の一時ディレクトリに制限されます。これは、MCP ルートを実装しておらず、一時ディレクトリ外のパスへのアクセスが必要な、信頼できるローカルクライアントを接続する場合にのみ使用してください。

  • 型: boolean
  • デフォルト: false

JSON 設定の args プロパティを介して渡します。例:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

カスタムヘッダーを使用した WebSocket 経由の接続

Chrome WebSocket エンドポイントに直接接続し、カスタムヘッダー（認証用など）を含めることができます:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}

実行中の Chrome インスタンスから WebSocket エンドポイントを取得するには、http://127.0.0.1:9222/json/version にアクセスし、webSocketDebuggerUrl フィールドを探します。

npx chrome-devtools-mcp@latest --help を実行して、利用可能なすべての設定オプションを表示することもできます。

コンセプト

並行セッション

ほとんどの MCP クライアントは、会話ごとに 1 つの Chrome DevTools MCP サーバーを起動します。クライアントが並行エージェントまたはサブエージェント間で単一のサーバーインスタンスを共有する場合は、--experimentalPageIdRouting を指定してサーバーを起動します。これにより、ページスコープのツールで pageId が公開され、各エージェントはツール呼び出しを自身が作業しているタブにルーティングできます。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--experimentalPageIdRouting"
      ]
    }
  }
}

複数の独立した MCP クライアントセッションを実行し、各セッションに独自の一時 Chrome プロファイルを起動させたい場合は、--isolated も渡します。これにより、それらのサーバーインスタンス間でデフォルトの Chrome DevTools MCP ユーザーデータディレクトリが共有されるのを回避できます。

ユーザーデータディレクトリ

chrome-devtools-mcp は、次のユーザーデータディレクトリを使用して Chrome 安定チャネルインスタンスを起動します:

• Linux / macOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
• Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

ユーザーデータディレクトリは実行間でクリアされず、chrome-devtools-mcp のすべてのインスタンス間で共有されます。ブラウザを閉じた後に自動的にクリアされる一時ユーザーデータディレクトリを代わりに使用するには、isolated オプションを true に設定します。

実行中の Chrome インスタンスへの接続

デフォルトでは、Chrome DevTools MCP サーバーは専用プロファイルで新しい Chrome インスタンスを起動します。これはすべての状況で理想的とは限りません:

• 手動サイトテストとエージェント駆動テストを交互に行う際に、同じアプリケーション状態を維持したい場合。
• MCP が Web サイトにサインインする必要がある場合。一部のアカウントでは、ブラウザが WebDriver（Chrome DevTools MCP サーバーのデフォルトの起動メカニズム）を介して制御されている場合、サインインが防止されることがあります。
• LLM をサンドボックス環境内で実行しているが、サンドボックス外で実行されている Chrome インスタンスに接続したい場合。

このような場合は、最初に Chrome を起動し、Chrome DevTools MCP サーバーをそれに接続させます。これには2つの方法があります:

• 自動接続（Chrome 144 で利用可能）: 手動テストとエージェント駆動テストの間で状態を共有するのに最適です。
• リモートデバッグポート経由の手動接続: サンドボックス環境内で実行する場合に最適です。

実行中の Chrome インスタンスへの自動接続

ステップ 1: Chrome でリモートデバッグを設定する

Chrome（>= M144）で、次の手順を実行してリモートデバッグを設定します:

1. chrome://inspect/#remote-debugging に移動してリモートデバッグを有効にします。
2. ダイアログ UI に従って、着信デバッグ接続を許可または拒否します。

ステップ 2: 実行中の Chrome インスタンスに自動接続するように Chrome DevTools MCP サーバーを設定する

chrome-devtools-mcp サーバーを実行中の Chrome インスタンスに接続するには、MCP サーバーのコマンドライン引数 --autoConnect を使用します。

次のコードスニペットは、gemini-cli の設定例です:

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

ステップ 3: セットアップをテストする

ブラウザが実行されていることを確認してください。gemini-cli を開き、次のプロンプトを実行します:

Check the performance of https://developers.chrome.com

[!NOTE] autoConnect オプションでは、ユーザーが Chrome を起動する必要があります。ユーザーが複数のアクティブなプロファイルを持っている場合、MCP サーバーはデフォルトのプロファイル（Chrome によって決定される）に接続します。MCP サーバーは、選択されたプロファイルの開いているすべてのウィンドウにアクセスできます。

Chrome DevTools MCP サーバーは、実行中の Chrome インスタンスへの接続を試みます。ユーザー許可を求めるダイアログが表示されます。

許可 をクリックすると、Chrome DevTools MCP サーバーは developers.chrome.com を開き、パフォーマンストレースを取得します。

ポートフォワーディングを使用した手動接続

--browser-url オプションを使用して、実行中の Chrome インスタンスに接続できます。これは、新しい Chrome インスタンスの起動を許可しないサンドボックス環境で MCP サーバーを実行している場合に便利です。

実行中の Chrome インスタンスに接続するためのステップバイステップガイドを以下に示します:

ステップ 1: MCP クライアントを設定する

MCP クライアント設定に --browser-url オプションを追加します。このオプションの値は、実行中の Chrome インスタンスの URL にする必要があります。http://127.0.0.1:9222 が一般的なデフォルトです。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

ステップ 2: Chrome ブラウザを起動する

[!WARNING] リモートデバッグポートを有効にすると、実行中のブラウザインスタンスでデバッグポートが開きます。マシン上の任意のアプリケーションがこのポートに接続し、ブラウザを制御できます。デバッグポートが開いている間は、機密性の高い Web サイトを閲覧していないことを確認してください。

リモートデバッグポートを有効にして Chrome ブラウザを起動します。デバッグポートを有効にして新しいブラウザを起動する前に、実行中の Chrome インスタンスをすべて閉じてください。選択するポート番号は、MCP クライアント設定の --browser-url オプションで指定したものと同じである必要があります。

セキュリティ上の理由から、Chrome では、リモートデバッグポートを有効にする際にデフォルト以外のユーザーデータディレクトリを使用する必要があります。--user-data-dir フラグを使用してカスタムディレクトリを指定できます。これにより、通常のブラウジングプロファイルとデータがデバッグセッションに公開されないようになります。

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Linux

/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

ステップ 3: セットアップをテストする

MCP クライアントを設定し、Chrome ブラウザを起動した後、MCP クライアントで簡単なプロンプトを実行してセットアップをテストできます:

Check the performance of https://developers.chrome.com

MCP クライアントは実行中の Chrome インスタンスに接続し、パフォーマンスレポートを受信するはずです。

VM からホストへのポートフォワーディングの問題が発生した場合は、docs/troubleshooting.md の「仮想マシン（VM）とホスト間のリモートデバッグが失敗する」セクションを参照してください。

リモートデバッグの詳細については、Chrome DevTools ドキュメント を参照してください。

Android での Chrome のデバッグ

こちらの手順 を参照してください。

既知の制限事項

トラブルシューティング を参照してください。

ブラウザサブエージェントとしての統合

エージェントツールを開発していて、製品の一部として統合ブラウザサブエージェントを提供したい場合は、Chrome DevTools for agents を基盤として構築することをお勧めします。

リファレンス実装については、Gemini CLI ブラウザエージェントドキュメント を参照してください。