Web開発において、ブラウザでの動作確認やテストは避けて通れない作業です。しかし、毎回手動でブラウザを操作してテストを行うのは時間がかかり、開発効率を下げる要因になっていませんか？

Chrome DevTools MCPを使えば、Claude Codeから直接ブラウザを操作し、自動テストを実現できます。この記事では、Chrome DevTools MCPの導入方法から実践的な使い方まで、初心者の方にもわかりやすく解説していきますね。

背景

Web開発におけるテストの重要性

現代のWeb開発では、ユーザー体験の品質を保つために自動テストが不可欠です。特にフロントエンド開発では、ブラウザ上での動作確認が必要になりますが、この作業は非常に手間がかかります。

従来のE2Eテストツール（Selenium、Puppeteer、Playwrightなど）は強力ですが、セットアップが複雑で、テストコードの記述にも専門知識が必要でした。開発者は本来の機能開発に集中したいのに、テスト環境の構築やメンテナンスに多くの時間を取られてしまうのです。

MCPとChrome DevToolsの融合

MCP（Model Context Protocol）は、AIアシスタントが外部ツールやサービスと連携するための標準プロトコルです。Chrome DevTools MCPは、このMCPを使ってChrome DevToolsの機能をClaude Codeから直接利用できるようにしたツールなんです。

以下の図は、Chrome DevTools MCPがどのように動作するかを示しています。

mermaidCopy codeflowchart LR
  user["開発者"] -->|指示| claude["Claude Code"]
  claude -->|MCP経由| cdp["Chrome DevTools<br/>Protocol"]
  cdp -->|制御| chrome["Chrome<br/>ブラウザ"]
  chrome -->|結果| cdp
  cdp -->|レポート| claude
  claude -->|フィードバック| user

この仕組みにより、自然言語での指示だけでブラウザの自動操作が可能になります。

図の要点

• Claude Codeが開発者の指示を受け取る
• MCPを経由してChrome DevTools Protocolに接続
• ブラウザを直接制御し、結果を開発者にフィードバック

課題

手動テストの限界

Web開発における手動テストには、以下のような課題があります。

#	課題	影響
1	時間コスト	同じテストケースを何度も手動で実行する必要がある
2	人的ミス	見落としや確認漏れが発生しやすい
3	再現性の低さ	問題の再現が難しく、デバッグに時間がかかる
4	ドキュメント不足	テスト手順が属人化しやすい

特にレスポンシブデザインのテストや、複雑なユーザーインタラクションの確認では、手動テストの負担が非常に大きくなります。毎回異なる画面サイズでの動作を確認したり、フォームの入力パターンを試したりするのは、想像以上に時間がかかりますよね。

既存のテストツールの課題

既存の自動テストツールにも、以下のような課題があります。

セットアップの複雑さ

Seleniumを例に取ると、WebDriverのインストール、ブラウザドライバーの管理、テスト環境の構築など、多くの準備が必要です。初心者にとっては、この段階でつまずいてしまうことも少なくありません。

bashCopy code# Seleniumのセットアップ例
yarn add selenium-webdriver
# ChromeDriverのダウンロードと配置が別途必要
# 環境変数の設定も必要

テストコードの記述コスト

テストを書くには、各ツール固有のAPIを学習する必要があります。以下はPlaywrightの例ですが、このようなコードを書くだけでもある程度の学習が必要です。

typescriptCopy codeimport { test, expect } from '@playwright/test';

test('基本的なテスト', async ({ page }) => {
  await page.goto('https://example.com');
  await page.click('button#login');
  await expect(page.locator('h1')).toHaveText('ダッシュボード');
});

デバッグの難しさ

テストが失敗した時、問題の原因を特定するのが困難です。スクリーンショットやログを確認しても、実際のブラウザの状態を再現するのは簡単ではありません。

下図は、従来のテストツールにおける課題の構造を示しています。

mermaidCopy codeflowchart TD
  start["テスト実施"] --> setup["環境構築"]
  setup --> code["テストコード記述"]
  code --> run["テスト実行"]
  run --> fail{失敗?}
  fail -->|はい| debug["デバッグ"]
  debug --> log["ログ確認"]
  log --> screen["スクリーンショット確認"]
  screen --> reproduce["再現試行"]
  reproduce --> setup
  fail -->|いいえ| done["完了"]

図で理解できる要点

• セットアップ、コード記述、デバッグの各段階で時間がかかる
• 失敗時のデバッグサイクルが長い
• 再現のために再度環境構築が必要になることもある

解決策

Chrome DevTools MCPの特徴

Chrome DevTools MCPは、上記の課題を解決する革新的なアプローチを提供します。最大の特徴は、自然言語でのブラウザ操作とClaude Codeとの統合です。

