Chrome DevTools MCP vs Playwright MCP 徹底比較

注意事項：自分用に調べた資料でAIが95%ほど生成した記事です。

Chrome DevTools MCPとPlaywright MCPは、どちらもブラウザ自動化をAIエージェントに提供するMCP（Model Context Protocol）サーバーですが、根本的に異なるアプローチと目的を持つツールです。

Chrome DevTools MCPは「AIが実際のブラウザ実行結果を見ることができる」デバッグ特化ツールとして設計され、Playwright MCPは「スクリーンショット不要のブラウザ自動化」を実現するテスト・自動化プラットフォームとして開発されています。

主な目的と機能の根本的違い

Chrome DevTools MCP：「見えないコーディング」問題の解決

Chrome DevTools MCPは、GoogleのChrome DevToolsチームが2025年9月にパブリックプレビューとしてリリースしたデバッグ特化ツールです。これまでAIコーディングアシスタントは「目隠しをしてコーディングしている」状態で、生成したコードが実際にブラウザでどう動作するかを確認できませんでした。このツールはその問題を解決し、AIがリアルタイムでブラウザの実行結果を検証できるようにします。

核心的な機能： - パフォーマンス分析：Core Web Vitals（LCP、FID、CLS）の測定と分析 - ネットワークデバッグ：CORS問題、API呼び出し失敗の詳細分析 - リアルタイム検証：生成されたコードの動作確認 - コンソール監視：JavaScript エラーとログの取得

Playwright MCP：アクセシビリティツリーベースの自動化

Playwright MCPはMicrosoftが開発したブラウザ自動化プラットフォームで、従来のスクリーンショットベースのアプローチを根本的に変革します。ブラウザのアクセシビリティツリーを構造化データとして使用することで、ビジョンモデル不要の確定的な自動化を実現しています。

核心的な機能： - テスト自動生成：自然言語からのテストコード生成 - クロスブラウザ対応：Chromium、Firefox、WebKitでの統一操作 - データ抽出：構造化されたウェブスクレイピング - ワークフロー自動化：複雑な業務プロセスの自動実行

対象ユースケースの明確な違い

Chrome DevTools MCP の最適用途

1. パフォーマンス最適化ワークフロー

開発者：「localhost:8080の読み込みが遅い。高速化してください」
AI：LCPが3.2秒検出、主な問題は非圧縮画像、WebP形式への変更を推奨...

2. ネットワーク問題の診断 - CORS エラーの詳細分析 - API呼び出し失敗の原因特定 - レンダリングブロッキングリソースの特定

3. リアルタイム検証ループ - AI がコード生成 → 自動的にブラウザで検証 → 機能確認

Playwright MCP の最適用途

1. 自動テスト生成・実行 - 自然言語からのテストケース作成 - 複雑なユーザーフローの自動探索 - CI/CDパイプラインでの継続テスト

2. インテリジェントなデータ抽出 - アンチボット回避を含むウェブスクレイピング - 動的コンテンツの構造化抽出 - 大規模データ収集の自動化

3. 業務プロセス自動化 - 複雑なフォーム入力の自動化 - 管理業務の一括処理 - 認証フローを含む多段階プロセスの実行

アーキテクチャと動作原理の根本的違い

Chrome DevTools MCP アーキテクチャ

AI Agent → MCP Client → Chrome DevTools MCP Server → Puppeteer → CDP → Chrome Browser
                                                      ↓
                                               Chrome DevTools

技術的特徴： - Puppeteer統合：高レベルブラウザ自動化API - Chrome DevTools Protocol（CDP）：直接的なChrome制御 - 遅延ブラウザ初期化：必要時のみブラウザ起動 - セッション永続化：実行間でのユーザーデータ保持

動作原理： - Chrome のデバッグインフラストラクチャを直接活用 - 既存のChromeインスタンスへのリモート接続可能 - DevToolsプロトコルによる低レベルブラウザ制御

Playwright MCP アーキテクチャ

AI Agent → MCP Client → Playwright MCP Server → Playwright Engine → Browser
                                               ↓
                                    アクセシビリティツリー処理

技術的特徴： - アクセシビリティツリー処理：DOM を構造化 YAML に変換 - マルチトランスポート対応：STDIO、HTTP+SSE、Streamable HTTP - ブラウザプロファイル管理：永続/分離モードの選択可能 - クロスブラウザエンジン：統一APIでの複数ブラウザ制御

