Claude Code × Chrome DevTools連携｜WebアプリのライブデバッグをAIで効率化する

Claude CodeとChrome DevToolsをMCP経由で連携すれば、ブラウザ上で動作するWebアプリのDOM操作・スクリーンショット撮影・パフォーマンス分析・コンソールログ監視をClaude Codeから直接実行できます。「コードを修正→ブラウザで確認→さらに修正」という手動サイクルが、Claude Codeへの1回の指示でコード修正と画面検証を同時に完了する自動サイクルに変わります。

この記事でわかること

フロントエンド開発の「コード修正→ブラウザ確認→再修正」という手動サイクルを、Claude Codeからの1回の指示で自動化する方法を解説します。スクリーンショット検証からLighthouse分析まで、ブラウザ操作をAIに委任する具体的な手順を紹介します。

• Chrome DevTools MCPサーバーの設定手順と接続方法がわかる — Puppeteer、Playwright、Seleniumなどのブラウザ自動化ツールも内部的にこのプロトコルを使用しています。
• Claude Codeからブラウザを操作してライブデバッグする具体的な方法を学べる — ClaudeCodeのセッション内で、ChromeDevToolsMCPサーバーを追加します。
• DOM操作・パフォーマンス分析・スクリーンショット検証の3つの活用パターンを実装できる — CSSやコンポーネントの変更後に、UIの見た目が意図通りかをスクリーンショットで検証するパターンです。
• フロントエンド開発のデバッグサイクルを劇的に短縮する手法を把握できる
• Chrome DevTools連携と他のMCPサーバーを組み合わせた高度な自動化パターンを理解できる — コンポーネントファイルの保存をトリガーに、自動でブラウザの画面キャプチャを取得し、UIに問題がないかチェックする運用が実現します。

対象読者: フロントエンド開発でUIデバッグやパフォーマンス最適化に時間をかけているエンジニア

Chrome DevTools MCP連携とは

Chrome DevTools MCP連携とは、Chrome DevTools Protocol（CDP）をMCPサーバー経由でClaude Codeに公開し、ブラウザの操作・検査・分析をAIが直接行えるようにする仕組みです。

Chrome DevTools Protocolは、Chromeブラウザの内部機能（DOM操作、ネットワーク監視、パフォーマンス計測、コンソールアクセスなど）をプログラムから操作するためのプロトコルです。Puppeteer、Playwright、Seleniumなどのブラウザ自動化ツールも内部的にこのプロトコルを使用しています。

Chrome DevTools MCPサーバーは、このプロトコルをMCPの標準インターフェースに変換します。Claude Codeは「このページのスクリーンショットを撮って」「コンソールのエラーログを確認して」といった自然言語の指示を受け取り、MCPサーバー経由でブラウザを操作します。

MCPの基本概念については「Claude Code × MCP連携ガイド」で詳しく解説しています。

基本的な使い方

Step 1: Chrome DevTools MCPサーバーの追加

Claude Codeのセッション内で、Chrome DevTools MCPサーバーを追加します。

# Claude Codeセッション内で実行
/mcp add chrome-devtools

設定ファイル（.mcp.json）の記述例は以下の通りです。

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

Chrome DevTools MCPサーバーは、ローカルで起動中のChromeブラウザにCDPで接続します。Chromeをリモートデバッグモードで起動する必要があります。

# macOSの場合
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# リモートデバッグが有効か確認
curl http://localhost:9222/json/version

Step 2: ページへのナビゲーションとスクリーンショット

接続が完了したら、Claude Codeからブラウザ操作を開始できます。

http://localhost:3000 を開いて、
トップページのスクリーンショットを撮って。
表示に問題がないか確認して。

Claude Codeはスクリーンショットの画像を分析し、レイアウト崩れ・テキストの切れ・画像の未表示などを検出できます。視覚的な確認作業をAIに委任することで、目視チェックの時間を大幅に削減できます。

Step 3: コンソールログの確認とエラー対応

ブラウザのコンソールに出力されるログやエラーメッセージをClaude Codeがリアルタイムで取得し、原因特定からコード修正までを一括で処理します。

http://localhost:3000/dashboard を開いて、
コンソールに出ているエラーを全て確認して。
修正可能なエラーがあれば、該当するソースコードを修正して。

Claude Codeは以下を自動で実行します。

1. 指定URLにナビゲーション
2. コンソールのエラーメッセージを全件取得
3. エラーのスタックトレースからソースファイルを特定
4. コードベースの該当箇所を修正
5. 修正後に再度ページを読み込み、エラーが解消されたことを確認