主な特徴

#	特徴	メリット
1	自然言語での操作	プログラミング知識が少なくても使える
2	Claude Codeとの統合	既存の開発環境にシームレスに組み込める
3	リアルタイムデバッグ	ブラウザの状態を即座に確認できる
4	スクリーンショット自動取得	視覚的な確認が容易
5	Chrome DevTools Protocolの活用	強力なブラウザ制御機能

Chrome DevTools Protocolとは

Chrome DevTools Protocol（CDP）は、Chromeブラウザを外部から制御するための公式プロトコルです。Chrome DevTools MCPは、このCDPをMCP経由で利用できるようにしたラッパーなんですね。

以下の図は、Chrome DevTools MCPのアーキテクチャを示しています。

mermaidCopy codeflowchart TB
  subgraph dev["開発環境"]
    vscode["VSCode/<br/>エディタ"]
    claude["Claude Code"]
  end

  subgraph mcp_layer["MCP レイヤー"]
    mcp["MCP Server"]
    cdp_mcp["Chrome DevTools<br/>MCP"]
  end

  subgraph browser["ブラウザ環境"]
    cdp_protocol["Chrome DevTools<br/>Protocol"]
    chrome_inst["Chrome<br/>インスタンス"]
  end

  vscode --> claude
  claude --> mcp
  mcp --> cdp_mcp
  cdp_mcp --> cdp_protocol
  cdp_protocol --> chrome_inst
  chrome_inst --> cdp_protocol
  cdp_protocol --> cdp_mcp
  cdp_mcp --> mcp
  mcp --> claude

図で理解できる要点

• 開発環境からMCPレイヤーを経由してブラウザを制御
• 双方向の通信で結果をフィードバック
• 各レイヤーが独立しているため、保守性が高い

導入の簡単さ

Chrome DevTools MCPの導入は、従来のテストツールと比べて非常にシンプルです。npmパッケージとして提供されているため、数分でセットアップが完了します。

具体例

インストール手順

Chrome DevTools MCPのインストールは、以下の手順で行います。まず、必要なパッケージをインストールしましょう。

Node.jsのバージョン確認

Chrome DevTools MCPを使用するには、Node.js 18以上が必要です。

bashCopy codenode --version
# v18.0.0以上であることを確認

MCPサーバーのインストール

次に、Chrome DevTools MCPパッケージをグローバルにインストールします。

bashCopy codeyarn global add @executeautomation/chrome-devtools-mcp

インストールが完了したら、パッケージが正しくインストールされたか確認しましょう。

bashCopy codeyarn global list | grep chrome-devtools-mcp
# @executeautomation/chrome-devtools-mcp が表示されればOK

Claude Codeでの設定

インストールしたMCPサーバーをClaude Codeで使用するには、設定ファイルを編集する必要があります。

設定ファイルの場所

Claude Codeの設定は、以下のファイルで管理されています。

• macOS/Linux: ~​/​.config​/​claude​/​claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

設定ファイルの編集

設定ファイルに以下の内容を追加します。この設定により、Claude CodeがChrome DevTools MCPサーバーと通信できるようになります。

jsonCopy code{
  "mcpServers": {
    "chrome-devtools": {
      "command": "node",
      "args": [
        "/path/to/global/node_modules/@executeautomation/chrome-devtools-mcp/build/index.js"
      ]
    }
  }
}

​/​path​/​to​/​global​/​node_modulesの部分は、実際のグローバルnode_modulesのパスに置き換える必要があります。

グローバルnode_modulesのパスを確認

bashCopy codeyarn global dir
# 表示されたパスの後ろに /node_modules を追加

例えば、​/​Users​/​username​/​.yarn​/​globalと表示された場合、設定ファイルには以下のように記述します。

jsonCopy code{
  "mcpServers": {
    "chrome-devtools": {
      "command": "node",
      "args": [
        "/Users/username/.yarn/global/node_modules/@executeautomation/chrome-devtools-mcp/build/index.js"
      ]
    }
  }
}

基本的な使い方

設定が完了したら、Claude Codeを再起動してChrome DevTools MCPを使用できるようにします。

Chromeブラウザの起動

まず、デバッグモードでChromeを起動する必要があります。以下のコマンドで、リモートデバッグポートを有効にしてChromeを起動しましょう。

bashCopy code# macOSの場合
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-debug

Windowsの場合は、以下のコマンドを使用します。

bashCopy code# Windowsの場合
"C:\Program Files\Google\Chrome\Application\chrome.exe" ^
  --remote-debugging-port=9222 ^
  --user-data-dir=C:\temp\chrome-debug

