Chrome Devtools MCP

🚀 Chrome DevTools MCP

このモデルコンテキストプロトコル（MCP）サーバーは、MCPを通じてChrome DevTools Protocolとの統合を提供します。これにより、Chromeの開発者ツールに接続してウェブアプリケーションをデバッグすることができます。

Claude Desktop拡張機能（.dxt）として提供 されており、簡単なワンクリックインストールが可能です！

🚀 クイックスタート

Claude Desktopにインストールすると、任意のウェブアプリケーションのデバッグを開始できます。

ウェブアプリケーションのデバッグ

1ステップセットアップ（推奨）:

start_chrome_and_connect("localhost:3000")

localhost:3000 をアプリケーションのURLに置き換えてください

Chromeが自動的に見つからない場合:

start_chrome_and_connect("localhost:3000", chrome_path="/path/to/chrome")

chrome_path パラメータを使用して、カスタムのChromeの場所を指定してください

このコマンドは以下の処理を行います:

• デバッグを有効にしてChromeを起動します。
• アプリケーションに移動します。
• MCPサーバーをChromeに接続します。

手動セットアップ（ステップバイステップが好みの場合）:

start_chrome()
navigate_to_url("localhost:3000")
connect_to_browser()

デバッグの開始

接続が完了したら、以下のコマンドを使用します:

• get_network_requests() - HTTPトラフィックを表示します。
• get_console_error_summary() - JavaScriptエラーを分析します。
• inspect_console_object("window") - 任意のJavaScriptオブジェクトを調査します。

✨ 主な機能

• ネットワーク監視: フィルタリングオプションを使用してHTTPリクエスト/レスポンスをキャプチャし、分析します。
• コンソール統合: ブラウザコンソールログを読み取り、エラーを分析し、JavaScriptを実行します。
• パフォーマンスメトリクス: タイミングデータ、リソースの読み込み、メモリ使用率を表示します。
• ページ検査: DOM情報、ページメトリクス、マルチフレームサポートを提供します。
• ストレージアクセス: クッキー、localStorage、sessionStorageを読み取ります。
• リアルタイム監視: ライブコンソール出力の追跡を行います。
• オブジェクト検査: JavaScriptオブジェクトと変数を調査します。

📦 インストール

オプション1: Claude Desktop拡張機能（最も簡単）

事前にビルドされた拡張機能をダウンロード:

1. Releases から最新の .dxt ファイルをダウンロードします。
2. Claude Desktopを開きます。
3. 拡張機能に移動し、ダウンロードした .dxt ファイルをインストールします。
4. 必要に応じて、拡張機能の設定でChromeのパスを構成します。

拡張機能にはすべての依存関係が含まれており、すぐに使用できます！

オプション2: MCP CLI（上級者向け）

クイックインストール（最も一般的）:

git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
mcp install server.py -n "Chrome DevTools MCP" --with-editable .

注意: mcp コマンドは Python MCP SDK の一部です。まだ利用できない場合は、pip install mcp でインストールしてください。

すべてのインストールオプション:

# リポジトリをクローン
git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp

# --with-editableフラグを使用して、pyproject.tomlを使って依存関係をインストール

# ローカル依存関係を使用した基本的なインストール
mcp install server.py --with-editable .

# カスタム名でインストール
mcp install server.py -n "Chrome DevTools MCP" --with-editable .

# 環境変数を使用してインストール
mcp install server.py -n "Chrome DevTools MCP" --with-editable . -v CHROME_DEBUG_PORT=9222

# 必要に応じて追加のパッケージをインストール
mcp install server.py -n "Chrome DevTools MCP" --with-editable . --with websockets --with aiohttp

# 環境ファイルを使用してインストール（最初に.env.exampleを.envにコピー）
cp .env.example .env
# .envを設定で編集
mcp install server.py -n "Chrome DevTools MCP" --with-editable . -f .env

オプション3: Claude Code統合

Claude Code CLIユーザー向け:

1. リポジトリをクローン

git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp

2. UVを使用して依存関係をインストール（venvを作成）

uv sync  # .venvを作成し、依存関係をインストール

3. Claude CLIを使用して、絶対パスでMCPサーバーを追加

