Chrome DevTools MCP — ユースケース, インストール & ライブデモ

なぜ使うのか

主な機能

実際のChromium — お使いのブラウザとまったく同じようにページをレンダリング
インサイト付きパフォーマンストレース（LCP、CLS、レンダーブロッキングリソース）
ネットワークタブへのフルアクセス — リクエスト/レスポンスボディ、タイミング、リダイレクト
DOMスナップショット、スクリーンショット、クリック/入力/スクロール操作
コンソールログのキャプチャとページコンテキストでのライブJS評価
GoogleのChrome DevToolsチームがメンテナンス

ライブデモ

実際の動作

chrome-devtools.replay ▶ 準備完了

0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit

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

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json

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

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "chrome-devtools",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json

{
  "context_servers": {
    "chrome-devtools": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "chrome-devtools-mcp"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： Chrome DevTools

Lighthouse形式のトレースでページが遅い原因を診断する

👤 フロントエンドエンジニアおよびパフォーマンスエンジニア ⏱ ~20 min intermediate

使うタイミング： ページの動作が重く、推測ではなくClaudeにトレースを実行させて実際のボトルネックを特定したい場合に使用します。

前提条件

対象URLがログインなしで読み込める（または事前に認証を済ませている） — navigate_pageにURLを渡して使用します。認証が必要なページの場合は、まずchrome-devtoolsのclick/typeツールでログインしてください

フロー

パフォーマンストレースを実行する

https://example.com/product/123 を開いてください。CPU 4xスロットリングとslow-3Gネットワークプロファイルでパフォーマンストレースを実行し、LCP、CLS、TBTを教えてください。✓ コピーしました

→ 3つのメトリクス数値とトレースサマリー
最大の原因を特定する

LCP遅延に最も影響しているアセットまたはスクリプトは何ですか？リクエストタイミングを表示してください。✓ コピーしました

→ 特定のURLが識別され、タイミングの内訳（DNS/接続/TTFB/ダウンロード）が表示される
具体的な修正を提案する

LCPを2.5秒未満にするための最もコストの低い修正は何ですか？1つの変更（preconnect、preload、defer、lazy、またはbundle-split）を、追加すべき具体的な行とともに提案してください。✓ コピーしました

→ 汎用的なリストではなく、実行可能なHTML/JSの差分

結果： 原因が特定されたパフォーマンスリグレッションと具体的な修正。修正適用後にトレースを再実行して検証できます。

注意点

トレースは実行ごとに結果が変動する — 単発の数値は誤解を招く — 結論を出す前にトレースを3回実行し、中央値を取ってください
ローカル/開発ビルドは本番環境と異なる — 圧縮なしのlocalhostではなく、本番URLまたはCDN配信のプレビューに対してトレースしてください

組み合わせ： filesystem · github

Claudeがコーディングした機能がブラウザで実際に動作するか検証する

👤 エージェントのループを閉じたいAI支援開発者 ⏱ ~10 min beginner

使うタイミング： Claudeがフロントエンドコードを編集した直後。「完了」と言う前に、ページを開いてボタンをクリックし、動作を確認したい場合に使用します。

前提条件

開発サーバーが起動している — 別のターミナルでnpm run devを実行し、URLを確認してください

フロー

機能を開いてスクリーンショットを撮る

http://localhost:3000/new-feature を開いてください。スクリーンショットを撮り、表示内容を説明してください — 意図した通りになっていますか？✓ コピーしました

→ スクリーンショットと正直な説明（「ボタンが画面外にレンダリングされている」などの指摘がある場合も）
インタラクションを実行する

テストデータ {email: '[email protected]'} で「Submit」ボタンをクリックしてください。送信されるネットワークリクエストとレスポンスをキャプチャしてください。✓ コピーしました

→ 200レスポンスと一致するペイロードを含むネットワークエントリ
コンソールエラーを確認する

このフロー中にコンソールエラーや警告はありましたか？Reactのhydration警告やmissing-key警告も含めてください。✓ コピーしました

→ クリーンなコンソール、または見つかった警告に対する具体的な修正

結果： スクリーンショットとネットワークトレースをエビデンスとしたセルフテスト済みの機能。「AIが書いたコードが実際には動かない」というギャップを解消します。

注意点

スクリーンショットは問題なさそうだがインタラクションが壊れている — 視覚的な確認だけでなく、必ずユーザーフロー（クリック/入力）を実行してください
HMRとClaudeのスクリーンショットにレースコンディションが発生する — ナビゲーション後、何かをアサートする前にnetworkidleを待ってください

組み合わせ： filesystem · github

フロントエンドからのAPI呼び出しが失敗する原因をデバッグする

👤 「ローカルでは再現しない」4xx/5xxを追跡しているフルスタック開発者 ⏱ ~15 min intermediate

使うタイミング： ブラウザコンソールにfetchの失敗が表示されており、実際にどのヘッダー/ボディが送信されているか自分の記憶を信用できない場合に使用します。

フロー

失敗するAPI呼び出しをトリガーする

ページを開き、失敗するアクションを実行してください。失敗するリクエストの完全なURL、メソッド、ヘッダー、ボディをキャプチャしてください。✓ コピーしました

→ 正確なリクエストペイロードが確認できる — 推測は不要
期待値と比較する

バックエンドはヘッダー X-Client-Id とJSONボディのフィールドuser_idを期待しています。実際に送信されている内容は？差分を出してください。✓ コピーしました

→ 欠落しているまたは誤っているフィールドが特定される
修正して再検証する

リクエストが正しくなるようにソースコードを修正してください。その後ページをリロードし、呼び出しが200を返すことを確認してください。✓ コピーしました

→ 最終的なネットワークエントリが元のエラーではなく200を表示する

結果： ネットワークタブで動作が証明された修正済みのAPI呼び出し — 「自分の環境では動く」はもう不要です。

注意点

セッションCookieまたはCORSプリフライトが実際のリクエストを隠している — 失敗したリクエストだけでなく、プリフライトOPTIONSとSet-Cookieの履歴も確認してください

組み合わせ： filesystem · postgres

CSSリファクタリング後のビジュアルリグレッションを検出する

👤 デザインシステム移行を行うフロントエンド開発者 ⏱ ~20 min intermediate

使うタイミング： CSS/トークンをリファクタリングした後、マージ前に「ボタンがピンクになってしまった」といった問題を検出したい場合に使用します。

フロー

mainブランチで主要ページのスナップショットを撮る

http://localhost:3000（mainブランチ）で /、/pricing、/dashboard のスクリーンショットを撮ってください。/tmp/visual/main/ に保存してください。✓ コピーしました

→ 3枚のスクリーンショットが保存される
作業ブランチで同じページのスナップショットを撮る

ブランチ 'css-refactor' に切り替えて開発サーバーを再起動してください。同じ3ページのスクリーンショットを /tmp/visual/branch/ に保存してください。✓ コピーしました

→ パスが一致する3枚のスクリーンショットが保存される
差分を比較して説明する

各ペアを視覚的に比較し、変更点を説明してください。ピクセルレベルのアンチエイリアシングは無視し、デザイナーが気づくような変更をフラグしてください。✓ コピーしました

→ 「同じに見える」ではなく、ページごとの差分サマリー

結果： 意図しないビジュアル変更を検出する、レビュー可能な差分レポート。

注意点

動的コンテンツ（日付、ランダムな挨拶文）がショット間で変わる — 時間をスタブ化しRNGを固定するか、該当領域をクロップして除外してください

組み合わせ： filesystem · github

組み合わせ

他のMCPと組み合わせて10倍の力を

chrome-devtools + filesystem

ソースを編集 → ページをリロード → 検証、を高速ループで実行

localhost:3000/checkout を開いてください。フォームの送信ボタンの色が間違っています。src/ から該当するCSSを見つけて修正し、リロードしてスクリーンショットで確認してください。✓ コピーしました

chrome-devtools + github

Issueからバグを再現し、修正を検証してスクリーンショット付きPRを作成

Issue #482 で /pricing の375px幅でレイアウトバグが報告されています。chrome-devtoolsで再現し（375pxでスクリーンショット）、CSSを修正して、ビフォー/アフターのスクリーンショット付きPRを作成してください。✓ コピーしました

chrome-devtools + sentry

Sentryで検出された実ユーザーのエラーをローカルブラウザで再現する

SentryのIssue WEB-3a91 のパンくずリストでは、ユーザーが /cart に移動し「Checkout」をクリックしたことが示されています。chrome-devtoolsでそれを再現し、実際に何が壊れるかキャプチャしてください。✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
navigate_page	url: str, wait_for?: 'load'\|'networkidle'	ページ操作を開始する	free
take_screenshot	fullPage?: bool, selector?: str	ナビゲーションまたは操作後の視覚的確認	free
take_snapshot	none	テキストとしての構造化されたページコンテンツ — Claudeの推論にはスクリーンショットより適している	free
click	selector: str \| uid: str	CSSセレクタまたはスナップショットUIDで要素をクリックする	free
fill	selector: str, value: str	入力フィールドにテキストを入力する	free
evaluate_script	script: str	ページコンテキストで任意のJSを実行して検査する	free
list_console_messages	none	ページからコンソールログとエラーを読み取る	free
list_network_requests	filter?: str	発生したすべてのXHR/fetchを検査する	free
get_network_request	requestId: str	1つのリクエストの完全なヘッダーとボディを取得する	free
performance_start_trace	reload?: bool, cpu_throttle?: number, network?: 'slow3g'\|'fast3g'	パフォーマンス記録を開始する	free
performance_stop_trace	none	実行中のパフォーマンストレースを停止して分析する	free
emulate_cpu	rate: number	低速デバイスをシミュレートする（4x = ミッドレンジモバイル）	free
emulate_network	profile: 'slow3g'\|'fast3g'\|'offline'	制約のあるネットワーク環境でテストする	free
new_page / close_page / select_page	various	複数タブを管理する	free

コストと制限

運用コスト

APIクォータ: なし — ローカルブラウザを実行します
呼び出しあたりのトークン: スナップショットとネットワークダンプは大きくなる場合があります（5〜30kトークン）。take_snapshotは通常、フルスクリーンショット＋DOMダンプよりトークン効率が良いです
金額: 無料
ヒント: Claudeが構造を分析するにはtake_screenshotよりtake_snapshotを優先してください — スナップショットはコンパクトでテキストベースです。スクリーンショットは人間のレビュー用に残しておきましょう。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管： MCPレイヤーでの保存はありません。セッション中にサイトにログインした場合、Cookieはブラウザを閉じるまでChromiumプロファイルに保持されます

データ送信先： Chromiumはあなたの代わりにオープンWebを閲覧します — 対象サイトにはあなたのIPが送信されます。Chromiumのデフォルト設定が送信するものを除き、Googleへのテレメトリはありません。

絶対に付与しない： never point at your real browser profile containing saved logins/passwords

Claudeに「サイトXにログインして」と依頼すると、セッションCookieがブラウザプロファイルに保存されます。個人のプロファイルとは分離してください。
内容を理解していないコードをevaluate_scriptで実行しないでください — ページのオリジンでフルアクセス権限で実行されます。

トラブルシューティング

よくあるエラーと対処法

Chromium won't launch — Linuxで依存関係が不足している

不足しているシステムライブラリをインストールしてください: sudo apt-get install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libxkbcommon0 libasound2。MCPはChromiumをバンドルしていますが、すべてのランタイム依存関係は含まれていません。

確認：

`npx chrome-devtools-mcp --version`を実行してください — エラーに不足しているライブラリ名が表示されます

navigate_pageが低速ページでタイムアウトする

デフォルトのnetworkidleの代わりにwait_for: 'load'を指定するか、クライアントのMCPコンフィグでタイムアウトを増やしてください。

clickが失敗する: element not found

セレクタが古いか非表示になっています。まずtake_snapshotを再実行し、スナップショットから取得した新しいUIDを使用してください。

パフォーマンストレースが空になる

トレース中にページをリロードするか（reload: true）、操作を行う必要があります — アイドル状態のタブではタイムラインが生成されません。

代替案

Chrome DevTools 他との比較

代替案	代わりに使う場面	トレードオフ
Playwright MCP	クロスブラウザテスト（Firefox、WebKit）が必要な場合、またはPlaywrightのAPIサーフェスを好む場合	同等の機能。chrome-devtoolsはより深いパフォーマンストレースが可能、Playwrightはより幅広い自動化に対応
Puppeteer MCP	より低レベルのPuppeteer APIを使いたい場合	Chrome専用。chrome-devtools MCPと機能が大きく重複
browser-tools MCP	DevTools Protocolの拡張機能を使って既存のChromeに接続したい場合	サンドボックスなし — ログイン状態を含む実際のブラウザセッションを使用

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る