Chrome DevTools MCP

Chrome DevTools MCP

chrome-devtools-mcp を使用すると、コーディングエージェント（Gemini、Claude、Cursor、Copilot など）から、実行中の Chrome ブラウザーを操作して調査できます。Model-Context-Protocol（MCP）サーバーとして動作し、信頼性の高い自動化、詳細なデバッグ、パフォーマンス分析のために、AI コーディングアシスタントが Chrome DevTools の機能をすべて利用できるようにします。

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

主な機能

• パフォーマンスに関する分析情報の取得：Chrome DevTools を使用してトレースを記録し、実用的なパフォーマンス分析情報を抽出します。
• 高度なブラウザーデバッグ：ネットワークリクエストを分析し、スクリーンショットを撮影して、ブラウザーコンソールを確認できます。
• 信頼性の高い自動化。puppeteer を使用して Chrome での操作を自動化し、操作結果が得られるまで自動的に待機します。

免責事項

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

必要条件

• Node.js v20.19、またはそれ以降の最新のメンテナンス LTS バージョン。
• Chrome の現行安定版、またはそれ以降。
• npm。

はじめに

次の設定を MCP クライアントに追加します。

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

メモ

chrome-devtools-mcp@latest を使用すると、MCP クライアントは常に最新バージョンの Chrome DevTools MCP サーバーを使用します。

MCP クライアントの設定

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

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

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

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

copilot

/mcp add

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

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

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

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

最初のプロンプト

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

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

MCP クライアントによってブラウザーが開き、パフォーマンストレースが記録されます。

メモ

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

ツール

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

• 入力の自動化（8 個のツール）
  • click
  • drag
  • fill
  • fill_form
  • handle_dialog
  • hover
  • press_key
  • upload_file
• ナビゲーションの自動化（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
• デバッグ（5 個のツール）
  • evaluate_script
  • get_console_message
  • list_console_messages
  • take_screenshot
  • take_snapshot

設定

Chrome DevTools MCP サーバーでは、次の設定オプションを使用できます。

• --browserUrl, -u ポートフォワーディングを使用して、起動中の Chrome インスタンスに接続します。詳細については、https://developer.chrome.com/docs/devtools/remote-debugging/local-server をご覧ください。

  • 型： string

• --wsEndpoint, -w 起動中の Chrome インスタンスに接続するための WebSocket エンドポイントです（例：ws://127.0.0.1:9222/devtools/browser/）。--browserUrl の代替です。

  • 型： string

• --wsHeaders WebSocket 接続用のカスタムヘッダーを JSON 形式で指定します（例：'{"Authorization":"Bearer token"}'）。--wsEndpoint と併用する場合のみ機能します。

  • 型： string

• --headless ヘッドレス（UI なし）モードで実行するかどうかを指定します。

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

• --executablePath, -e カスタム Chrome 実行ファイルへのパスです。

  • 型： string

• --isolated 指定すると、一時的なユーザーデータディレクトリを作成します。このディレクトリはブラウザーを閉じた後に自動的に削除されます。

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

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

  • 型： string
  • 選択肢： stable、canary、beta、dev

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

  • 型： string

• --viewport サーバーが起動する Chrome インスタンスの初期ビューポートサイズです。たとえば、1280x720 です。ヘッドレスモードでは、最大サイズは 3840x2160px です。

  • 型： string

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

  • 型： string

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

  • 型： boolean

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

  • 型： array

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

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

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

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

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

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

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 を実行して、利用可能なすべての設定オプションを確認することもできます。

概念

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

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 インスタンスへの接続

--browser-url オプションを使用すると、起動中の Chrome インスタンスに接続できます。既存の Chrome プロファイルを使用したい場合や、新しい Chrome インスタンスを起動できないサンドボックス環境で MCP サーバーを実行している場合に便利です。

起動中の Chrome Stable インスタンスに接続する手順は次のとおりです。

ステップ 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 ブラウザーを起動する

警告

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

リモートデバッグポートを有効にして 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 のドキュメントをご覧ください。

既知の制限事項

オペレーティングシステムのサンドボックス

一部の MCP クライアントでは、macOS Seatbelt または Linux コンテナーを使って MCP サーバーをサンドボックス化できます。サンドボックスが有効になっている場合、chrome-devtools-mcp は独自のサンドボックスを作成する権限を必要とする Chrome を起動できません。回避策として、MCP クライアントで chrome-devtools-mcp のサンドボックス化を無効にするか、 --browser-url を使って MCP クライアントのサンドボックス外で手動起動した Chrome インスタンスに接続してください。