Chrome DevTools MCP

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

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

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

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

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

{
  "servers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest"
      ]
    }
  }
}

Chrome DevTools MCP とは

AI に、実物のブラウザを触らせるためのツールです。ふだん Chrome を開いて「ボタンを押してみる」「表示が崩れていないか見る」「なぜか重いページの原因を探す」といった確認作業を、AI が自分で Chrome を動かして行えるようになります。

AI にウェブページを作らせたとき、これまでは「本当に動くのか」を人が開いて確かめる必要がありました。このツールを入れると、AI が自分で開いて、押して、結果を見て、直すところまで進められます。

これは Google 公式のツールです。ツール自体は無料で、API キーも不要です。

Chrome DevTools MCP × AI でできること

🖱 実際に触って動作を確認

「作った申し込みフォーム、実際に入力して送信できるか試して」
→ Chrome を開いてクリック・入力・送信まで実行し、結果を報告

📸 画面を見ながら直す

「スマホ幅で表示が崩れていないか見て」
→ 画面サイズを変えてスクリーンショットを撮り、崩れを指摘

⚡ 表示速度の原因を特定

「このページが重い理由を調べて」
→ 読み込みを計測し、どの処理が時間を食っているかを示す

🔍 エラーと通信の中身を確認

「送信ボタンを押すとエラーになる。原因を調べて」
→ コンソールのエラーと通信内容を読み取り、原因を切り分け

提供される主なツール

Chrome DevTools MCP のツールは用途ごとに分かれています（公式リポジトリの一覧より）。

分類	主なツール
画面の操作	click / fill / fill_form / hover / type_text / press_key / upload_file
ページの移動	navigate_page / new_page / list_pages / select_page / wait_for
表示の再現	emulate / resize_page
表示速度の計測	performance_start_trace / performance_stop_trace / performance_analyze_insight
通信の確認	list_network_requests / get_network_request
調査・記録	take_screenshot / take_snapshot / list_console_messages / evaluate_script / lighthouse_audit
メモリの調査	take_heapsnapshot / compare_heapsnapshots / get_heapsnapshot_summary ほか
拡張機能の操作	install_extension / list_extensions / reload_extension / uninstall_extension

Chrome DevTools MCP について

Chrome DevTools MCP は、Chrome の開発チームが公式に提供している MCP サーバーです。パソコン上で動き、手元の Chrome を起動して操作します。Chrome に元から入っている開発者向け機能（DevTools）を、AI から呼び出せるようにしたものと考えると分かりやすいです。

スペック

• 配布形態: npm パッケージ（chrome-devtools-mcp・ローカル実行）
• 認証: 不要（API キー不要）
• 必要なもの: Node.js（LTS 版）と Google Chrome（最新の安定版以降）
• 提供元: Google（Chrome DevTools チーム）/ Apache-2.0 ライセンス
• 公式リポジトリ: ChromeDevTools/chrome-devtools-mcp

起動時の主な指定: 画面を出さずに動かす --headless、ふだん使いの Chrome と切り離して動かす --isolated、使う Chrome の種類を選ぶ --channel、利用状況の送信を止める --no-usage-statistics などが用意されています。

導入手順

前提条件

• Node.js（LTS 版・npx が動く環境）
• Google Chrome（最新の安定版以降）
• MCP に対応したクライアント（Claude Code / Claude Desktop / Cursor / Cline など）

ステップ

1. 使用環境のタブを選び、設定例をコピーして設定ファイルに貼り付ける
2. クライアントを再起動する
3. 「このページを開いてスクリーンショットを撮って」と話しかけて動作を確認する

API キーやログインは不要です。初回起動時に npx がパッケージを取得します。

注意事項

• AI が実物の Chrome を操作します。ログイン中のページを開くと、その状態のまま操作される場合があります。ふだん使いのブラウザと切り離したいときは --isolated を指定してください。
• 画面のない環境（サーバー上など）で動かす場合は --headless を使います。
• 操作対象は手元の Chrome です。AI に渡す URL は自分で確認できるページに限るのが安全です。
• メモリ調査や拡張機能の操作など、開発者向けの踏み込んだ機能も含まれます。ふだんの動作確認では画面操作・スクリーンショット・速度計測の3つがあれば足ります。