重要: Claude Codeは、Pythonインタープリターとサーバースクリプトの両方の絶対パスが必要です。

絶対パスを使用した推奨設定:

# 絶対パスを取得
SERVER_PATH="$(pwd)/server.py"
PYTHON_PATH="$(pwd)/.venv/bin/python"

# 絶対パスでサーバーを追加
claude mcp add chrome-devtools "$PYTHON_PATH" "$SERVER_PATH" -e CHROME_DEBUG_PORT=9222

代替案: システムPythonを使用する場合（依存関係がグローバルにインストールされている場合）:

# 依存関係がグローバルにインストールされている場合のみ
claude mcp add chrome-devtools python "$(pwd)/server.py" -e CHROME_DEBUG_PORT=9222

カスタムスコープを使用する場合:

# ユーザースコープに追加（すべてのプロジェクトで利用可能）
claude mcp add chrome-devtools "$(pwd)/.venv/bin/python" "$(pwd)/server.py" -s user -e CHROME_DEBUG_PORT=9222

# プロジェクトスコープに追加（このプロジェクトのみ）
claude mcp add chrome-devtools "$(pwd)/.venv/bin/python" "$(pwd)/server.py" -s project -e CHROME_DEBUG_PORT=9222

4. インストールを確認

# 構成されたMCPサーバーをリスト表示
claude mcp list

# サーバーの詳細を取得（パスが絶対パスであることを確認）
claude mcp get chrome-devtools

# 出力は次のような絶対パスを表示する必要があります:
# Command: /Users/you/chrome-devtools-mcp/.venv/bin/python
# Args: ["/Users/you/chrome-devtools-mcp/server.py"]

一般的なパスの問題と解決策:

• 問題: "python: command not found" または "server.py not found"
  • 解決策: 上記のように絶対パスを使用します。
• 問題: サーバーが起動するときに "ModuleNotFoundError"
  • 解決策: 依存関係がインストールされているvenv Pythonインタープリターを使用します。
• 問題: サーバーが起動しない、または切断されていると表示される
  • 解決策: コマンドを手動でテストします: /path/to/.venv/bin/python /path/to/server.py

オプション4: 手動でのClaude Desktop設定

1. リポジトリをクローン

git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp

2. 依存関係をインストール

uvを使用する場合（推奨）:

uv sync

pipを使用する場合:

pip install -r requirements.txt

3. Claude Desktopの設定に追加

Claude Desktopの設定ファイルを編集します:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "python",
      "args": ["/absolute/path/to/chrome-devtools-mcp/server.py"],
      "env": {
        "CHROME_DEBUG_PORT": "9222"
      }
    }
  }
}

4. Claude Desktopを再起動

インストールの確認

インストール後（どの方法でも）、サーバーが利用可能かを確認します:

1. Claude Desktopを開きます。
2. 会話内でMCPツールを探します。
3. 簡単なコマンドを試します: get_connection_status()

代替のMCPクライアント

他のMCPクライアントの場合、サーバーを直接実行します:

python server.py

📚 ドキュメント

利用可能なMCPツール

Chrome管理

• start_chrome(port?, url?, headless?, chrome_path?, auto_connect?) - リモートデバッグを有効にしてChromeを起動し、オプションで自動接続します。
• start_chrome_and_connect(url, port?, headless?, chrome_path?) - 1ステップでChromeを起動、接続、ナビゲートします。
• connect_to_browser(port?) - 既存のChromeインスタンスに接続します。
• navigate_to_url(url) - 特定のURLに移動します。
• disconnect_from_browser() - ブラウザから切断します。
• get_connection_status() - 接続状態を確認します。

ネットワーク監視

• get_network_requests(filter_domain?, filter_status?, limit?) - フィルタリングを使用してネットワークリクエストを取得します。
• get_network_response(request_id) - 本文を含む詳細なレスポンスデータを取得します。

コンソールツール

