Chrome DevTools MCP

エージェント向け Chrome DevTools

エージェント向け Chrome DevTools（chrome-devtools-mcp）を使うと、コーディングエージェント（Antigravity、Claude、Cursor、Copilot など）が、起動中の Chrome ブラウザーを操作して調査できます。Model-Context-Protocol（MCP）サーバーとして動作し、AI コーディングアシスタントが Chrome DevTools の機能を最大限に活用して、信頼性の高い自動化、詳細なデバッグ、パフォーマンス分析を行えるようにします。MCP を使わずに利用するための CLI も提供されています。

このリポジトリでは、Async23 のフォークを @async23/chrome-devtools-mcp として公開しています。ローカルの表示中ブラウザーのフォーカス制御と、大きなフルページスクリーンショットに関する修正を含みながら、 実行ファイル名は chrome-devtools-mcp のまま維持しています。

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

主な機能

• パフォーマンスに関する洞察を得る：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", "@async23/chrome-devtools-mcp@latest", "--no-usage-statistics"]

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

Google による Chrome DevTools MCP の使用状況の統計情報の収集は、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",
        "@async23/chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222",
        "--no-emulate-focused-pages"
      ]
    }
  }
}

メモ

@async23/chrome-devtools-mcp@latest を使用すると、MCP クライアントはこのフォークの最新公開バージョンを常に使用します。 上記の設定では、ポート 9222 でデバッグ可能な Chrome インスタンスがすでに起動していることを前提としています。

基本的なブラウザータスクのみを行う場合は、--slim モードを使用してください。

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

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

MCP クライアントの設定

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

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

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

/plugin marketplace add Async23/chrome-devtools-mcp

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

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

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
    "/c",
    "npx",
    "-y",
    "@async23/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 @async23/chrome-devtools-mcp@latest

copilot

/mcp add

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

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

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

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

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

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

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

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

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

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

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

最初のプロンプト

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

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

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

メモ

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
• メモリ（11 個のツール）
  • 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_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 以降）に自動接続します（デフォルトの channel は 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 チャネルを指定します。デフォルトは stable チャネルのバージョンです。

  • 型： 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) などの座標ベースのツールを有効にするかどうかを指定します。通常、スクリーンショットを見て正確な座標を出力できるコンピューター操作モデルが必要です。

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

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

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

• --experimentalStructuredContent/ --experimental-structured-content 構造化された形式のコンテンツを出力するかどうかを指定します。

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

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

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

• --emulateFocusedPages/ --emulate-focused-pages ページがフォーカスされ、アクティブな状態であるかのようにエミュレートするかどうかを指定します。表示中のブラウザーでフォーカス動作に問題がある場合にのみ無効にしてください。有効のままにすると、ページがフォーカス済み／アクティブとして動作するマルチエージェントのワークフローで、従来の動作が維持されます。

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

• --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 に設定します。注：この機能は現在、パイプ接続でのみサポートされています。149 がリリースされるまでは、この機能で autoConnect、browserUrl、wsEndpoint はサポートされません。

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

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

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

• --performanceCrux/ --performance-crux フィールドパフォーマンスデータを取得するために、パフォーマンストレースの URL を CrUX API に送信しないようにするには、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 呼び出し元が品質を指定しない場合に、JPEG および WebP で take_screenshot が使用するデフォルトの圧縮品質（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": [
        "@async23/chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

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

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

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "@async23/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 @async23/chrome-devtools-mcp@latest --help を実行すると、利用可能な設定オプションをすべて確認することもできます。

概念

同時セッション

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

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "@async23/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 からウェブサイトにサインインする必要がある場合。一部のアカウントでは、ブラウザーが 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": ["@async23/chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}

ステップ 3： 設定をテストする

ブラウザーが実行中であることを確認します。gemini-cli を開き、次のプロンプトを実行します。

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

メモ

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": [
        "@async23/chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

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

警告

リモートデバッグポートを有効にすると、起動中のブラウザーインスタンスにデバッグポートが開かれます。お使いのマシン上のあらゆるアプリケーションがこのポートに接続して、ブラウザーを操作できます。デバッグポートが開いている間は、機密性の高いウェブサイトを閲覧しないようにしてください。

リモートデバッグポートを有効にして Chrome ブラウザーを起動します。デバッグポートを有効にして新しい 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 ブラウザーエージェントのドキュメントを参照してください。