💊

【MCP】Playwright vs Chrome DevTools どっちを使う？実務経験から解説する使い分けガイド

2025/11/27に公開

Playwright

Model Context Protocol

こんにちは、とまだです。
フロントエンド開発でブラウザの動作確認、正直めんどくさいですよね。
コンソールエラーをコピーしたり、スクリーンショットを撮ってAIに渡したり。せっかくAIがコードを書いてくれても、最後の確認作業は相変わらず手動...という方も多いのではないでしょうか。
そんな悩みを解決してくれるのが、ブラウザを自動操作できる「MCP」です。
ただ、調べてみると Playwright MCP と Chrome DevTools MCP の2つがあって、「どっちを使えばいいの...？」と迷っている方もいるかもしれません。
この記事では、両方を実務で使ってきた経験から、それぞれの特徴と使い分けの基準を詳しく解説します！
実際の使い方については以下の動画で解説していますので、ぜひご覧ください！

 忙しい人のために要約この記事のポイントを4つにまとめました。

Playwright MCPは Chrome、Firefox、Safariに対応したクロスブラウザ対応が強み

Chrome DevTools MCPは Web Vitals分析などパフォーマンス分析も可能
通常の開発はChrome DevTools MCPで十分
他ブラウザ対応が必要な場合のみPlaywright MCPを使う

 MCPの基本（初めての方向け）MCP（Model Context Protocol） は、AIと外部ツールをつなぐための共通ルールです。
イメージとしては 通訳 に近いかもしれません。AIは賢いのですが、そのままではブラウザを操作したり、ファイルを読み書きしたりできません。MCPは「AIの言葉」を「ツールが理解できる命令」に変換してくれる存在です。
つまり、MCPを導入すると、AIに「このページを開いて」と言うだけで、実際にブラウザが動くようになるわけです。
導入も簡単で、Claude Codeならコマンド1つで使えるようになります。
# Chrome DevTools MCPの場合
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

# Playwright MCPの場合
claude mcp add playwright npx @playwright/mcp@latest

 2つのMCPを簡単に紹介それぞれのMCPの特徴も押さえておきましょう。

 Playwright MCP（Microsoft公式）Playwright MCPは、Microsoftが公式提供するブラウザ自動化ツールです。
もともとPlaywrightはE2Eテストで広く使われているライブラリで、そのMCP版という位置づけです。
最大の特徴は クロスブラウザ対応。Chrome、Firefox、Safari（WebKit）の3つのブラウザで動作確認ができます。
「Chromeで動いてたのに、Safariで崩れてる...」
こういった問題を、AIに指示するだけで検出できるわけです。

 Chrome DevTools MCP（Google公式）Chrome DevTools MCPは、Googleが公式提供するブラウザ自動化ツールです。
Chromeを作っているGoogle自身が提供しているため、DevToolsの全機能にアクセスできる深い統合が実現されています。
最大の特徴は パフォーマンス分析。Web Vitals（LCP、FID、CLS）の詳細な分析や、CPUやネットワークのエミュレーションなど、Playwright MCPにはない専用ツールが充実しています。

 機能比較 - どこが違う？では、両者の具体的な違いはどこにあるのでしょうか。基本機能はほぼ同じですが、「パフォーマンス分析」と「対応ブラウザ」の2点で大きく異なります。

 ツール数と対応カテゴリ現時点でのツール数は以下の通りです。


MCP
ツール数
特徴的な機能


Chrome DevTools MCP
26個
パフォーマンス分析系が充実

Playwright MCP
21個
クロスブラウザ対応

正直なところ、多くの基本機能は同じです。具体的には、ブラウザを開いたり、中で操作をしたり、エラーメッセージを確認したり、スクリーンショットを撮ったりする機能があります。つまり、このあたりは共通しています。
そのため、違いが出るのは「パフォーマンス分析」と「対応ブラウザ」の2点に絞られます。

 各カテゴリの詳細比較具体的なカテゴリごとの機能を比較すると、以下のようになります。