• get_console_logs(level?, limit?) - ブラウザコンソールログを取得します。
• get_console_error_summary() - エラーと警告の整理された概要を取得します。
• execute_javascript(code) - ブラウザコンテキストでJavaScriptを実行します。
• clear_console() - ブラウザコンソールをクリアします。
• inspect_console_object(expression) - 任意のJavaScriptオブジェクトを深く調査します。
• monitor_console_live(duration_seconds) - コンソール出力をリアルタイムで監視します。

ページ分析

• get_page_info() - 包括的なページメトリクスとパフォーマンスデータを取得します。
• evaluate_in_all_frames(code) - すべてのフレーム/iframeでJavaScriptを実行します。
• get_performance_metrics() - 詳細なパフォーマンスメトリクスとリソースタイミングを取得します。

ストレージとデータ

• get_storage_usage_and_quota(origin) - ストレージの使用量とクォータ情報を取得します。
• clear_storage_for_origin(origin, storage_types?) - タイプとオリジンによってストレージをクリアします。
• get_all_cookies() - すべてのブラウザクッキーを取得します。
• clear_all_cookies() - すべてのブラウザクッキーをクリアします。
• set_cookie(name, value, domain, path?, expires?, http_only?, secure?, same_site?) - クッキーを設定します。
• get_cookies(domain?) - オプションのドメインフィルタリングでブラウザクッキーを取得します。
• get_storage_key_for_frame(frame_id) - 特定のフレームのストレージキーを取得します。
• track_cache_storage(origin, enable?) - キャッシュストレージの追跡を有効/無効にします。
• track_indexeddb(origin, enable?) - IndexedDBの追跡を有効/無効にします。
• override_storage_quota(origin, quota_size_mb?) - ストレージクォータを上書きします。

ユースケース

ウェブアプリケーションのAPI呼び出しのデバッグ

ウェブアプリケーションがAPI呼び出しを行い、失敗するか予期しないデータを返す場合:

簡単なセットアップ: 1ステップコマンドを使用してChromeを起動し、アプリに移動します:

例のワークフロー:

あなた: "localhost:3000のReactアプリをデバッグする必要があります"
Claude: デバッグを有効にしてChromeを起動し、あなたのアプリに移動します。

start_chrome_and_connect("localhost:3000")

完了！Chromeがデバッグを有効にして起動し、あなたのアプリに接続されました。失敗したネットワークリクエストを確認します:

get_network_requests(filter_status=500)

APIへの3つの失敗したリクエストがあることがわかります。最初のリクエストの詳細を取得します:

get_network_response("request-123")

手動セットアップ（好みの場合）:

1. Chromeを起動: start_chrome() を使用します。
2. アプリに移動: navigate_to_url("localhost:3000") を使用します。
3. 接続: connect_to_browser() を使用します。
4. ネットワークトラフィックを監視: get_network_requests() を使用してすべてのAPI呼び出しを表示します。

JavaScriptコンソールエラーの確認

ウェブアプリケーションにJavaScriptエラーまたは予期しない動作がある場合:

1. 接続されたChromeインスタンスでアプリケーションに移動
2. コンソールエラーを確認: get_console_error_summary() を使用してすべてのエラーを表示します。
3. ライブエラーを監視: monitor_console_live(10) を使用して、操作中に新しいエラーを監視します。
4. 変数を調査: inspect_console_object("myVariable") を使用してアプリケーションの状態を調べます。

例のワークフロー:

あなた: "Reactコンポーネントが適切に更新されません"
Claude: JavaScriptコンソールにエラーがないか確認します。

get_console_error_summary()

2つのJavaScriptエラーがあることがわかります。コンポーネントを操作している間、コンソールも監視します:

monitor_console_live(15)

今度は動作していないコンポーネントをクリックしてみてください。新しいエラーや警告を監視します。

パフォーマンスデバッグ

ウェブアプリケーションが読み込みが遅いか、メモリを大量に使用する場合:

1. 接続されたブラウザでアプリケーションを読み込む
2. ページメトリクスを確認: get_page_info() を使用して読み込み時間とリソース数を表示します。
3. パフォーマンスを分析: get_performance_metrics() を使用して詳細なタイミングデータを表示します。
4. メモリ使用量を監視: パフォーマンスメトリクスのメモリ情報を確認します。

例のワークフロー:

