Chrome DevTools MCPとPlaywright MCPを使用したウェブアプリケーションデバッグ

概要

このスキルは、Chrome DevTools MCPとPlaywright MCPを使用した体系的で効率的なウェブデバッグガイドです。実行前の検証によって低速な操作を最小化し、プロジェクトドキュメントからの自動コンテキスト検出を強調しています。

デシジョンツリー

「どのMCPを使うべき？」

ブラウザデバッグが必要?
│
├─▶ Chromeが既に開いており、ターゲットページが表示されている?
│   └─▶ Chrome DevTools MCPを使用
│       ├─▶ 必須: --remote-debugging-port=9222 フラグ
│       └─▶ 確認: curl http://localhost:9222/json/version
│
├─▶ 新しいブラウザインスタンスを起動する必要がある?
│   └─▶ Playwright MCPを使用
│       ├─▶ ヘッドレスまたはヘッド付きブラウザを作成
│       └─▶ クリーンな状態、拡張機能の干渉なし
│
├─▶ 複数のブラウザ(Brave、Firefox、Safari)をテストする必要がある?
│   └─▶ Pla

...