実務での活用パターン

パターン1: ビジュアルリグレッション検証

CSSやコンポーネントの変更後に、UIの見た目が意図通りかをスクリーンショットで検証するパターンです。

Before（従来フロー）

1. コードを修正（10分）
2. ブラウザを手動で開いて各ページを目視確認（15分）
3. レスポンシブ対応を各デバイスサイズで確認（15分）
4. 問題を発見したらコードに戻って修正（10分〜）
5. 再度ブラウザで確認（10分）

合計: 1時間以上（修正→確認のサイクルが繰り返される）

After（Claude Code × Chrome DevTools連携）

src/components/Header.tsx を修正した後、以下を実行して:

1. http://localhost:3000 を開く
2. デスクトップ（1920×1080）でスクリーンショットを撮る
3. タブレット（768×1024）にリサイズしてスクリーンショットを撮る
4. モバイル（375×667）にリサイズしてスクリーンショットを撮る
5. 各サイズでレイアウト崩れがないか分析する
6. 問題があれば自動で修正して、再度スクリーンショットで確認する

合計: 10〜15分（コード修正と検証が1回のサイクルで完了）

Claude Codeはスクリーンショットの画像を直接分析できるため、「ボタンがはみ出している」「テキストが重なっている」「余白が不均一」といった視覚的な問題を自動で検出し、CSSの修正まで行います。

パターン2: パフォーマンス分析と最適化

Lighthouse監査とパフォーマンストレースをClaude Codeから実行し、Core Web Vitalsの改善提案とコード修正を同時に行うパターンです。

Before（従来フロー）

1. Chrome DevToolsを手動で開く（1分）
2. Lighthouseタブで監査を実行（2分）
3. 結果を読み解いて改善ポイントを特定（20分）
4. 具体的なコード修正方法を調査（30分）
5. コードを修正して再度Lighthouse実行（20分）

合計: 1時間13分

After（Claude Code × Chrome DevTools連携）

http://localhost:3000 に対してLighthouse監査を実行して、
以下の項目について分析と改善を行って:

1. Performance スコアと改善提案
2. LCP（Largest Contentful Paint）の最適化
3. CLS（Cumulative Layout Shift）の改善
4. 不要なJavaScriptのバンドルサイズ削減

改善可能な項目はコードを直接修正して、
修正後に再度Lighthouse監査を実行して改善を確認して。

合計: 15〜25分（分析→修正→検証が1サイクルで完了）

Claude Codeは、Lighthouseの監査結果を構造的に解析し、具体的なコード修正（画像のlazy loading追加、不要なimport削除、CSS最適化など）を提案・実行します。修正後に再度Lighthouse監査を行い、スコアの改善を確認するところまで自動化されます。こうした取り組みの詳細は、経営データの可視化やコンテンツマーケティングの支援のページでもご紹介しています。

パターン3: フォーム入力テストの自動化

Webアプリのフォームに対して、さまざまなパターンの入力値を自動で試行し、バリデーションの動作を検証するパターンです。

Before（従来フロー）

1. テストケースを設計（15分）
2. ブラウザで手動入力してバリデーション確認（30分）
3. エッジケース（空文字・超長文・特殊文字）を手動入力（20分）
4. エラーメッセージの表示を目視確認（10分）

合計: 1時間15分

After（Claude Code × Chrome DevTools連携）

http://localhost:3000/contact のお問い合わせフォームに対して、
以下のテストケースを自動で実行して:

1. 正常系: 全フィールドに有効な値を入力して送信
2. 必須チェック: 各フィールドを空のまま送信
3. 形式チェック: メールアドレスに不正な形式を入力
4. 境界値: 各フィールドに最大文字数+1の文字列を入力
5. 特殊文字: XSS攻撃パターン（<script>alert('test')</script>）を入力

各ケースでスクリーンショットを撮り、
バリデーションメッセージが正しく表示されているか確認して。
問題があればコードを修正して。

合計: 10〜20分（全パターンを自動実行・検証）

関連コマンドとの組み合わせ

Hooks機能との連携

Claude Codeの Hooks機能 を使えば、特定のイベント（ファイル保存・コミット前など）をトリガーにChrome DevTools検証を自動実行できます。

{
  "hooks": {
    "postSave": {
      "pattern": "src/components/**/*.tsx",
      "command": "スクリーンショットを撮って、変更箇所のUIを確認して"
    }
  }
}

コンポーネントファイルの保存をトリガーに、自動でブラウザの画面キャプチャを取得し、UIに問題がないかチェックする運用が実現します。