革新的アプローチ： - 構造化表現：ピクセルベースではなくセマンティック要素での操作 - 要素参照システム：信頼性の高い要素特定 - 階層構造維持：親子関係を含むコンテキスト情報

長所と短所の詳細分析

Chrome DevTools MCP

長所： - リアルブラウザデータ：推測ではなく実際のパフォーマンス測定値 - デバッグ専門性：Chrome の全デバッグ機能へのアクセス - 軽量接続：既存 Chrome インスタンスへの効率的接続 - Google公式サポート：Chrome DevToolsチームによる開発

短所： - Chrome限定：FirefoxやSafariでのデバッグ不可 - プレビュー段階：機能制限と安定性の課題 - 設定複雑性：環境によって異なる設定要件 - 自動化機能限定：包括的なブラウザ自動化には不適

Playwright MCP

長所： - クロスブラウザ対応：Chrome、Firefox、WebKit での統一操作 - 確定的実行：アクセシビリティツリーによる信頼性の高い自動化 - ビジョン不要：スクリーンショット分析が不要 - 包括的な機能：テスト生成から実行まで一貫したソリューション

短所： - ツール過多問題：26以上のツールがAIエージェントを混乱させる（開発者報告） - メモリリーク：MCP 2.0でのプロダクション環境での深刻な問題 - 学習コスト：アクセシビリティツリー概念の理解が必要 - 結果の一貫性：LLMモデルやバージョンによる成功率のばらつき

実践的な使い分け指針

Chrome DevTools MCP を選ぶべき場面

1. パフォーマンス重視の開発 - Core Web Vitals の最適化が必要 - リアルタイムでのページ読み込み分析 - ネットワークボトルネックの特定

2. デバッグ中心のワークフロー - JavaScript エラーの詳細分析 - API呼び出し失敗の診断 - CSS レイアウト問題の調査

3. Chrome ベースの開発環境 - Chrome 拡張機能開発 - PWA（Progressive Web App）開発 - Chrome 特有の機能テスト

Playwright MCP を選ぶべき場面

1. テスト自動化プロジェクト - E2Eテストスイートの構築 - CI/CDパイプラインでの自動テスト - リグレッションテストの実施

2. クロスブラウザ検証 - 複数ブラウザでの互換性確認 - ブラウザ間の動作差異テスト - アクセシビリティ検証

3. 大規模自動化システム - ウェブスクレイピングプロジェクト - 業務プロセスの自動化 - データ収集・分析ワークフロー

ハイブリッド戦略

開発フェーズ別の使い分け： 1. 開発・デバッグ段階：Chrome DevTools MCP でリアルタイム問題解決 2. テスト段階：Playwright MCP で包括的なテストスイート実行 3. 本番監視：Chrome DevTools MCP でパフォーマンス監視

チーム規模による選択： - 小規模チーム：Chrome DevTools MCP（学習コスト低、即座の価値提供） - 大規模チーム：Playwright MCP（長期的なテスト基盤構築）

技術的考慮事項と実装推奨事項

Chrome DevTools MCP 実装時の注意点

設定例：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

推奨プラクティス： - 分離モード使用：テスト間での状態混在を防ぐ - ヘッドレスモード：CI/CD環境での安定実行 - タイムアウト設定：長時間実行の防止

Playwright MCP 実装時の注意点

ツール制限戦略：

{
  "capabilities": ["tabs", "install"], // 必要最小限に制限
  "browser": {
    "isolated": true,
    "headless": true
  }
}

パフォーマンス最適化： - コンカレント接続制限：サーバー過負荷防止 - ブラウザリサイクル：メモリリーク軽減 - CPU・メモリ監視：実行時リソース管理

将来展望と選択指針

Chrome DevTools MCP はデバッグワークフローの革新を目指し、Playwright MCP はテスト自動化の完全自動化を追求しています。両ツールとも活発に開発が続いており、それぞれの専門領域でのさらなる進化が期待されます。

選択の決定要因： 1. 主要な目的：デバッグ vs テスト自動化 2. ブラウザ要件：Chrome特化 vs クロスブラウザ 3. チーム規模：個人・小規模 vs 大規模組織 4. 技術的制約：学習コスト vs 包括性 5. プロジェクト段階：開発 vs テスト vs 運用

