Chrome DevTools MCP

コンテナには、事前設定済みの Chrome DevTools MCP サーバーが含まれており、Claude Code にヘッドレスブラウザ自動化機能を提供します。Web ページのナビゲーション、スクリーンショットの取得、DOM のインスペクション、ページ要素との対話が、追加のセットアップなしで利用可能です。

仕組み

エントリポイントは、ポート 9222 でリモートデバッグが有効な永続的なヘッドレス Chrome を起動します。chrome-devtools-mcp MCP サーバーは Claude Code の設定に登録され、--browserUrl を介してこの共有ブラウザに接続します。すべてのセッションが単一のブラウザインスタンスと Cookie jar を共有するため、ログイン、Cookie、認証がプロジェクト間で持続します。

利用可能なツール

ツール	説明
`navigate_page`	URL に移動し、ページの読み込みを待機する
`take_screenshot`	現在のページの PNG スクリーンショットをキャプチャする
`take_snapshot`	ページのアクセシビリティツリーのスナップショットを取得する
`click`	ページ上の要素をクリックする
`type`	入力フィールドにテキストを入力する
`hover`	要素にホバーする
`scroll`	ページまたは特定の要素をスクロールする
`evaluate`	ページコンテキストで JavaScript を実行する
`get_console_logs`	コンソールログメッセージを取得する
`get_page_info`	ページのメタデータ（タイトル、URL など）を取得する

アーキテクチャ

ブラウザスタックは、連携して動作する 4 つのコンポーネントで構成されています：

Playwright Chromium — ビルド時に npx playwright install --with-deps chromium でインストールされる ARM64 対応の Chromium バイナリ
Chrome シンボリックリンク — Puppeteer が期待するパス（/opt/google/chrome/chrome）を Playwright バイナリにブリッジする
共有 Chrome プロセス — chrome-browser.sh によって --remote-debugging-port=9222 で起動され、クラッシュ時に自動再起動する
グローバル MCP 登録 — settings.json が --browserUrl=http://localhost:9222 で chrome-devtools-mcp を登録する

Google Chrome には ARM64 用の .deb パッケージがなく、Ubuntu 24.04 の chromium-browser apt パッケージは snap にリダイレクトされます（コンテナ内では動作しません）。Playwright にバンドルされた Chromium が、ARM64 コンテナで唯一信頼できるオプションです。

検証

コンテナ内でセットアップが正しく動作していることを確認します：

# Chrome バイナリが応答する
/opt/google/chrome/chrome --version

# シンボリックリンクが正しい
ls -la /opt/google/chrome/chrome

# リモートデバッグがアクティブ
curl http://localhost:9222/json/version

# セルフテストに Chrome チェックが含まれる
claude-self-test

ヘッドモード（VNC）

ENABLE_VNC=true の場合、エントリポイントは Chrome を起動する前に VNC スタックを開始します。chrome-browser.sh スクリプトは DISPLAY が設定されていることを検出し、仮想ディスプレイ上でヘッドモードの Chrome を実行するため、VNC ビューアでブラウザを確認できます。

http://localhost:6080/vnc.html を開くと仮想ディスプレイが表示されます。詳細はリモートディスプレイ（noVNC）を参照してください。

トラブルシューティング

リモートデバッグの失敗、プロファイルロックエラー、MCP ツールの重複など、よくある問題の解決策についてはトラブルシューティング — Chrome DevTools MCP を参照してください。