GitHub連携との組み合わせ

PRの作成時に、変更箇所のビフォー/アフターのスクリーンショットを自動で取得してPRの説明に添付する運用も可能です。

PRを作成する前に、以下を実行して:
1. mainブランチの画面をスクリーンショット
2. 現在のブランチの画面をスクリーンショット
3. 2枚を比較して変更点を説明
4. PRの説明にスクリーンショットと変更点の説明を含める

ネットワーク監視との組み合わせ

API通信の検証も、Chrome DevTools MCP連携で可能です。

http://localhost:3000/dashboard を開いて、
以下のネットワークリクエストを監視して:

1. /api/ で始まるリクエストを全て記録
2. レスポンスタイムが500ms以上のリクエストを特定
3. 4xx/5xxエラーが返っているリクエストを検出
4. 問題のあるAPIエンドポイントのバックエンドコードを確認・修正

フロントエンドの表示問題の原因がバックエンドにある場合でも、Chrome DevTools連携でネットワーク通信を可視化し、バックエンドのコード修正までClaude Codeが一括で対応します。

セキュリティと運用上の注意点

リモートデバッグポートの管理

Chrome DevTools MCPサーバーは、Chromeのリモートデバッグポート（デフォルト: 9222）に接続します。このポートはローカルホスト限定で開放し、外部からのアクセスを許可しないでください。リモート環境やCI/CD環境で使用する場合は、ファイアウォールで適切にアクセス制御を行います。

本番環境での使用禁止

Chrome DevTools MCP連携は、開発環境・ステージング環境専用のツールです。本番環境のブラウザに接続してデバッグ操作を行うことは、セキュリティ上のリスクが高いため避けてください。本番環境のデバッグが必要な場合は、ログ・モニタリングツールを使用します。

機密データの取り扱い

スクリーンショットやDOM取得の結果に、顧客の個人情報やAPIキーなどの機密データが含まれる可能性があります。Claude Codeとの対話ログに機密データが残らないよう、テスト用のダミーデータを使用してください。

あわせて読みたい

• Claude Computer Useの使い方｜AIがPC画面を操作するデスクトップ自動化の実践ガイド
• Claude Coworkの使い方｜CLAUDE.mdの設計・スキル構築・MCP接続まで完全セットアップガイド
• Claude Code × VS Code / JetBrains連携｜IDEとターミナルの最適な使い分け

まとめ

Claude CodeとChrome DevToolsのMCP連携は、フロントエンド開発のデバッグサイクルを根本的に短縮します。コード修正後のビジュアルリグレッション検証、Lighthouseによるパフォーマンス分析と自動最適化、フォーム入力テストの自動実行など、従来は手動で行っていた「ブラウザでの確認作業」をClaude Codeに委任できます

押さえておきたいポイントは以下の通りです。

• 修正→確認→再修正というサイクルが1回のClaude Code指示で完結するため、フロントエンドエンジニアは本質的な設計・実装に集中できるようになります
• 導入はChrome DevTools MCPサーバーの追加だけで完了するため、まずは開発中のページのスクリーンショット取得から試してみてください
• *Claude Codeの全コマンド一覧はClaude Codeチートシートをご覧ください
• AI活用の全体像はAI活用完全ガイドで解説しています

よくある質問（FAQ）

Q1: Chrome DevTools MCPサーバーはChrome以外のブラウザでも使えますか？

Chrome DevTools Protocol（CDP）はChromiumベースのブラウザでサポートされています。Google Chrome、Microsoft Edge、Brave、Operaなど、Chromiumベースのブラウザであれば同じ手順で利用できます。ただし、Safari（WebKit）やFirefox（Gecko）はCDPに対応していないため、別途対応するMCPサーバーが必要です。

Q2: ヘッドレスモード（画面表示なし）でも動作しますか？

はい、Chromeをヘッドレスモードで起動しても、Chrome DevTools MCP連携は正常に動作します。CI/CD環境やリモートサーバーなど、ディスプレイがない環境では --headless=new フラグを付けてChromeを起動してください。スクリーンショット取得やDOM操作、パフォーマンス分析など、全ての機能がヘッドレスモードでも利用できます。

Q3: 複数のタブやウィンドウを同時に操作できますか？

はい、Chrome DevTools MCPサーバーは複数のページ（タブ）を管理できます。new_page でタブを作成し、select_page で操作対象を切り替え、list_pages で現在開いているページの一覧を取得できます。A/Bテストの2パターンを同時に開いてスクリーンショットを比較する、といった使い方が可能です。