Claude Codeでのブラウザ操作

Chromeが起動したら、Claude Codeから自然言語でブラウザ操作を指示できます。以下は基本的な操作例です。

bashCopy code「http://localhost:3000 にアクセスしてください」
「ページのスクリーンショットを撮ってください」
「id="login-button" の要素をクリックしてください」

実践的なテストシナリオ

ここでは、実際のWebアプリケーションをテストする具体例を紹介します。Next.jsで作成したログインフォームのテストを想定しましょう。

テストするコンポーネント

まず、テスト対象となるログインフォームのコードです。このコンポーネントは、メールアドレスとパスワードを入力してログインする基本的なフォームです。

typescriptCopy code// components/LoginForm.tsx
import { useState } from 'react';

export default function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  return (
    <form id="login-form">
      <h1>ログイン</h1>
      <input
        id="email-input"
        type="email"
        placeholder="メールアドレス"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />

続いて、パスワード入力フィールドとボタンの実装です。

typescriptCopy code      <input
        id="password-input"
        type="password"
        placeholder="パスワード"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button id="login-button" type="submit">
        ログイン
      </button>
      {error && <p id="error-message">{error}</p>}
    </form>
  );
}

Claude Codeを使ったテスト手順

Chrome DevTools MCPを使って、このログインフォームをテストする手順を見ていきましょう。Claude Codeに以下のように指示します。

ステップ1：ページへのアクセス

bashCopy code「http://localhost:3000/login にアクセスして、ページが正しく読み込まれたか確認してください」

この指示により、Claude CodeがブラウザでURLを開き、ページの読み込み完了を確認します。

ステップ2：フォーム要素の確認

bashCopy code「ページ内に id="email-input", id="password-input", id="login-button" の要素が存在するか確認してください」

Claude Codeは、指定した要素がDOMに存在するかを確認し、結果をレポートします。

ステップ3：入力操作

iniCopy code「id="email-input" に "test@example.com" を入力してください」
「id="password-input" に "password123" を入力してください」

これらの指示で、実際にフォームに値を入力します。手動で入力するのと同じ動作を自動化できますね。

ステップ4：スクリーンショットの取得

入力後の状態を視覚的に確認するため、スクリーンショットを取得します。

Copy code「現在のページのスクリーンショットを撮影してください」

スクリーンショットは自動的に保存され、Claude Codeの画面で確認できます。

ステップ5：送信ボタンのクリック

iniCopy code「id="login-button" をクリックして、フォームを送信してください」

ステップ6：結果の検証

送信後、期待通りの動作をしているか確認します。

iniCopy code「ページ遷移が発生したか確認してください」
「現在のURLを教えてください」
「エラーメッセージ（id="error-message"）が表示されているか確認してください」

レスポンシブデザインのテスト

Chrome DevTools MCPは、異なる画面サイズでの表示確認も簡単に行えます。以下の図は、レスポンシブテストの流れを示しています。

mermaidCopy codeflowchart LR
  start["テスト開始"] --> desktop["デスクトップ<br/>サイズ設定"]
  desktop --> desktop_test["表示確認<br/>スクショ取得"]
  desktop_test --> tablet["タブレット<br/>サイズ設定"]
  tablet --> tablet_test["表示確認<br/>スクショ取得"]
  tablet_test --> mobile["モバイル<br/>サイズ設定"]
  mobile --> mobile_test["表示確認<br/>スクショ取得"]
  mobile_test --> compare["結果比較"]

画面サイズの変更

Claude Codeに以下のように指示することで、異なる画面サイズでのテストが可能です。

Copy code「ビューポートサイズを 1920x1080 に設定してください」
「スクリーンショットを撮影してください」
「ビューポートサイズを 768x1024（タブレット）に設定してください」
「スクリーンショットを撮影してください」
「ビューポートサイズを 375x667（iPhone SE）に設定してください」
「スクリーンショットを撮影してください」

パフォーマンステスト

Chrome DevTools MCPは、ページのパフォーマンス計測にも使用できます。

ページロード時間の計測

arduinoCopy code「http://localhost:3000 にアクセスして、ページの読み込み時間を計測してください」
「DOMContentLoaded イベントと Load イベントのタイミングを教えてください」

ネットワークリクエストの確認

Copy code「ネットワークタブを開いて、全てのリクエストをリストアップしてください」
「画像ファイルのサイズと読み込み時間を確認してください」

エラーケースのテスト

実際の開発では、正常系だけでなくエラーケースのテストも重要です。Chrome DevTools MCPを使えば、エラー状態の再現も簡単に行えます。

バリデーションエラーのテスト