カテゴリ
Chrome DevTools MCP
Playwright MCP


基本的なブラウザ操作
✅ 7ツール（click、fill、drag等）
✅ 同等機能

ページ移動・管理
✅ 7ツール
✅ 5ツール

パフォーマンス分析
⭐ 3ツール（強み）

❌ 標準機能にはなし

ネットワーク監視
✅ 2ツール
✅ 1ツール

デバッグ機能
✅ 4ツール
✅ 同等機能

エミュレーション
⭐ 3ツール（強み）

✅ 1ツール（サイズ変更のみ）


 パフォーマンス分析の違いChrome DevTools MCPには、パフォーマンス分析に特化した専用ツールが3つ用意されています。

performance_start_trace：詳細なパフォーマンストレース

performance_stop_trace：トレースの停止と分析

performance_analyze_insight：インサイトの自動生成
これらを組み合わせることで、Lighthouseよりもさらに詳細なボトルネック分析が可能になります。言い換えると、Webサイトの「健康診断」をAIが自動でしてくれるようなイメージですね。
たとえば、こんな感じで指示できます。
このページのパフォーマンスを測定して、
遅い原因を教えてください
Web開発を経験してきた私としては、パフォーマンス分析が一番面倒なところでした。そのため、ここをAIに任せられるのは非常に助かります。
さらに、エミュレーション機能も充実しています。

emulate：CPU速度やネットワーク速度の制限

resize_page：ビューポートサイズ変更
「3G回線でアクセスしたときにどうなるか」といった確認も、簡単に自動化できます。

 クロスブラウザ対応一方、Playwright MCPの強みはクロスブラウザ対応です。対応しているブラウザは以下の通りです。
Chrome：フル対応
Firefox：フル対応
Safari：WebKit版で対応
Edge：フル対応
私も個人開発で経験しましたが、CSSのflexboxがSafariだけで崩れるなど、ブラウザごとの互換性の問題があります。

こういった問題は Chrome DevTools MCPでは検出できないんですよね。
また、クライアントワークでは動作するブラウザの指定がある場合もあります。こういった場合は Playwright MCP を使うことになります。

 トークン使用量の比較機能面での違いを見てきましたが、もう一つ気になるのが「トークン消費量」ではないでしょうか。MCPを使うと、どれくらいトークンを消費するのか。実際に同じ操作を両方のMCPで実行し、比較してみました。

 実験条件実務に近いシナリオとして、ページ遷移3回、コンソールエラーの確認、スクリーンショット撮影を行うプロンプトを用意しました。
"https://school.learning-next.app/coupons" というサイトで、
もっとも割引率が高い講座を探し、そのページへ遷移。
その後「/docs」パスへ移動し、ドキュメントを確認。
各ページでコンソールエラー、meta description、デザインをチェック。
このプロンプトを、両方のMCPで実行しました。

 結果結果は以下の通りです。


MCP
初期コンテキスト
実行後
増加分


Chrome DevTools MCP
54%
68%
+14%

Playwright MCP
52%
64%
+12%

Playwright MCPの方が若干少ないですが、ほぼ同等と考えて良いでしょう。
なお、MCP は使えるツールが多いと、それだけ読み込みに時間がかかるため、トークン消費量が増える可能性が高いです。

長期的に見れば Chrome DevTools MCP の方がトークン消費量が多くなる可能性がありますが、検証した限りでは大きな差はなかったため、便利な方を選ぶのが良いでしょう。

 使い分けの判断基準ここまでの内容を踏まえて、実際にどう使い分けるかをまとめましょう。

 Chrome DevTools MCPを選ぶべき場面通常のフロントエンド開発では、Chrome DevTools MCPで十分です。特に以下の場合は、Chrome DevTools MCPが適しています。

パフォーマンス最適化が必要: Web Vitalsの詳細分析が可能

