LoginSignup
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@tomada(とまだ@AI駆動開発)inLearning Next

Chrome DevTools MCPでWeb開発のチェックを自動化！Playwright MCPとの違いは？

Last updated at Posted at 2025-09-29

こんにちは、とまだです。

フロントエンド開発でコンソールエラーをいちいちコピーしたり、スクリーンショットを撮ってAIに渡したりするの、地味に面倒ですよね。

実は私も、ローカル環境でのテストでエラーが出るたびに、DevToolsを開いてエラーメッセージをコピーして、Claude Codeに貼り付けて...という作業を繰り返していました。

そこで以前ご紹介したPlaywright MCPでかなり楽になったのですが、さらに便利なツールが登場しました。

結論から言いますと、Chromeだけを対象にしたウェブ開発であれば、Chrome DevTools MCPで完結できます。

今回は、Chrome DevTools MCPの特徴と、Playwright MCPとの違い、そして実際の使い方について詳しく解説します！

忙しい人のために要約

  • Chrome DevTools MCPは、Googleが公式で提供するブラウザ自動化ツール
  • AIがChromeを直接操作してテストや分析ができる
  • Playwright MCPと比べて軽量で、ツール数も26個と豊富
  • 特にパフォーマンス測定の詳細分析が得意
  • コンテキスト使用量（トークン使用量）は Playwright MCP とほぼ同等
  • ただし、Chrome専用なので他ブラウザテストにはPlaywright MCPとの併用が必要

Chrome DevTools MCPとは？

MCPの基本的な仕組み

MCP（Model Context Protocol）というのは、AIと外部ツールをつなぐための共通ルールのようなものです。

料理に例えると、レシピを見ながら料理する人（AI）がいて、その人に包丁や鍋（ツール）を使えるようにする仕組みがMCPです。

Chrome DevTools MCPは、その道具箱の中にある「ブラウザ操作専用の道具」というわけです。

なぜGoogleが作ったものが良いのか

Chrome DevTools MCPの最大の強みは、Chromeを作っているGoogle自身が提供していることです。

自社製品だからこその深い統合ができているんです。

1. Chromeの内部機能に直接アクセス

DevToolsの全機能が使えるだけでなく、通常では取得しづらい詳細なパフォーマンスデータも取得できます。

「動く」「動かない」まではPlaywright MCPでもできますが、「なぜ動かないのか」「どこが遅いのか」まではChrome DevTools MCPの方が優れています。

2. 公式サポートで動作が安定

サードパーティ製と違い、Chromeのアップデートに即座に対応されるところも大きなメリットです。

特にブラウザの仕様変更が頻繁にある昨今、公式サポートは大きな安心材料ですよね。

実際に何ができるのか

それでは、具体的にChrome DevTools MCPでどんなことができるのか、いくつかのシーンを紹介します。

後ほど Playwright MCPとの違いも解説しますが、ひとまずはChrome DevTools MCPの特徴を見ていきましょう。

活用場面1: パフォーマンス問題の自動発見

従来の手動作業を思い出してみてください。

DevToolsのPerformanceタブを開いて、記録を開始して、ページをリロードして、結果を分析して...

この一連の作業、かなり面倒ですよね。

私も、実務で何度もやってきましたが、正直言ってかなーーり時間がかかります。

LightHouseも便利ですが、あくまで概要レベルの指摘にとどまりますので、詳細なボトルネック分析には人の手が必要でした。

そこで、Chrome DevTools MCPの出番です。

このページのパフォーマンスを測定して、
遅い原因を教えてください

たったこれだけでOKです。

活用場面2: エラーの原因調査

フォーム送信でエラーが出たとしましょう。

そして、コンソールを開いて、エラーメッセージをコピーして、AIに貼り付けて...

この作業、もう不要です。

もう手動でエラーメッセージをコピペする必要はありません。

活用場面3: レスポンシブデザインの確認

スマホ表示、タブレット表示、PC表示。

それぞれで表示を確認するのは面倒ですよね。

そんなときも、Chrome DevTools MCPにお任せです。

PC、タブレット、スマホの3サイズで
表示を確認してください

これだけで、たとえば以下のような確認を自動で行います。

PCサイズ（1920x1080）

  • デスクトップ表示の確認
  • スクリーンショット撮影
  • レイアウト問題の検出

タブレットサイズ（768x1024）

  • iPadサイズでの表示確認
  • 中間サイズ特有の問題検出
  • タッチ操作の可能性確認

スマホサイズ（375x812）

  • iPhone Xサイズでの確認
  • 縦長画面での表示問題
  • テキストの可読性チェック

各サイズでレイアウトの崩れがあれば、具体的にどの要素が問題なのかまで報告してくれます。

