はじめに
Claude Code には MCP（Model Context Protocol）でブラウザを操作・分析するサーバーを接続できる。今回は Chrome DevTools MCP と Playwright MCP の2つを 同時に 使って、フロントエンドの品質チェックを一発で終わらせるワークフローを試した。
📌 この記事で扱うこと:
- Chrome DevTools MCP と Playwright MCP の役割分担
- 2つの MCP を並列で叩く実践例
- 実際に取得できたパフォーマンスデータと Lighthouse スコア
環境
| 項目 | バージョン |
|---|---|
| Claude Code | claude-opus-4-6 |
| Chrome DevTools MCP | 0.21.0 |
| Playwright MCP | latest |
| 対象サイト | Kotlin Compose for Web + Rust GraphQL |
実装
2つの MCP の役割
| 役割 | MCP | 担当 |
|---|---|---|
| 🏎️ Driving | Playwright MCP | ナビゲーション、クリック、スクリーンショット |
| 🔍 Debugging | Chrome DevTools MCP | Performance Trace、Lighthouse、ネットワーク監視 |
Step 1: 両方のブラウザでサイトを開く
# Playwright — ユーザー操作用
Playwright → browser_navigate("https://nba-iso-flow.com")
# Chrome DevTools — 分析用
Chrome DevTools → navigate_page(url: "https://nba-iso-flow.com")
Step 2: パフォーマンストレースとスナップショットを同時実行
Claude Code はツールの並列呼び出しをサポートしている。以下の2つが 1ターンで同時に 実行される：
Chrome DevTools → performance_start_trace(reload: true, autoStop: true)
Playwright → browser_snapshot()
Chrome DevTools からは Core Web Vitals が返ってくる：
LCP: 339ms
TTFB: 61ms (17.9%)
Render Delay: 279ms (82.1%)
CLS: 0.09
Playwright からはページの DOM 構造が取れる：
- button "すべて" [ref=e9]
- button "Trade" [ref=e10]
- button "Signing" [ref=e11]
- button "Other" [ref=e12]
- article [ref=e20] # ニュースカード x N
Step 3: ユーザー操作 + ネットワーク監視
Playwright でカテゴリフィルターをクリックした後、Chrome DevTools でネットワークリクエストを確認する：
# Playwright でフィルタークリック
Playwright → browser_click(ref=e10) // "Trade" ボタン
# Chrome DevTools でネットワーク確認
Chrome DevTools → list_network_requests(resourceTypes: ["fetch", "xhr"])
結果：
GET /health → 200 ✅
POST /graphql → 200 ✅（カテゴリ別 GraphQL クエリ）
コンソールエラーもゼロ：
Chrome DevTools → list_console_messages(types: ["error", "warn"])
→ <no console messages found>
Step 4: Lighthouse 監査 + スクリーンショット同時撮影
最後の仕上げ。Lighthouse 監査とスクリーンショットを同時に叩く：
Chrome DevTools → lighthouse_audit(device: "mobile", mode: "navigation")
Playwright → browser_take_screenshot()
Lighthouse 結果：
| カテゴリ | スコア |
|---|---|
| Best Practices | 100 |
| Accessibility | 83 |
| SEO | 82 |
ハマったポイント
Chrome DevTools MCP のブラウザプロファイル競合
Chrome DevTools MCP は --user-data-dir でブラウザプロファイルを管理している。別のセッションで既にブラウザが起動していると、以下のエラーが出る：
The browser is already running for /Users/.../.cache/chrome-devtools-mcp/chrome-profile.
Use --isolated to run multiple browser instances.
解決策: 既存の Chrome プロセスを ps aux | grep chrome-devtools-mcp で特定して kill する。または list_pages で既存ページを再利用する。重複プロセスが立っている場合は新しい方を kill すると MCP サーバーとの接続が維持される。
Playwright と Chrome DevTools は別ブラウザインスタンス
2つの MCP はそれぞれ 独立したブラウザ を起動する。同じブラウザを共有するわけではない。したがって：
- Playwright でクリックした結果は Chrome DevTools 側には反映されない
- それぞれのブラウザで同じ URL を開いて、独立して操作・分析する
- 「Playwright でクリック → Chrome DevTools でネットワーク確認」は、Chrome DevTools 側でもリロードして同じ操作を再現する必要がある
これを理解していないと「Playwright でクリックしたのに Chrome DevTools のネットワークに出てこない」と混乱する。操作と分析は並行するが、ブラウザは独立 というのがポイントだ。
スナップショットのサイズ制限
Playwright の browser_snapshot() は DOM 全体のアクセシビリティツリーを返す。ニュース記事が 100 件近く表示されているページでは 69,687 文字 になり、Claude Code のツール結果サイズ上限を超えた。
解決策: browser_snapshot(depth: 3) で深さを制限する。ボタンの ref だけ取れれば操作には十分だ。
まとめ
Chrome DevTools MCP と Playwright MCP の二刀流で得られたもの：
- パフォーマンス: LCP 339ms、CLS 0.09、TTFB 61ms — 全て Good 基準
- 品質: Best Practices 100、コンソールエラーゼロ
- 改善点: A11y と SEO に5件の指摘（コントラスト比、meta description 等）
ユニットテストや mutation testing では見つからない「ブラウザでしかわからない問題」を、Claude Code の会話の中で自然に検出できるのが強みだ。MCP を複数組み合わせることで、1つでは届かない領域までカバーできる。
🏀 NBA Trade Tracker: https://www.nba-iso-flow.com/