最終的には、多くのプロジェクトで両ツールの併用が最も効果的なアプローチとなるでしょう。開発段階での問題特定にChrome DevTools MCPを使用し、包括的なテスト実行にPlaywright MCPを活用する統合戦略が、現代のウェブ開発における最適解となります。

観点	Chrome DevTools MCP	Playwright MCP
目的/フォーカス	DevToolsの力をそのままAIエージェントに解放。パフォーマンス計測（LCPなど）、ネットワーク/コンソール/スナップショットのデバッグ寄り	Playwrightでの堅牢な自動操作とテスト生成。スクショ不要でアクセシビリティスナップショット（構造化データ）を使う“LLMフレンドリー”設計
ページの見え方	Chrome DevTools Protocol (CDP) 経由でDOM/ネットワーク/トレース等に直接アクセス	Playwrightのアクセシビリティツリーに基づく構造化スナップショットで要素同定（視覚モデル不要）
オートメーション基盤	Puppeteer を内部で利用（安定待機などを用意） (GitHub)	Playwright を利用。決定的に要素を特定できるツール設計（クリック/タイプ/ドラッグ等） (GitHub)
ブラウザー対応	基本はChrome系（チャンネル指定・既存Chromeへ接続も可） (GitHub)	Chromium/Firefox/WebKit などを選択可能（--browser オプション、Edge/Chromeへ拡張機能ブリッジで接続も可） (GitHub)
代表的ツール	入力（click/fill等）、ナビゲーション、エミュレーション（CPU/ネットワーク/リサイズ）、パフォーマンス（開始/停止/洞察）、ネットワーク取得、コンソール/スクショ/スナップショット (GitHub)	クリック/タイプ/ドラッグ/セレクト/ホバー/ナビゲーション/ファイルアップロード、検証/トレーシング（オプトイン）、PDF保存 等（--caps で機能拡張） (GitHub)
セキュリティ/サンドボックス周り	クライアント側のOSサンドボックス下ではChrome起動に制約があり、外部起動Chromeへの接続を推奨する場合あり（--browserUrl等） (GitHub)	許可ホスト/オリジン指定、サービスワーカー遮断、HTTPS無視、プロファイルの揮発化 など多彩な起動スイッチを提供 (GitHub)
導入	npx chrome-devtools-mcp@latest をMCPクライアントに登録（Node 22+、Chrome要） (GitHub)	npx @playwright/mcp@latest を登録（Node 18+、各クライアントにボタン/CLI手順） (GitHub)
公式解説のニュアンス	“エージェントにパフォーマンス監査を自動化させる”などDevToolsならではのワークフローを強調 (Chrome for Developers)	“スクショ不要・決定的な自動化・軽量”を強調。VS Code/Copilot等との統合も案内 (GitHub)

使い分けの目安

• パフォーマンス/ネットワークの深掘りデバッグが主目的 → Chrome DevTools MCP。DevToolsのトレース開始/停止と“洞察抽出”ツールが用意されていて、LCPなどの診断が得意です。 (Chrome for Developers)

• E2Eテスト自動化や、ブラウザー横断の堅牢な操作をLLMに任せたい → Playwright MCP。アクセシビリティスナップショットにより“視覚なしで要素特定”でき、--browser=chrome/firefox/webkit で切替可能。検証/トレーシング/PDF等もオプトインで追加できます。 (GitHub)

• 既存の実機Chrome/Edgeに接続したい → どちらも可能ですが、Playwright MCPは拡張ブリッジやCDP接続フラグを公式に用意しています。 (GitHub)

Chrome DevTools MCP ツール詳細（26ツール）

📱 入力自動化ツール（7種）

1. click - 要素クリック

// 使用例
await click({
  selector: '#submit-button',
  clickCount: 2,  // ダブルクリック
  button: 'left', // 'left' | 'right' | 'middle'
  modifiers: ['Ctrl', 'Shift']
});

特徴： - CSS/XPathセレクタサポート - 修飾キー同時押下対応 - クリック位置の自動計算

2. drag - ドラッグ&ドロップ

await drag({
  fromSelector: '.draggable-item',
  toSelector: '.drop-zone',
  steps: 10  // スムーズなドラッグアニメーション
});

特徴： - HTML5ドラッグAPIの完全サポート - カスタムドラッグステップ数 - タッチイベントシミュレーション

3. fill - テキスト入力

await fill({
  selector: 'input[name="email"]',
  value: 'user@example.com',
  clear: true  // 既存テキストをクリア
});