あなた: "アプリケーションの読み込みに時間がかかりすぎます"
Claude: アプリケーションのパフォーマンスを分析します。

get_page_info()

ページに47個のスクリプトがあり、読み込みに3.2秒かかったことがわかります。より詳細なパフォーマンスデータを取得します:

get_performance_metrics()

主なボトルネックは、2.1MBの初期JavaScriptバンドルです。DOM処理にも800msかかっています。

認証問題のデバッグ

ログインまたはセッション管理が機能しない場合:

1. ログインページに移動
2. クッキーを確認: get_cookies() を使用して認証クッキーを表示します。
3. ログイン中のネットワークを監視: ログインプロセス中に monitor_console_live() と get_network_requests() を使用します。
4. 保存されたデータを調査: JavaScriptの実行を使用してlocalStorage/sessionStorageを確認します。

例のワークフロー:

あなた: "ユーザーがログインしたままにできません"
Claude: 認証設定を確認します。

get_cookies()

認証クッキーが存在することがわかります。ログイン中のネットワークを監視して、何が起こっているかを確認します:

get_network_requests(filter_domain="your-api.com")

ログインリクエストが200を返しているが、Set-Cookieヘッダがないことに気づきました。localStorageも確認します:

execute_javascript("Object.keys(localStorage)")

DOM要素の検査

• get_document(depth?, pierce?) - DOMドキュメント構造を取得します。
• query_selector(node_id, selector) - CSSセレクタで単一の要素を検索します。
• query_selector_all(node_id, selector) - CSSセレクタで複数の要素を検索します。
• get_element_attributes(node_id) - 要素のすべての属性を取得します。
• get_element_outer_html(node_id) - 要素の外部HTMLを取得します。
• get_element_box_model(node_id) - レイアウト情報を取得します。
• describe_element(node_id, depth?) - 要素の詳細な説明を取得します。
• get_element_at_position(x, y) - 画面上の位置にある要素を取得します。
• search_elements(query) - テキスト/属性でDOM要素を検索します。
• focus_element(node_id) - DOM要素にフォーカスを当てます。

CSSスタイル分析

• get_computed_styles(node_id) - 計算されたCSSスタイルを取得します。
• get_inline_styles(node_id) - インラインスタイルを取得します。
• get_matched_styles(node_id) - 要素に一致するすべてのCSSルールを取得します。
• get_stylesheet_text(stylesheet_id) - スタイルシートの内容を取得します。
• get_background_colors(node_id) - 背景色とフォントを取得します。
• get_platform_fonts(node_id) - プラットフォームのフォント情報を取得します。
• get_media_queries() - すべてのメディアクエリを取得します。
• collect_css_class_names(stylesheet_id) - CSSクラス名を収集します。
• start_css_coverage_tracking() - CSSカバレッジの追跡を開始します。
• stop_css_coverage_tracking() - CSSカバレッジの追跡を停止し、結果を取得します。

一般的なコマンド

設定

環境変数

• CHROME_DEBUG_PORT - Chromeのリモートデバッグポート（デフォルト: 9222）

MCP互換性

• MCPプロトコルバージョン: 2024-11-05
• 最小Pythonバージョン: 3.10+
• サポートされるMCPクライアント: Claude Desktop、MCP互換のクライアント
• パッケージマネージャ: uv（推奨）またはpip

使用ワークフロー

前提条件（開発環境）

• ウェブアプリケーションを実行していること（例: npm run dev, python -m http.server など）
• アプリケーションがアクセス可能なURLをメモしておくこと

デバッグセッション

1. Claude Desktopを介してアプリケーションに接続する:

   start_chrome_and_connect("localhost:3000")
   

   アプリケーションのURLに置き換えてください

2. MCPツールを使用してアプリケーションをデバッグする:

   • ネットワークリクエストを監視する
   • コンソールエラーを確認する
   • JavaScriptオブジェクトを調査する
   • パフォーマンスを分析する

3. エディタでコードを変更する

4. アプリケーションをリフレッシュまたは操作する

5. リアルタイムデータでデバッグを続ける

手動接続（代替案）

ステップバイステップの制御が好みの場合:

1. start_chrome() - デバッグを有効にしてChromeを起動します。
2. navigate_to_url("your-app-url") - アプリケーションに移動します。
3. connect_to_browser() - MCPサーバーを接続します。
4. 必要に応じてデバッグツールを使用します。

セキュリティに関する注意事項

• 開発環境でのみ使用してください。
• 本番環境のChromeインスタンスに接続しないでください。
• サーバーはローカルホストのデバッグ用に設計されています。
• データは永続的に保存されず、すべてセッションベースです。

トラブルシューティング

Claude Desktopでサーバーが「無効」と表示される場合

サーバーがClaudeに表示されるが、「無効」と表示される場合は、以下の手順を試してください:

1. Claude Desktopのログを確認する:

   • macOS: ~/Library/Logs/Claude/mcp*.log
   • Windows: %APPDATA%/Claude/logs/mcp*.log

2. 一般的な修正方法:

   # 詳細出力で再インストール
   mcp remove "Chrome DevTools MCP"
   mcp install server.py -n "Chrome DevTools MCP" --with-editable . -v CHROME_DEBUG_PORT=9222
   
   # インストール状態を確認
   mcp list
   
   # サーバーを手動でテスト
   python3 server.py
   

3. 依存関係を確認する:

   # すべての依存関係が利用可能かを確認
   pip install mcp websockets aiohttp
   
   # インポートをテスト
   python3 -c "from server import mcp; print('OK')"
   

4. Claude Desktopを完全に再起動する（終了して再開）

インストールの問題

• MCP CLIが見つからない: Python MCP SDK から pip install mcp でMCP CLIをインストールします。
• サーバーがClaudeに表示されない:
  • MCP CLIの場合: mcp list を実行してサーバーがインストールされていることを確認します。
  • 手動セットアップの場合: Claude Desktopの設定ファイルのパスとJSON構文を確認します。
• インポートエラー:
  • MCP CLIの場合: --with-editable . を使用してローカル依存関係をインストールします。
  • 手動セットアップの場合: pip install -r requirements.txt を実行します。
• パーミッションエラー: 設定で絶対パスを使用します。
• 環境変数が機能しない: .env ファイルの形式または -v フラグの構文を確認します。
• モジュールが見つからない: ローカルパッケージのインストールに --with-editable . フラグを使用することを確認します。

デバッグ手順

ステップ1: MCP CLIの状態を確認する

# すべてのインストールされたサーバーをリスト表示
mcp list

# 特定のサーバーの状態を確認
mcp status "Chrome DevTools MCP"

ステップ2: サーバーを手動でテストする

# サーバーがエラーなく起動するかをテスト
python3 server.py

# インポートをテスト
python3 -c "from server import mcp; print(f'Server: {mcp.name}')"

ステップ3: 設定を確認する

Claude Desktopの場合:

# 現在の設定を表示（macOS）
cat "~/Library/Application Support/Claude/claude_desktop_config.json"

# 現在の設定を表示（Windows）
type "%APPDATA%/Claude/claude_desktop_config.json"

Claude Codeの場合:

# 構成されたMCPサーバーをリスト表示
claude mcp list

# 特定のサーバーの詳細を取得
claude mcp get chrome-devtools

# 重要: パスが相対ではなく絶対であることを確認
# 良好な例の出力:
#   Command: /Users/you/chrome-devtools-mcp/.venv/bin/python
#   Args: ["/Users/you/chrome-devtools-mcp/server.py"]
# 不良な例の出力:
#   Command: python
#   Args: ["server.py"]

# Claude Codeが使用する正確なコマンドをテスト
/path/to/.venv/bin/python /path/to/server.py

# サーバーが動作しているかを確認
claude mcp serve --help

ステップ3.5: パスの問題を修正する（Claude Code専用）

# パスが相対的な場合は、削除して絶対パスで再追加
claude mcp remove chrome-devtools

# 絶対パスで再追加
SERVER_PATH="$(pwd)/server.py"
PYTHON_PATH="$(pwd)/.venv/bin/python"
claude mcp add chrome-devtools "$PYTHON_PATH" "$SERVER_PATH" -e CHROME_DEBUG_PORT=9222

