Chrome DevTools MCPでAIにブラウザを見せる導入ガイド

Google公式のChrome DevTools MCPを使えば、AIがブラウザを直接操作・デバッグできます。Cursor・Claude Code対応の設定手順をゼロから解説します。

AIはコードを書けても「ブラウザの画面」が見えない

AIにWebアプリのコードを書かせると、こんなことが起きませんか？

「直してって言ったのに、また似たようなエラーが出てる…」「ボタンの見た目がおかしいのを何度説明しても直らない」

これは、AIがそもそもブラウザで何が起きているかを見られないからです。コードは書けても、実際に動かした画面・エラーログ・表示速度は見えない。まるに目隠しをしたまま絵を描かせているようなものです。

Chrome DevTools MCP（エムシーピー）を使うと、この問題が解決します。

MCPとは「AI툴に外部ツールを接続する共通の仕組み」のことです。Chrome DevTools MCPをAIエージェントに接続すると、AIがChromeブラウザを直接操作・確認できるようになります。「このページのLCP（ページの主要コンテンツが表示されるまでの時間）を計測して」「コンソールにエラーが出ていないか確認して」と日本語で指示するだけで、AIが自分でブラウザを動かして結果を返してくれます。

---

このツールで何ができるか

パフォーマンス計測：ページの表示速度を自動計測し、「ここが遅い」という改善案をAIが提示
ネットワーク確認：API通信の中身・エラーをAIが直接チェック
スクリーンショット取得：AIがページを見て「見た目がおかしい」を自分で検知
コンソールエラー確認：JavaScriptエラーをAIが自律的に発見・修正
フォーム操作・自動化：ボタンクリック・入力・画面遷移をAIが実行

これらが26種類のツールとして用意されており、Claude・Cursor・Copilot・Gemini CLIなど主要なAIエージェントで使えます。

---

向いている人・向いていない人

向いている人

WebアプリやLPをAIと一緒に作っている人
「なぜかエラーが出る」「表示がズレる」をAIに解決させたい人
パフォーマンス改善に興味があるけどDevToolsを自分で読みたくない人

向いていない人

モバイルアプリ（ネイティブ）やCLIツールだけを作っている人（ブラウザ操作が不要なため）
Chromium以外のブラウザ（Firefox・Safariなど）でのテストが主な人（公式サポートはGoogle Chrome・Chrome for Testingのみ）

---

前提条件

作業を始める前に、以下が揃っているか確認してください。

必要なもの	確認方法
Node.js v20.19以上	ターミナルで `node -v` を実行
Google Chrome（最新版推奨）	Chrome自体をインストール済みであること
MCPに対応したAIエージェント	Cursor・VS Code Copilot・Claude Code・Gemini CLIなど

Node.jsのバージョンが古い場合は、nodejs.org から最新のLTS版をインストールしてください。

---

導入手順

パターン①：設定ファイルに追記する（Cursor・VS Code Copilot・Claude Desktop など）

ほとんどのMCP対応エージェントは mcp.json（または settings.json）というファイルに設定を書くだけで動きます。以下のJSONを追記してください。

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

Cursorの場合：Cursor Settings → MCP → New MCP Server から上記を貼り付けます。

VS Codeの場合：ターミナルで以下のコマンドを実行すると自動で設定されます。

code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

設定ファイルを保存後、エージェントを再起動してください。

パターン②：Claude Codeのコマンドで追加する

Claude Codeを使っている場合はターミナルで1行打つだけです。

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

実行後、Claude Codeを再起動すればOKです。

> 補足：npx は「npmパッケージをその場でダウンロードして実行するコマンド」です。chrome-devtools-mcp のインストール作業は不要で、設定に書くだけで自動的に動きます。

---

最初にやってみること ── 小さな成功体験

設定が完了したら、まず動作確認をかねて簡単なプロンプトを試してみましょう。

エージェントのチャット欄に以下を入力してください。

Check the performance of https://developers.chrome.com

しばらくするとChromeが自動で起動し、対象サイトを開いてパフォーマンス計測が始まります。AIがその結果を解析して「LCPが〇秒です。改善するには…」のような提案を返してきたら成功です。

次に、自分のプロジェクトに対して試してみましょう。ローカルで開発中のサイト（例：http://localhost:3000）を起動した状態で、こんなプロンプトを投げてみてください。

「http://localhost:3000 のコンソールにエラーが出ていないか確認して」
「http://localhost:3000 のトップページのスクリーンショットを撮って、デザインで気になる点があれば教えて」

AIが自律的にブラウザを動かして答えを返してきます。

---

つまずきポイントと対処法

「Chromeが起動しない / 見つからないエラーが出る」

デフォルトではChrome DevTools MCPが新しいChromeプロセスを自動起動します。Chromeが標準的な場所にインストールされていれば問題ないはずです。EdgeやBraveなどChromium系のブラウザしか入っていない場合は動作保証外なので、Google Chromeをインストールしてください。

「ログイン状態のサイトでうまく動かない」

デフォルトでは独立した新しいChromeプロファイル（ログイン情報なし）で起動します。自分がすでにログイン済みのChromeに接続したい場合は、接続方法を変える必要があります。詳細は公式GitHubのトラブルシューティングを参照してください。

「使用データが収集されるのが気になる」

デフォルトでGoogle側に利用統計が送信されます。オプトアウトしたい場合は、設定の args に "--no-usage-statistics" を追加してください。

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

「Node.jsのバージョンエラーが出る」

Node.js v20.19以上が必要です。node -v でバージョンを確認し、古ければアップデートしてください。

---

セキュリティ上の注意

Chrome DevTools MCPはブラウザの内容をすべてAIエージェントに見せます。ネットバンキングや社内システムなど、個人情報・機密情報が表示されているページにつなげないよう注意してください。開発用・テスト用のサイトに限定して使うのがおすすめです。

---

次のステップ

基本的な動作確認ができたら、以下の活用に進んでみましょう。

フォームのE2Eテスト自動化：「このフォームに入力してSubmitボタンを押し、成功メッセージが出るか確認して」とAIに指示するだけで自動テストが走ります
LCP・CLS改善ループ：AIにパフォーマンス計測→コード修正→再計測を繰り返させて、表示速度を自律的に改善させる
レスポンシブ確認：スマホサイズでのスクリーンショットをAIに撮らせて、崩れていないかチェック

利用できるツールの全リストは、公式のツールリファレンス（GitHub）で確認できます。各ツールの詳細な引数・使い方も記載されているので、慣れてきたら読んでみることをおすすめします。