Web開発、特にレスポンシブデザインの確認は非常に手間がかかりますが、Chrome DevTools MCPを使えば大幅に効率化できます。

セットアップ方法

ここでは、各種AIツールでのChrome DevTools MCPの設定方法を解説します。

主要なエディターについては公式サイトでインストール方法が載っているので、あまり迷うことはないと思いますが、一応解説しておきます。

Claude Codeでの設定（最も簡単）

ワンコマンドでインストール

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

これだけです。30秒で完了します。

手動で設定する場合

プロジェクトのルートディレクトリに.mcp.jsonを作成します。

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

その他のツールでの設定

Cursorの場合

即設定できるボタンがGitHubにありますので、そちらをクリックしてください。

image.png

もしくは、設定画面で以下のJSONを追加してください。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}
  1. Settings → MCP → New MCP Server
  2. 上記のJSON設定を貼り付け
  3. Save

Codexの場合

コマンドで追加（推奨）

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

TOMLファイルで設定
~/.codex/config.tomlに追加

[mcp_servers.chrome-devtools]
command = "npx"
args = ["chrome-devtools-mcp@latest"]

VS Code（GitHub Copilot）の場合

  1. コマンドパレットを開く（Ctrl+Shift+P）
  2. 「MCP: Open User Configuration」を検索
  3. 開いたmcp.jsonに設定を追加

もしくは以下のコマンドをターミナルで実行

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

Playwright MCPと何が違う？

ここまで、Chrome DevTools MCPの特徴とセットアップ方法を解説してきました。

では、以前に私がご紹介したPlaywright MCPと比べて何が違うのでしょうか？

両者の違いを具体的に見ていきましょう！

今回は、ツール数、特徴的な機能、トークン使用量の3点で比較します。

Chrome DevTools MCP vs Playwright MCP

この記事を書いている時点での最新情報です。

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

正直多くのツールについては被っています。例えばブラウザを開いたり、中で操作をしたり、エラーメッセージを確認できるといったところまでは同じです。

しかし、Chrome DevTools MCPにはパフォーマンス分析に特化したツールが多く含まれています。

  • performance_start_trace：詳細なパフォーマンストレース
  • performance_stop_trace：トレースの停止と分析
  • performance_analyze_insight：インサイトの自動生成
  • evaluate_script：任意のJavaScript実行

これらのツールを組み合わせることで、より深いパフォーマンス分析が可能になります。

Web開発を経験してきた私としては、一番面倒なところだったので、ここをAIにMCP経由で任せられるのは非常に助かります。

ツール比較表

公式ドキュメントを参考に、各カテゴリごとにツール数と特徴をまとめました。

カテゴリ ChromeDevTools MCP Playwright MCP
基本的なブラウザ操作 ✅ 7ツール
• click（クリック）
• fill（入力）
• drag（ドラッグ）
• hover（マウスを乗せる）
• fill_form（フォーム入力）
• handle_dialog（ダイアログ対応）
• upload_file（ファイルアップロード）		 ✅ 同等機能
• browser_click
• browser_type
• browser_drag
• browser_hover
• browser_fill_form
• browser_handle_dialog
• browser_file_upload
ページ移動・管理 ✅ 7ツール
• navigate_page（ページ移動）
• new_page（新規ページ）
• close_page（ページを閉じる）
• list_pages（ページ一覧）
• select_page（ページ選択）
• navigate_page_history（履歴移動）
• wait_for（待機）		 ✅ 同等機能
• browser_navigate
• browser_navigate_back
• browser_close
• browser_wait_for
• browser_tabs（タブ管理）
パフォーマンス分析 ⭐ 3ツール（強み）
• performance_start_trace
• performance_stop_trace
• performance_analyze_insight		 ❌なし
（追加可能だが限定的）
ネットワーク監視 ✅ 2ツール
• list_network_requests
• get_network_request		 ✅ 1ツール
• browser_network_requests
デバッグ機能 ✅ 4ツール
• evaluate_script（スクリプト実行）
• list_console_messages（コンソール確認）
• take_screenshot（スクショ）
• take_snapshot（DOM取得）		 ✅ 同等機能
• browser_evaluate
• browser_console_messages
• browser_take_screenshot
• browser_snapshot
エミュレーション ⭐ 3ツール（強み）
• emulate_cpu（CPU制限）
• emulate_network（ネットワーク制限）
• resize_page（画面サイズ変更）		 ✅ 1ツール
• browser_resize（サイズ変更のみ）

より具体的なツール比較（詳細版）

こちらは、各カテゴリごとに、具体的なツール名とその違いをまとめたものです。

1. 基本的なブラウザ操作