特徴： - 自動フォーカス管理 - input/change イベントトリガー - パスワードフィールド対応

4. fill_form - フォーム一括入力

await fill_form({
  formData: {
    username: 'testuser',
    password: 'secure123',
    remember: true,  // チェックボックス
    country: 'Japan' // セレクトボックス
  }
});

特徴： - 複数フィールド同時入力 - 各種フォーム要素対応 - バリデーションエラー検出

5. handle_dialog - ダイアログ制御

await handle_dialog({
  action: 'accept',  // 'accept' | 'dismiss'
  promptText: 'Custom input'  // prompt用
});

対応ダイアログ： - alert() - 確認のみ - confirm() - OK/キャンセル - prompt() - テキスト入力 - beforeunload - ページ離脱確認

6. hover - ホバー操作

await hover({
  selector: '.dropdown-trigger',
  duration: 500  // ホバー維持時間（ミリ秒）
});

用途： - ドロップダウンメニュー展開 - ツールチップ表示 - CSS :hover 状態のテスト

7. upload_file - ファイルアップロード

await upload_file({
  selector: 'input[type="file"]',
  filePaths: ['/path/to/file1.pdf', '/path/to/file2.jpg'],
  multiple: true
});

特徴： - 複数ファイル同時アップロード - ドラッグ&ドロップアップロード対応 - ファイルサイズ制限チェック

🧭 ナビゲーションツール（7種）

1. navigate_page - ページ遷移

await navigate_page({
  url: 'https://example.com',
  waitUntil: 'networkidle2',  // 'load' | 'domcontentloaded' | 'networkidle0' | 'networkidle2'
  timeout: 30000
});

待機オプション詳細： - load: ページ完全読み込み - domcontentloaded: DOM構築完了 - networkidle0: ネットワーク完全停止 - networkidle2: 接続数2以下で500ms経過

2. new_page - 新規ページ作成

const page = await new_page({
  viewport: { width: 1920, height: 1080 },
  userAgent: 'Custom User Agent',
  locale: 'ja-JP'
});

カスタマイズ可能項目： - ビューポートサイズ - ユーザーエージェント - 言語設定 - タイムゾーン

3. close_page - ページクローズ

await close_page({
  pageId: 'page-123',
  runBeforeUnload: false  // beforeunloadイベントスキップ
});

4. list_pages - アクティブページ一覧

const pages = await list_pages();
// 返却値例：
[
  { id: 'page-1', url: 'https://example.com', title: 'Example' },
  { id: 'page-2', url: 'https://test.com', title: 'Test' }
]

5. select_page - ページ切り替え

await select_page({
  pageId: 'page-2'  // またはインデックス指定
});

6. navigate_page_history - 履歴操作

await navigate_page_history({
  action: 'back',  // 'back' | 'forward' | 'reload'
  cacheOption: 'no-cache'  // リロード時のキャッシュ制御
});

7. wait_for - 条件待機

await wait_for({
  selector: '.dynamic-content',
  state: 'visible',  // 'visible' | 'hidden' | 'attached' | 'detached'
  timeout: 10000
});

🎭 エミュレーションツール（3種）

1. emulate_cpu - CPU速度調整

await emulate_cpu({
  throttling: 4  // 4倍スローダウン（低スペック端末シミュレーション）
});

用途： - 低速デバイスでのパフォーマンステスト - アニメーション最適化確認 - JavaScript実行速度検証

2. emulate_network - ネットワーク条件

await emulate_network({
  profile: 'Slow 3G',  // プリセット
  // カスタム設定も可能：
  downloadSpeed: 50 * 1024,  // 50KB/s
  uploadSpeed: 20 * 1024,     // 20KB/s
  latency: 400                // 400ms遅延
});

プリセット一覧： - Fast 3G: 1.6Mbps/750kbps, 150ms - Slow 3G: 400kbps/400kbps, 400ms - Offline: 完全オフライン

3. resize_page - ビューポート変更

await resize_page({
  width: 375,
  height: 812,
  deviceScaleFactor: 3,  // Retina対応
  isMobile: true,
  hasTouch: true
});

📊 パフォーマンスツール（3種）

1. performance_start_trace - トレース開始

await performance_start_trace({
  categories: ['devtools.timeline', 'blink.user_timing'],
  screenshots: true,
  samplingFrequency: 10000  // 10kHz
});

2. performance_stop_trace - トレース停止

const trace = await performance_stop_trace();
// 返却値：Chrome Trace Format JSON

