Chrome DevTools MCPの設定方法

Claude CodeでChrome DevTools MCPサーバーを使用すると、Chromeブラウザの操作、スナップショット取得、ページのナビゲーション、要素のクリックなどを自動化できます。

MCPとは

MCP (Model Context Protocol) は、Claude Codeに外部ツールやサービスを接続するためのプロトコルです。Chrome DevTools MCPを使用すると、以下のような操作が可能になります：

Webページの操作（クリック、入力、スクロール）
ページのスナップショット取得
コンソールログやネットワークリクエストの監視
スクリーンショットの撮影
パフォーマンス計測

設定方法

1. グローバル設定（全プロジェクトで使用）

すべてのプロジェクトでChrome DevTools MCPを使用したい場合は、グローバルに設定します。

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

説明:

--transport stdio: 標準入出力を使用してMCPサーバーと通信
chrome-devtools: MCPサーバーの名前（任意の名前を指定可能）
npx chrome-devtools-mcp@latest: 実行するコマンド（最新版を自動ダウンロード）

2. プロジェクトローカル設定（特定のプロジェクトのみ）

特定のプロジェクトでのみChrome DevTools MCPを使用したい場合は、ローカル設定を使用します。

claude mcp add -s local --transport stdio chrome-devtools -- npx chrome-devtools-mcp@latest

説明:

-s local: プロジェクトローカルスコープで設定（このオプションでローカル設定になる）
その他のオプションはグローバル設定と同じ

3. 設定の確認

設定されているMCPサーバーを確認するには：

# すべてのMCPサーバーを一覧表示
claude mcp list

# 特定のMCPサーバーの詳細を表示
claude mcp get chrome-devtools

出力例:

chrome-devtools:
  Scope: Local config (private to you in this project)
  Status: ✓ Connected
  Type: stdio
  Command: npx
  Args: chrome-devtools-mcp@latest
  Environment:

設定の削除

不要になったMCPサーバーを削除するには：

# グローバル設定を削除
claude mcp remove chrome-devtools

# ローカル設定を削除
claude mcp remove chrome-devtools -s local

環境変数の設定

MCPサーバーに環境変数を渡す必要がある場合は、--envオプションを使用します：

claude mcp add --transport stdio \
  --env API_KEY=your_api_key \
  --env DEBUG=true \
  my-mcp-server -- npx my-mcp-server@latest

使用例

設定後、Claude Codeのセッション内で以下のようなツールが使用可能になります：

mcp__chrome-devtools__new_page: 新しいページを開く
mcp__chrome-devtools__navigate_page: ページに移動
mcp__chrome-devtools__take_snapshot: ページのスナップショットを取得
mcp__chrome-devtools__click: 要素をクリック
mcp__chrome-devtools__fill: フォームに入力
mcp__chrome-devtools__take_screenshot: スクリーンショットを撮影
mcp__chrome-devtools__list_console_messages: コンソールログを取得
mcp__chrome-devtools__list_network_requests: ネットワークリクエストを取得

実際の使用例

ユーザー: https://example.com にアクセスして、トップページのスクリーンショットを撮ってください

Claude: [mcp__chrome-devtools__new_page を使用]
        [mcp__chrome-devtools__navigate_page でページに移動]
        [mcp__chrome-devtools__take_screenshot でスクリーンショット撮影]

トラブルシューティング

MCPサーバーが接続できない場合

Node.jsのバージョンを確認
```
node --version
```
Node.js 18以上が推奨されます。
MCPサーバーのステータスを確認
```
claude mcp list
```
ステータスが✓ Connectedになっているか確認します。
Claude Codeを再起動 MCPサーバーの設定変更後は、Claude Codeを再起動する必要がある場合があります。

別のセッションで使えない場合

ローカル設定の場合: 各プロジェクトで個別にclaude mcp add -s localを実行する必要があります
グローバル設定の場合: 一度設定すればすべてのプロジェクトで使用可能です

設定のスコープを確認するには：

claude mcp get chrome-devtools

Scope: Local configと表示される場合はローカル設定、Scope: Global configと表示される場合はグローバル設定です。

参考情報

Chrome DevTools MCP GitHub
Claude Code MCP Documentation
MCPサーバーのリスト: claude mcp listコマンドで確認可能

まとめ

グローバル設定: すべてのプロジェクトで使用する場合に推奨

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

ローカル設定: 特定のプロジェクトでのみ使用する場合

claude mcp add -s local --transport stdio chrome-devtools -- npx chrome-devtools-mcp@latest

設定確認: claude mcp listまたはclaude mcp get chrome-devtools
削除: claude mcp remove chrome-devtools [-s local]

Chrome DevTools MCPを活用することで、Webページのテスト、スクレイピング、UI操作の自動化などを効率的に行うことができます。