ステップ4: 必要に応じて再インストールする

MCP CLIの場合:

# クリーンな再インストール
mcp remove "Chrome DevTools MCP"
mcp install server.py -n "Chrome DevTools MCP" --with-editable .

# Claude Desktopを完全に再起動

Claude Codeの場合:

# サーバーを削除して再追加
claude mcp remove chrome-devtools
claude mcp add chrome-devtools python server.py -e CHROME_DEBUG_PORT=9222

# または、異なるスコープで更新
claude mcp add chrome-devtools python server.py -s user -e CHROME_DEBUG_PORT=9222

一般的なエラーメッセージ

手動設定のフォールバック

Claude Desktopの場合: MCP CLIが機能しない場合は、これをClaude Desktopの設定に手動で追加します:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "python3",
      "args": ["/absolute/path/to/chrome-devtools-mcp/server.py"],
      "env": {
        "CHROME_DEBUG_PORT": "9222"
      }
    }
  }
}

Claude Codeの場合: claude mcp add コマンドが機能しない場合は、絶対パスを使用したJSON形式を使用できます:

# 最初に絶対パスを取得
SERVER_PATH="$(pwd)/server.py"
PYTHON_PATH="$(pwd)/.venv/bin/python"

# 絶対パスを使用したJSON構成でサーバーを追加
claude mcp add-json chrome-devtools "{
  \"command\": \"$PYTHON_PATH\",
  \"args\": [\"$SERVER_PATH\"],
  \"env\": {
    \"CHROME_DEBUG_PORT\": \"9222\"
  }
}"

# または、Claude Desktopで動作している場合は、そこからインポート
claude mcp add-from-claude-desktop

Claude Codeの正しい設定の例（絶対パスを使用）:

{
  "command": "/Users/you/chrome-devtools-mcp/.venv/bin/python",
  "args": ["/Users/you/chrome-devtools-mcp/server.py"],
  "env": {
    "CHROME_DEBUG_PORT": "9222"
  }
}

接続の問題

• Chromeが起動しない: start_chrome() を使用すると、MCPサーバーが自動的にChromeを起動します。
• 接続できない: get_connection_status() を試して、接続を確認します。
• ツールが機能しない: connect_to_browser() を呼び出したか、start_chrome_and_connect() を使用したことを確認します。

一般的な誤解

• これはウェブサーバーではありません: MCPサーバーはClaude Desktop内で実行され、別のウェブサービスとしては実行されません。
• 別のインストールは必要ありません: Claude Desktopで構成すると、サーバーは自動的に起動します。
• あなたのアプリは別に実行されます: このツールは既存のウェブアプリケーションに接続し、実行するわけではありません。

🔧 技術詳細

このセクションは、MCPサーバー自体をテストまたは変更したい開発者向けです。

開発環境のセットアップ

uvを使用する場合（推奨）:

git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
uv sync

pipを使用する場合:

git clone https://github.com/benjaminr/chrome-devtools-mcp.git
cd chrome-devtools-mcp
pip install -e ".[dev]"

コード品質ツール

# コードをフォーマット
uv run ruff format .

# コードをリント
uv run ruff check .

# 型チェック
uv run mypy src/

拡張機能のビルド

DXTパッケージングツールをインストール:

npm install -g @anthropic-ai/dxt

拡張機能をビルド:

# クイックビルド
make package

# または手動で
npx @anthropic-ai/dxt pack

開発用のMakefileを使用:

make help           # すべてのコマンドを表示
make install        # 依存関係をインストール
make dev            # 開発環境をセットアップ + コミット前フック
make check          # すべてのチェックを実行（リント + 型 + テスト）
make pre-commit     # コミット前フックを手動で実行
make package        # .dxt拡張機能をビルド
make release        # 完全なリリースビルド

コミット前フック

このプロジェクトでは、コード品質を確保するためにコミット前フックを使用しています:

• ruff: リントとフォーマット
• mypy: 型チェック
• pytest: テストの検証
• MCP検証: サーバーの登録チェック

コミット前フックは git commit 時に自動的に実行され、make pre-commit で手動で実行することもできます。

📄 ライセンス

MITライセンス