不正な入力値でフォームを送信し、適切なエラーメッセージが表示されるか確認します。

iniCopy code「id="email-input" に "invalid-email" を入力してください」
「id="password-input" を空のままにしてください」
「id="login-button" をクリックしてください」
「id="error-message" にバリデーションエラーが表示されているか確認してください」

ネットワークエラーのシミュレーション

Chrome DevTools Protocolには、ネットワーク状態を制御する機能があります。

Copy code「ネットワークをオフラインに設定してください」
「ページをリロードしてください」
「エラーページが表示されるか確認してください」
「ネットワークをオンラインに戻してください」

コンソールエラーの検出

JavaScriptのエラーを自動的に検出することも可能です。

Copy code「コンソールにエラーメッセージが出力されていないか確認してください」
「もしエラーがあれば、エラーメッセージとスタックトレースを教えてください」

これにより、見落としがちなJavaScriptエラーを確実に検出できます。予期しないTypeErrorやReferenceErrorなどを早期に発見できるのは大きなメリットですね。

継続的インテグレーションへの組み込み

Chrome DevTools MCPは、CI/CD環境でも活用できます。GitHub ActionsやGitLab CIと組み合わせることで、プルリクエストごとに自動テストを実行できます。

GitHub Actionsの設定例

以下は、GitHub ActionsでChrome DevTools MCPを使用する基本的なワークフロー設定です。

yamlCopy codename: E2E Tests
on:
  pull_request:
    branches: [main]

jobs:
  e2e-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

続いて、依存関係のインストールとテスト実行の設定です。

yamlCopy code      - name: Install dependencies
        run: yarn install

      - name: Install Chrome DevTools MCP
        run: yarn global add @executeautomation/chrome-devtools-mcp

      - name: Start application
        run: |
          yarn build
          yarn start &
          sleep 5

最後に、Chromeの起動とテスト実行の設定を追加します。

yamlCopy code      - name: Run E2E tests
        run: |
          google-chrome \
            --headless \
            --remote-debugging-port=9222 \
            --user-data-dir=/tmp/chrome-debug &
          sleep 2
          # Claude Code CLIでテストを実行
          claude-code run-tests

この設定により、コードの変更があるたびに自動的にブラウザテストが実行され、問題があれば即座に検出できます。

まとめ

Chrome DevTools MCPは、Web開発における自動テストの導入障壁を大幅に下げる画期的なツールです。この記事でご紹介した内容を振り返ってみましょう。

Chrome DevTools MCPの主なメリット

導入の簡単さ

従来のテストツールと比べて、セットアップが非常にシンプルです。npmパッケージのインストールと設定ファイルの編集だけで、すぐに使い始められます。複雑なWebDriverの管理や環境構築は不要なので、初心者でも安心して導入できますね。

自然言語での操作

プログラミングコードを書く必要がなく、Claude Codeに日本語で指示するだけでブラウザ操作が可能です。これにより、テストケースの作成時間が大幅に短縮され、テストの属人化も防げます。

強力なデバッグ機能

Chrome DevTools Protocolの全機能を活用できるため、ネットワークの監視、パフォーマンス計測、コンソールエラーの検出など、包括的なテストが実現できます。問題の早期発見と迅速な解決に繋がるでしょう。

活用シーン

Chrome DevTools MCPは、以下のような場面で特に威力を発揮します。

#	シーン	効果
1	フォームのバリデーションテスト	入力パターンを網羅的に確認できる
2	レスポンシブデザインの確認	複数の画面サイズを自動でテスト
3	パフォーマンスの継続的監視	ページ速度の劣化を早期検出
4	リグレッションテスト	既存機能の動作を自動確認
5	CI/CDパイプラインでの自動テスト	プルリクエストごとに品質を保証

今後の展望

Chrome DevTools MCPは、まだ発展途上のツールですが、すでに実用レベルの機能を備えています。今後は、より多くのChrome DevTools Protocolの機能がサポートされ、さらに使いやすくなっていくことが期待されます。

AIとブラウザ自動化の融合は、Web開発の新しい可能性を開いています。手動テストの時間を削減し、より創造的な開発作業に集中できる環境を、Chrome DevTools MCPが実現してくれるのです。

ぜひ、皆さんのプロジェクトでもChrome DevTools MCPを試してみてください。開発体験が大きく向上することを実感していただけるはずです。

関連リンク

• Chrome DevTools Protocol 公式ドキュメント
• MCP (Model Context Protocol) 公式サイト
• chrome-devtools-mcp GitHub リポジトリ
• Claude Code 公式ドキュメント
• Playwright 公式サイト
• Puppeteer 公式ドキュメント
• GitHub Actions ドキュメント