Chromeのみで開発: 個人開発や、対象ブラウザがChromeのみのプロジェクト

詳細なエミュレーションが必要: CPU制限、ネットワーク制限のシミュレーション
また、Google公式なので、Chromeのアップデートにも即座に対応される安心感があります。

 Playwright MCPを選ぶべき場面一方、他ブラウザでの動作確認が必要な場合のみPlaywright MCPを使います。

クロスブラウザテストが必要: Firefox、Safariでの動作確認

クライアントワーク: 複数ブラウザ対応を求められる案件

CSSの互換性チェック: Safari特有のレイアウト崩れなど
個人開発ではブラウザまで気にしないことが多いですが、企業向けシステムでは必須になることもあります。
基本的には両方に慣れておくのがベストです。
普段はChrome DevTools MCPを使い、リリース前の最終チェックでPlaywright MCPを使う、という流れがおすすめです。

 Playwright MCP と Chrome DevTools MCP のセットアップ方法最後に、セットアップ方法とよくある質問をまとめます。一緒に確認していきましょう。

 セットアップ方法主要なツールでの設定方法を簡潔に紹介します。

 Claude Code での設定方法コマンド1つで完了します。
# Chrome DevTools MCP
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

# Playwright MCP
claude mcp add playwright npx @playwright/mcp@latest
参考：Chrome DevTools MCPの公式リポジトリ
参考：Playwright MCPの公式リポジトリ

 Cursor での設定方法設定画面（Settings → MCP → New MCP Server）に以下のJSONを追加します。
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}
Playwright MCPも同様の形式で追加できます。
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

 VS Code（GitHub Copilot）VS Codeの場合は、GitHub Copilotと連携してMCPを使用できます。まず、コマンドパレット（Ctrl+Shift+P）を開き、「MCP: Open User Configuration」を検索してください。
そこに、Cursorと同様のJSON形式で設定を追加します。設定の書き方は上記のCursorの例と同じ構造です。
なお、詳細は各MCPの公式リポジトリを参照してください。

 MCP を使ったブラウザ操作でよくある質問ここからは、よくある質問にお答えします。

 Q: 開いていたChromeのタブを引き継げる？ログインは？A: 残念ながら引き継げません。
どちらのMCPも、新しいブラウザインスタンスを起動します。既存のブラウザとは別のプロファイルになるため、ログイン状態は引き継がれません。
ただし、ログインフローをAIに指示すれば自動で実行してくれます。

本番環境のアカウントを使うことはおすすめしませんが、テスト用にだけ使うアカウントを用意しておけば、それなりに使えます。
サイトを開いて、ログインページへ移動して、
メールアドレスとパスワードを入力して、ログインボタンをクリックしてください
メールアドレスは「test@example.com」、パスワードは「password」としてください
私の場合、CLAUDE.mdにログイン手順を書いておき、毎回同じように実行しています。
ただし、2段階認証（2FA）が必要な場合は手動対応が必要です。
ログインシステムによっては突破できるかもしれませんが、うまくいかないことが多いのでおすすめしません。
また、ログインに使っている SaaS によっては、プログラム（MCP）でログインできない場合もあります。こういった場合は手動でログインを行う必要があります。

 Q: ローカル開発環境でも使える？A: もちろん使えます。
localhost:3000やlocalhost:8080など、ローカルサーバーに直接アクセスできます。そのため、開発中のアプリをすぐにAIでテストできます。
localhost:3000を開いて、
ホットリロード後の表示を確認して
このように、ローカル環境との連携も非常にスムーズです。

 Q: 両方入れておいても問題ない？A: 全く問題ありません。
