はじめに

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/