3. performance_analyze_insight - 分析結果取得

const insights = await performance_analyze_insight();
// 返却値例：
{
  metrics: {
    LCP: 2.5,      // Largest Contentful Paint
    FID: 100,      // First Input Delay
    CLS: 0.1,      // Cumulative Layout Shift
    TTFB: 800,     // Time to First Byte
    FCP: 1.8       // First Contentful Paint
  },
  recommendations: [
    "画像を次世代フォーマットで配信",
    "レンダリングブロックリソースを削除"
  ]
}

🌐 ネットワークツール（2種）

1. list_network_requests - リクエスト一覧

const requests = await list_network_requests({
  filter: {
    resourceType: 'XHR',  // 'Document' | 'Stylesheet' | 'Script' | 'Image' | 'XHR' | 'Fetch'
    status: [200, 201],
    method: 'POST'
  }
});

2. get_network_request - リクエスト詳細

const details = await get_network_request({
  requestId: 'req-123'
});
// 返却値：
{
  url: 'https://api.example.com/data',
  method: 'GET',
  headers: { /* ... */ },
  response: {
    status: 200,
    headers: { /* ... */ },
    body: '{"result": "success"}',
    timing: {
      dns: 50,
      connect: 100,
      ssl: 50,
      ttfb: 200,
      download: 100
    }
  }
}

🐛 デバッグツール（4種）

1. evaluate_script - JavaScript実行

const result = await evaluate_script({
  script: `
    document.querySelectorAll('.item').length
  `,
  awaitPromise: true
});

2. list_console_messages - コンソールログ取得

const messages = await list_console_messages({
  level: 'error'  // 'log' | 'info' | 'warning' | 'error'
});

3. take_screenshot - スクリーンショット

const screenshot = await take_screenshot({
  fullPage: true,
  clip: { x: 0, y: 0, width: 800, height: 600 },
  format: 'png',  // 'png' | 'jpeg' | 'webp'
  quality: 90     // JPEG/WebP用
});

Playwright MCP ツール詳細

🎯 コア機能

browser_snapshot - アクセシビリティツリー取得（革新的機能）

const snapshot = await browser_snapshot();
// 返却値（構造化YAML形式）：

page:
  title: "Example Page"
  url: "https://example.com"
  elements:
    - type: heading
      level: 1
      text: "Welcome"
      id: "header-1"
    - type: button
      text: "Submit"
      id: "submit-btn"
      clickable: true
      bounds: {x: 100, y: 200, width: 80, height: 40}

特徴： - スクリーンショット不要の要素認識 - セマンティック構造の完全把握 - AIによる自然な要素参照

🖱️ インタラクション機能

browser_click - 高度なクリック操作

await browser_click({
  target: "Submit button",  // 自然言語での指定も可能
  // または構造化指定：
  selector: {
    role: 'button',
    name: /submit/i
  },
  modifiers: ['Meta'],  // Mac: Cmd, Windows: Ctrl
  position: 'center',   // 'center' | 'topLeft' | {x: 10, y: 20}
  force: true          // 可視性チェックをスキップ
});

browser_type - インテリジェント入力

await browser_type({
  text: "user@example.com",
  target: "Email field",  // AIが文脈から判断
  delay: 50,             // キーストローク間の遅延（ms）
  clear: true,           // 既存テキストクリア
  selectAll: true        // Ctrl+A してから入力
});

browser_drag - 高度なドラッグ操作

await browser_drag({
  source: "Draggable item #3",
  target: "Drop zone area",
  // 中間点を指定した複雑なドラッグ：
  steps: [
    {x: 100, y: 100},
    {x: 200, y: 150},
    {x: 300, y: 100}
  ]
});

📸 データ収集機能

browser_take_screenshot - マルチモードキャプチャ

const screenshot = await browser_take_screenshot({
  mode: 'fullPage',      // 'viewport' | 'fullPage' | 'element'
  element: '.chart',     // element モード時
  animations: 'disabled', // アニメーション無効化
  mask: ['.sensitive'],  // 要素をマスク
  highlight: ['.important'], // 要素をハイライト
  format: 'png',
  omitBackground: true   // 透過背景
});

browser_network_requests - 詳細なネットワーク分析

const requests = await browser_network_requests({
  urlPattern: '**/api/*',
  resourceType: ['xhr', 'fetch'],
  // レスポンス本文も含める：
  includeResponseBodies: true,
  // HAR形式で出力：
  format: 'har'
});