ChromeDevTools MCP（7ツール）
  • click - 要素をクリック
  • fill - テキスト入力
  • drag - ドラッグ操作
  • hover - マウスオーバー
  • fill_form - 複数フォームへの一括入力
  • handle_dialog - アラートやダイアログの処理
  • upload_file - ファイルアップロード
Playwright MCP（同等機能）
  • browser_click - クリック操作
  • browser_type - テキスト入力
  • browser_drag - ドラッグ操作
  • browser_hover - マウスオーバー
  • browser_fill_form - フォーム一括入力
  • browser_handle_dialog - ダイアログ処理
  • browser_file_upload - ファイルアップロード
  • browser_press_key - キーボード操作（ChromeDevToolsにはない）
  • browser_select_option - ドロップダウン選択（ChromeDevToolsにはない）

2. ページナビゲーション

ChromeDevTools MCP（7ツール）
  • navigate_page - URL移動
  • new_page - 新規ページ作成
  • close_page - ページを閉じる
  • list_pages - 開いているページ一覧
  • select_page - ページ切り替え
  • navigate_page_history - 履歴での前後移動
  • wait_for - 要素や条件の待機
Playwright MCP（5ツール）
  • browser_navigate - URL移動
  • browser_navigate_back - 戻る操作
  • browser_close - ブラウザを閉じる
  • browser_wait_for - 待機処理
  • browser_tabs - タブ管理（作成・切り替え・削除を統合）

3. パフォーマンス分析【ChromeDevToolsの独自機能】

ChromeDevTools MCP（3ツール）
  • performance_start_trace - パフォーマンス記録開始
  • performance_stop_trace - パフォーマンス記録停止
  • performance_analyze_insight - パフォーマンス問題の詳細分析

Playwright MCP

  • 標準機能にはなし
  • オプション（--caps=tracing）で追加可能（分析専用ツールは無し）

image.png

4. ネットワーク監視

ChromeDevTools MCP（2ツール）
  • list_network_requests - ネットワークリクエスト一覧
  • get_network_request - 特定リクエストの詳細取得
Playwright MCP（1ツール）
  • browser_network_requests - ネットワークリクエスト一覧のみ

5. デバッグ機能

ChromeDevTools MCP（4ツール）
  • evaluate_script - JavaScript実行
  • list_console_messages - コンソールメッセージ取得
  • take_screenshot - スクリーンショット撮影
  • take_snapshot - DOMスナップショット取得
Playwright MCP（同等機能）
  • browser_evaluate - JavaScript実行
  • browser_console_messages - コンソールメッセージ取得
  • browser_take_screenshot - スクリーンショット撮影
  • browser_snapshot - アクセシビリティツリー取得

6. エミュレーション【ChromeDevToolsの強み】

ChromeDevTools MCP（3ツール）
  • emulate_cpu - CPU速度の制限
  • emulate_network - ネットワーク速度の制限
  • resize_page - ビューポートサイズ変更
Playwright MCP（1ツール）
  • browser_resize - ウィンドウサイズ変更のみ

トークン使用量の比較

次に、実際のトークン使用量を比較してみました。

与えたプロンプトはこちらです。私のサイトで検証しています。

"https://school.learning-next.app/coupons" というサイトには、Udemy講座のクーポン一覧が表示されています。
この中で、もっとも割引率が高い（XX % OFF）の数字が大きいものを教えてください。
そして、その講座のタイトルと、割引率を教えてください。

さらに、そのクーポンを配布しているページへ遷移してください。

その後「/docs」というパスへ遷移し、どのようなドキュメントがあるかを確認してください。

その他、ページを移動するたびに以下の点をチェックしてください。

- コンソールにエラーが出ていないかどうか
- meta descriptionタグの内容
- 各ページのデザイン

ここでは、ページ遷移が3回発生し、コンソールエラーの確認やスクリーンショット撮影も行うよう指示をしています。

何か一つ機能を開発した後に、こういった一連の動作をAIに実行させて、問題がないか確認するイメージです。

そして Chrome DevTools MCP と Playwright MCP で実行し、コンテキスト使用量を比較しました。
（ここでは「トークン使用量」と同じ意味で使っています）

Claude Code の /context コマンドで確認しています。

結果：

MCP 初期コンテキスト使用量 実行後の使用量 増加分
Chrome DevTools MCP 54% 68% +14%
Playwright MCP 52% 64% +12%

※初期値に差分があるのは気にしないでください。

Playwright MCPの方が若干少ないですが、ほぼ同等と考えて良いでしょう。

もしかしたら、より複雑な操作をさせると差が出るかもしれませんが、これぐらいのチェック（ちょっとした機能開発時の最終チェック）であれば、どちらを使っても大差ないと考えて良いでしょう。

実際、Chrome DevTools を使うのであればパフォーマンス分析もできるので、Chrome DevTools MCPをメインに使うのが良いと私は考えています。

