• #Claude Code
  • #MCP
  • #Chrome DevTools
  • #Playwright
  • #ブラウザ自動化
開発メモ

Chrome DevTools MCP vs Playwright MCP: 用途別の使い分けガイド

Claude Codeでブラウザを操作するMCPには、主に2つの選択肢がある。それぞれ得意分野が異なるため、用途に応じた使い分けが重要。

結論：用途別の推奨

用途推奨MCP
ログイン済みサイトの操作Chrome DevTools
パフォーマンス分析・デバッグChrome DevTools
UIテスト・自動化スクリプトPlaywright
クロスブラウザテストPlaywright
スクレイピングどちらでも可

概要比較

項目Chrome DevTools MCPPlaywright MCP
提供元Google (Chrome DevToolsチーム)Microsoft
接続方式既存Chromeに接続新規ブラウザ起動
ログイン状態維持可能毎回クリーン
ブラウザChromeのみChrome/Firefox/Safari
ツール数26個 (18.0kトークン)21個 (13.7kトークン)
主な用途デバッグ・分析UI自動化・テスト

Chrome DevTools MCP

特徴

  • 既存ブラウザに接続: リモートデバッグポートを開いたChromeに接続
  • ログイン状態を維持: 認証済みセッションをそのまま使える
  • デバッグ機能が充実: ネットワーク監視、コンソールログ、パフォーマンストレース
  • 追加ダウンロード不要: 普段使っているChromeをそのまま使用

得意な場面

  • マネーフォワードなど、ログインが必要なサイトの操作
  • Core Web Vitals の測定・分析
  • ネットワークリクエストのデバッグ
  • コンソールエラーの監視
  • 開発中のサイトの動作確認

主なツール

mcp__chrome-devtools__new_page         # 新しいページを開く
mcp__chrome-devtools__navigate_page    # URLに移動
mcp__chrome-devtools__click            # 要素をクリック
mcp__chrome-devtools__fill             # フォーム入力
mcp__chrome-devtools__take_screenshot  # スクリーンショット
mcp__chrome-devtools__list_network_requests  # ネットワーク監視
mcp__chrome-devtools__performance_start_trace  # パフォーマンス計測

セットアップ

# Windows環境での設定
claude mcp add chrome-devtools -- cmd /c npx -y chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9223

# Chromeをデバッグモードで起動
start "" "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9223

詳細は Windows環境でのChrome DevTools MCP設定ガイド を参照。

Playwright MCP

特徴

  • 新規ブラウザインスタンス: 毎回クリーンな状態から開始
  • アクセシビリティツリー使用: スクリーンショット不要でLLMに優しい
  • クロスブラウザ対応: Chrome, Firefox, Safari (WebKit) をサポート
  • 堅牢な待機処理: 要素の出現を自動で待機

得意な場面

  • E2Eテストの自動化
  • クロスブラウザでの動作検証
  • 決定論的なUI操作
  • CI/CDパイプラインでのテスト
  • ヘッドレスでのバッチ処理

主なツール

browser_navigate     # URLに移動
browser_click        # 要素をクリック
browser_type         # テキスト入力
browser_screenshot   # スクリーンショット
browser_snapshot     # アクセシビリティスナップショット
browser_wait         # 要素待機

セットアップ

# Claude Codeでの設定
claude mcp add playwright -- npx @playwright/mcp@latest

技術的な違い

ブラウザ接続方式

Chrome DevTools MCP:

[Claude Code] → [MCP Server] → [Chrome DevTools Protocol] → [既存Chrome]
  • 既にログインしているChromeセッションを操作
  • Cookie、LocalStorage、セッションがそのまま使える

Playwright MCP:

[Claude Code] → [MCP Server] → [Playwright] → [新規ブラウザインスタンス]
  • 毎回新しいブラウザを起動
  • クリーンな状態から開始（ログイン不要なサイト向け）

ページ認識方式

Chrome DevTools MCP:

  • DOMベース + スクリーンショット
  • 要素のセレクタ指定が必要な場合あり

Playwright MCP:

  • アクセシビリティツリーベース
  • LLMが構造化データとして直接処理
  • ビジョンモデル不要

ユースケース別の選択

マネーフォワードにログインして操作したい

→ Chrome DevTools MCP

理由：

  • 既にログイン済みのChromeセッションを使える
  • 2段階認証済みの状態を維持できる
  • Cookie/セッションがそのまま使える
# 操作例
1. Chromeでマネーフォワードにログイン済みの状態を維持
2. Chrome DevTools MCPで接続
3. Claude Codeから「マネーフォワードの今月の支出を確認して」

自社サイトのUIテストを自動化したい

→ Playwright MCP

理由：

  • 毎回クリーンな状態でテスト可能
  • クロスブラウザでの検証
  • CI/CDとの統合が容易

開発中のサイトのパフォーマンスを計測したい

→ Chrome DevTools MCP

理由：

  • パフォーマンストレース機能
  • Core Web Vitals の測定
  • ネットワークウォーターフォール分析

両方を使う場合

QA・開発チームでは両方を併用するのが効果的だ。

  • Chrome DevTools MCP: デバッグ、パフォーマンス分析、ログイン済みサイト操作
  • Playwright MCP: 自動テスト、クロスブラウザ検証、CI/CD統合
# 両方セットアップ
claude mcp add chrome-devtools -- cmd /c npx -y chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9223
claude mcp add playwright -- npx @playwright/mcp@latest

まとめ

  • ログイン済みサイトを操作したい → Chrome DevTools MCP
  • UIテスト・自動化を回したい → Playwright MCP
  • デバッグ・パフォーマンス分析 → Chrome DevTools MCP
  • クロスブラウザ対応 → Playwright MCP

用途に応じて使い分け、必要なら両方導入するのがベスト。

参考