🚀 高度な機能

browser_evaluate - コンテキスト実行

const result = await browser_evaluate({
  expression: `
    // ページコンテキストで実行
    const data = await fetch('/api/data').then(r => r.json());
    return data.items.map(item => ({
      id: item.id,
      title: item.title
    }));
  `,
  // 引数を渡す：
  args: [userId],
  // 非同期実行：
  awaitPromise: true
});

browser_handle_dialog - 複雑なダイアログ制御

// ダイアログ出現前に設定
await browser_handle_dialog({
  handler: async (dialog) => {
    if (dialog.type() === 'confirm') {
      return dialog.message().includes('delete') ? 
        dialog.dismiss() : dialog.accept();
    }
  }
});

タブ管理機能（capabilities: ['tabs']時のみ）

// 新規タブ作成
const tab = await browser_new_tab({
  url: 'https://example.com',
  background: true  // バックグラウンドで開く
});

// タブ切り替え
await browser_switch_tab({
  tabId: tab.id
});

// タブ一覧取得
const tabs = await browser_list_tabs();

🔧 ユーティリティ機能

PDF生成

const pdf = await browser_generate_pdf({
  format: 'A4',
  landscape: false,
  margin: {
    top: '1cm',
    bottom: '1cm',
    left: '1cm', 
    right: '1cm'
  },
  printBackground: true,
  headerTemplate: '<div>Page <span class="pageNumber"></span></div>'
});

Cookie管理

// Cookie設定
await browser_set_cookies([
  {
    name: 'session',
    value: 'abc123',
    domain: '.example.com',
    httpOnly: true,
    secure: true
  }
]);

// Cookie取得
const cookies = await browser_get_cookies({
  domain: '.example.com'
});

機能比較マトリックス

機能カテゴリ	Chrome DevTools MCP	Playwright MCP
基本操作
要素クリック	✅ CSS/XPath	✅ AI自然言語+セレクタ
テキスト入力	✅ 基本入力	✅ スマート入力
ドラッグ&ドロップ	✅ シンプル	✅ 複雑パス対応
デバッグ
コンソールログ	✅ 完全取得	✅ 基本取得
ネットワーク監視	✅ 詳細分析	✅ HAR形式対応
パフォーマンス測定	✅ Chrome専用詳細	❌ 非対応
ブラウザ制御
マルチブラウザ	❌ Chrome のみ	✅ Chrome/Firefox/Safari
タブ管理	✅ 基本機能	✅ 高度な制御
Cookie操作	✅ CDP経由	✅ 高レベルAPI
特殊機能
アクセシビリティツリー	❌	✅ 核心機能
PDF生成	❌	✅
ビジョンモード	❌	✅ 座標ベース操作
エミュレーション	✅ CPU/Network	✅ デバイス

実装の具体例比較

ユースケース：フォーム送信の自動化

Chrome DevTools MCP：

// 明示的なセレクタ指定が必要
await fill({ selector: '#email', value: 'test@example.com' });
await fill({ selector: '#password', value: 'secure123' });
await click({ selector: '#submit-btn' });
await wait_for({ selector: '.success-message', state: 'visible' });

Playwright MCP：

// AI が文脈を理解して操作
await browser_type({ 
  text: 'test@example.com',
  target: 'Email input field'  // 自然言語
});
await browser_type({ 
  text: 'secure123',
  target: 'Password field'
});
await browser_click({ target: 'Submit button' });
// アクセシビリティツリーで結果確認
const snapshot = await browser_snapshot();

ユースケース：パフォーマンス分析

Chrome DevTools MCP（得意分野）：

await performance_start_trace({ screenshots: true });
await navigate_page({ url: 'https://example.com' });
await performance_stop_trace();
const insights = await performance_analyze_insight();
// 詳細なCore Web Vitalsメトリクス取得

Playwright MCP（この用途には不適）：

// パフォーマンス専用ツールなし
// 基本的なタイミング情報のみ
const timing = await browser_evaluate({
  expression: 'window.performance.timing'
});

参考（一次情報）

• Chrome DevTools MCP 公式リポジトリのツール一覧/設定（Tool Referenceに相当） (GitHub)
• Chrome公式ブログの導入記事（パフォーマンス監査の例） (Chrome for Developers)
• Playwright MCP 公式README（特徴/ツール/起動オプション） (GitHub)