使い分けの基準

さて、ここまでの内容を踏まえて、実際にどう使い分けるかを考えてみましょう。

Chrome DevTools MCPが向いている場面

まず、Chrome DevTools MCP はパフォーマンスの詳細分析が得意です。

たとえば Web Vitalsの各指標を詳細に分析できます。

  • LCP（Largest Contentful Paint）
  • FID（First Input Delay）
  • CLS（Cumulative Layout Shift）

これらは SEO にも重要な指標なので、パフォーマンス最適化を重視する場合は Chrome DevTools MCP が最適です。

そして、Chrome においては Playwright MCP よりも詳細なエミュレーションが可能です。

たとえば、CPUやネットワークの速度制限を細かく設定できます。

そのため、実務レベルのフロントエンド開発では、Chrome DevTools MCPをメインに使うのが効率的です。

Playwright MCPが必要な場面

一方、Playwright MCPはクロスブラウザ対応が最大の強みです。

Chrome はもちろん、 Firefox や Safari（WebKit）でも動作確認ができます。

私も個人開発で経験しましたが、CSSのflexboxがSafariだけで崩れることがあります。

こんなとき、Chrome DevTools MCPでは検出できません。

そのため、別ブラウザでの動作確認が必要なときはPlaywright MCPを使う必要があります。

個人開発ではブラウザまで気にしないことが多いですが、クライアントワークでは必須になることが多いです。
（特に、企業が提供するシステムはIE対応がまだ必要な場合があります...）

特に、モダンなCSS機能を使う場合は、ブラウザ間の差異が出やすいので注意が必要です。
えず、両方を使い分けることをおすすめします。

よくある疑問と回答

ではここで Chrome DevTools MCPに関して、想定される疑問に回答していきます。

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

A: 残念ながら使えません。でも大丈夫です。

Chrome DevTools MCPは新しいChromeインスタンスをデバッグモードで起動します。

これは既存のブラウザとは別のプロファイルになります。

では、ログインが必要なサイトはどうするのか？

それは、起動後にログインフローを実行するようにAIに指示すればOKです。

具体的な手順：

  1. サイトを開く
  2. ログインページへ移動
  3. メールとパスワードを入力
  4. ログインボタンをクリック
  5. ダッシュボードで動作確認

この一連の流れを、AIに一度指示するだけで実行できます。

私の場合、CLAUDE.md や AGENTS.md にログイン手順を書いておき、毎回同じように実行しています。

# ログイン手順

開発環境では検証用アカウントを作成済みですので、以下の手順でログインしてください。

1. https://example.com/login を開く
2. メールアドレスを "hoge@example.com" と入力
3. パスワードを "P@sSw0rd!" と入力
4. 「ログイン」ボタンをクリック
5. ダッシュボードが表示されたら成功です

ただし、2段階認証（2FA）が必要な場合は手動で対応する必要があります。

Q: 対応ブラウザは？

A: それぞれのMCPで対応ブラウザが異なります。

Chrome DevTools MCP

  • Chrome専用
  • 最新版から数バージョン前まで対応
  • Chromiumベースブラウザ（Edge等）は非公式

Playwright MCP

  • Chrome：フル対応
  • Firefox：フル対応
  • Safari：WebKit版で対応
  • Edge：フル対応

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

A: もちろん使えます

localhost:3000やlocalhost:8080など、ローカルサーバーに直接アクセスできます。

たとえば、こんな感じでしょうか。

Next.jsの開発中

localhost:3000を開いて、
ホットリロード後の表示を確認して

Viteでの開発中

localhost:5173のビルド結果を確認して、初期表示のパフォーマンスを測定してください

まとめ

いかがでしたか？

Chrome DevTools MCPは、Googleが公式で提供する強力なブラウザ自動化ツールです。

特に実務レベルでのフロントエンド開発において、パフォーマンス分析や詳細なデバッグが必要な場合に非常に役立ちます。

そして、通常の開発ではChrome DevTools MCPで十分であり、Playwright MCPはクロスブラウザテストが必要な場合にのみ使用するのが効率的です。

設定も簡単なので、今すぐ導入して面倒な確認作業から解放されちゃってください。

Claude Code の関連記事

他にも Claude Code や AI 駆動開発の記事を書いていますので、よかったらこちらもご覧ください。

ちょっと宣伝： Claude Code や Codex の Udemy コース作ってます

主に AI 駆動開発の Udemy コースを開講しており、ありがたいことに複数のベストセラーをいただいてます。

image.png

個人サイトでは最低価格で受講できるクーポン（最大90% OFF）も配布しているので、よかったら見ていってください。

ご意見や、新講座の要望も大歓迎です！

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?