両方をインストールしておき、用途に応じて使い分けることができます。それぞれ独立して動作するため、競合することはありません。
むしろ、両方入れておくと状況に応じて最適なMCPを選べるので便利です。私も普段から両方を入れて使い分けています。日常的な開発ではChrome DevTools MCP、リリース前の確認ではPlaywright MCPという使い方がおすすめです。
ただし、MCP は読み込むだけでトークンを消費（コンテキストを圧迫）するため、使わない場面ではオフにしておくと良いでしょう。
Claude Code の場合は /mcp コマンドから対象のMCPを選択し、Disable を選択することでオフにできます。

（有効化は Enable を選択）
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ Chrome-devtools MCP Server                                                                                                                                                    │
│                                                                                                                                                                                │
│ Status: ✔ connected                                                                                                                                                            │
│ Command: npx                                                                                                                                                                   │
│ Args: chrome-devtools-mcp@latest                                                                                                                                               │
│ Config location: /Users/username/.claude.json [project: /Users/username/workspace/zenn-content]                                                                                │
│ Capabilities: tools                                                                                                                                                            │
│ Tools: 26 tools                                                                                                                                                                │
│                                                                                                                                                                                │
│   1. View tools                                                                                                                                                                │
│   2. Reconnect                                                                                                                                                                 │
│ ❯ 3. Disable                                                                                                                                                                   │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
Cursor の場合は、MCP の設定画面から対象のMCPを選択し、トグルをオフにすることで一時的に無効化できます。

 まとめPlaywright MCPとChrome DevTools MCPの使い分けについて解説しました。
似たようなMCPでしたが、その違いについて理解できたでしょうか？
色んな MCP が登場する中、この2つの MCP は特に開発でよく使われるため、使い分けを理解しておくと便利です。

 AI駆動開発の最新情報をキャッチアップするには？Youtube でも AI 駆動開発の実践動画を公開しています！
よければチャンネル登録していただき、AI駆動開発の実践的な情報をキャッチアップにお役立ていただければと思います。
https://www.youtube.com/@vibe-coding-studio
また、Claude Code などの Udemy コースを開講しており、ありがたいことに複数のベストセラーをいただいてます。
個人サイトでは最低価格で受講できるクーポン（最大90% OFF）も配布しているので、よかったらご利用ください。
https://www.vibecodingstudio.dev/coupons
みなさんの AI 駆動開発のお役に立てれば嬉しいです。

MCP	ツール数	特徴的な機能
Chrome DevTools MCP	26個	パフォーマンス分析系が充実
Playwright MCP	21個	クロスブラウザ対応

カテゴリ	Chrome DevTools MCP	Playwright MCP
基本的なブラウザ操作	✅ 7ツール（click、fill、drag等）	✅ 同等機能
ページ移動・管理	✅ 7ツール	✅ 5ツール
パフォーマンス分析	⭐ 3ツール（強み）	❌ 標準機能にはなし
ネットワーク監視	✅ 2ツール	✅ 1ツール
デバッグ機能	✅ 4ツール	✅ 同等機能
エミュレーション	⭐ 3ツール（強み）	✅ 1ツール（サイズ変更のみ）

忙しい人のために要約

MCPの基本（初めての方向け）

2つのMCPを簡単に紹介

Playwright MCP（Microsoft公式）

Chrome DevTools MCP（Google公式）

機能比較 - どこが違う？

ツール数と対応カテゴリ

各カテゴリの詳細比較

パフォーマンス分析の違い

クロスブラウザ対応

トークン使用量の比較

実験条件

結果

使い分けの判断基準

Chrome DevTools MCPを選ぶべき場面

Playwright MCPを選ぶべき場面

Playwright MCP と Chrome DevTools MCP のセットアップ方法

セットアップ方法

Claude Code での設定方法

Cursor での設定方法

VS Code（GitHub Copilot）

MCP を使ったブラウザ操作でよくある質問

Q: 開いていたChromeのタブを引き継げる？ログインは？

Q: ローカル開発環境でも使える？

Q: 両方入れておいても問題ない？

まとめ

AI駆動開発の最新情報をキャッチアップするには？

Discussion