🔧

Chrome DevTools MCPガイド - AIアシスタントからブラウザを操作する

2026/01/15に公開

Chrome

開発環境

生産性

Model Context Protocol

tech

 はじめにAIコーディングアシスタント（Claude、Cursor、GitHub Copilotなど）を使っている開発者の皆さん、ブラウザの開発ツールをAIから直接操作できることをご存知でしょうか？
Chrome DevTools MCP は、AIアシスタントがChrome DevToolsの機能にアクセスできるようにする、Model Context Protocol（MCP）サーバーです。これにより、AIアシスタントがブラウザを自動的に操作し、パフォーマンス測定、ネットワーク解析、コンソールエラーの確認などを実行できるようになります。
従来のAI支援では、コードを生成することはできても、その動作を確認するには手動でブラウザを開いて確認する必要がありました。Chrome DevTools MCPを使えば、AIがコードを生成し、さらにその動作を自動的に検証できるようになります。
この記事では、以下の内容を解説します：
Chrome DevTools MCPとModel Context Protocolの概要
各種AIクライアント（Claude、Cursor、VS Code Copilot等）での設定方法
実践的な使い方と活用例
AIアシスタントをより強力な開発パートナーにしたい方は、ぜひ参考にしてください。

 Chrome DevTools MCPとは？Chrome DevTools MCP は、GoogleがリリースしたModel Context Protocol（MCP）サーバーで、AIコーディングアシスタントがChromeブラウザを制御・検査できるようにします。

 Model Context Protocol（MCP）とはModel Context Protocol（MCP）は、AIモデルが外部ツールやサービスと連携するための標準規格です。AIモデルにとっての「USB-C」のような存在で、統一されたインターフェースを通じて様々なツールと接続できます。
MCPの登場により、AIアシスタントごとに個別の統合を開発する必要がなくなり、一度MCPサーバーを実装すれば、MCP対応のすべてのAIクライアントから利用できるようになります。

 Chrome DevTools MCPの主な特徴
ライブブラウザの制御: 実際のChromeブラウザを起動・操作

DevToolsへのアクセス: パフォーマンス測定、ネットワーク解析、コンソールログの取得

自動化機能: Puppeteerベースの信頼性の高い自動化

リアルタイム検証: AIが生成したコードを即座にブラウザで確認

 実現できることChrome DevTools MCPを使うと、AIアシスタントが以下のようなタスクを実行できます：

パフォーマンス分析: Core Web Vitals（LCP、FID、CLS）の測定とトレース記録

ネットワークデバッグ: HTTPリクエストの確認、CORSエラーの診断

コンソールエラーの確認: JavaScriptエラーや警告の自動収集

UI自動化: フォーム入力、クリック、ナビゲーションの自動実行

DOMとCSSの検査: ライブでのHTML構造とスタイルの確認

スクリーンショット: ページのキャプチャと視覚的な確認

 必要な環境Chrome DevTools MCPを使用するには、以下の環境が必要です：

 システム要件
Node.js: v20.19以上（最新のLTS版を推奨）

Chrome: 最新の安定版

npm: Node.jsに付属

MCP対応AIクライアント: Claude Code、Cursor、VS Code Copilotなど

 動作環境の確認以下のコマンドで、Node.jsのバージョンを確認してください：
node --version
# v20.19.0 以上であることを確認
Node.jsがインストールされていない場合は、公式サイトからダウンロードしてインストールしてください。

 セットアップ方法Chrome DevTools MCPのセットアップは、使用するAIクライアントによって異なります。主要なクライアント別に設定方法を解説します。

 基本的な設定の流れどのクライアントでも、基本的な流れは同じです：
MCPサーバー設定を追加
Chrome DevTools MCPを指定
AIクライアントを再起動（必要に応じて）
ブラウザが自動的に起動することを確認

 Claude Code での設定Claude Codeでは、CLIを使って簡単にセットアップできます。

 CLIを使った設定（推奨）# Claude Code CLIでMCPサーバーを追加
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
このコマンドを実行すると、自動的に設定ファイルが更新されます。

 Cursor での設定Cursorでは、ワンクリックでインストールするか、設定画面から追加できます。

 ワンクリックインストール（最も簡単）以下のリンクをクリックすると、自動的にCursorにインストールされます：
Install in Cursor

 VS Code Copilot での設定VS Code Copilotでも、ワンクリックインストールまたはCLIでの設定が可能です。

 ワンクリックインストールVS Codeで以下のボタンをクリック：
Install in VS Code (安定版)
Install in VS Code Insiders

 CLIを使った設定# VS Code CLIでMCPサーバーを追加
code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

 Copilot CLI での設定Copilot CLIを使用する場合：
# Copilot CLIを起動
copilot

# MCPサーバーを追加
/mcp add
以下の項目を設定：

Server name: chrome-devtools

Server Type: [1] Local

Command: npx -y chrome-devtools-mcp@latest
設定後、CTRL+Sで保存します。

 その他のAIクライアント
 Windsurf設定ファイルに以下を追加：
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

 ClineClineの設定ドキュメントに従って、上記の標準設定を追加します。

 Gemini CLI# プロジェクト単位
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

# グローバル
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

 動作確認セットアップが完了したら、以下のプロンプトで動作を確認してください：
https://developers.chrome.com のパフォーマンスをチェックしてください
正常に動作していれば、AIアシスタントが：
自動的にChromeブラウザを起動
指定されたURLにアクセス
パフォーマンストレースを記録
結果を分析してレポート
といった一連の操作を実行します。
!MCPサーバーは、ツールが初めて使用されるタイミングで自動的にブラウザを起動します。単にMCPサーバーに接続するだけでは、ブラウザは起動しません。

 実践的な使い方Chrome DevTools MCPで利用可能な主要なツールと使い方を紹介します。

 パフォーマンス分析AIアシスタントにパフォーマンスの測定を依頼できます：
プロンプト例：
https://example.com のCore Web Vitalsを測定して、改善提案をしてください
AIは以下のような分析を実行します：
ページにアクセス
パフォーマンストレースを記録
LCP（Largest Contentful Paint）、FID（First Input Delay）、CLS（Cumulative Layout Shift）を測定
ボトルネックを特定
具体的な改善提案を提示

 ネットワークリクエストの分析ネットワークエラーやAPIの問題を診断できます：
プロンプト例：
https://example.com/dashboard のネットワークリクエストを確認して、
失敗しているリクエストがあれば原因を調べてください
AIは：
ページにアクセスしてネットワークトラフィックを記録
失敗したリクエスト（4xx、5xx）を特定
CORSエラーやタイムアウトを検出
原因と解決策を提案

 コンソールエラーの確認JavaScriptエラーを自動的に収集・分析できます：
プロンプト例：
https://example.com のコンソールエラーをチェックして、
問題があれば修正方法を提案してください

 UI自動化とテストフォームの動作確認やユーザーフローのテストができます：
プロンプト例：
https://example.com/login にアクセスして、
ログインフォームが正しく動作するか確認してください。
テストアカウント: test@example.com / password123
AIは：
ページにアクセス
フォームフィールドに入力
送信ボタンをクリック
結果を確認（成功/失敗、エラーメッセージなど）
問題があれば原因を分析

 スクリーンショットの取得視覚的な確認が必要な場合：
プロンプト例：
https://example.com をモバイルサイズ（375x667）で
スクリーンショットを撮ってください

 DOM・CSS検査レイアウトやスタイルの問題をデバッグできます：
プロンプト例：
https://example.com のヘッダー要素を調べて、
レスポンシブデザインの問題があれば指摘してください

 利用可能なツール一覧Chrome DevTools MCPは、以下のカテゴリに分類される多数のツールを提供しています：

 入力自動化（8ツール）
click: 要素をクリック

drag: ドラッグ&ドロップ

fill: フォームフィールドに入力

fill_form: 複数のフィールドを一括入力

handle_dialog: アラート・確認ダイアログに対応

hover: 要素にマウスオーバー

press_key: キーボード入力

upload_file: ファイルアップロード

 ナビゲーション自動化（6ツール）
close_page: ページを閉じる

list_pages: 開いているページ一覧

navigate_page: URLに移動

new_page: 新しいページを開く

select_page: ページを選択

wait_for: 要素やテキストの出現を待機

 エミュレーション（2ツール）
emulate: デバイスやネットワーク条件をエミュレート

resize_page: ブラウザウィンドウのサイズ変更

 パフォーマンス（3ツール）
performance_analyze_insight: パフォーマンス分析

performance_start_trace: トレース記録開始

performance_stop_trace: トレース記録停止

 ネットワーク（2ツール）
get_network_request: 特定のリクエスト詳細を取得

list_network_requests: すべてのリクエスト一覧

 デバッグ（5ツール）
evaluate_script: JavaScriptコードを実行

get_console_message: 特定のコンソールメッセージを取得

list_console_messages: すべてのコンソールメッセージ一覧

take_screenshot: スクリーンショット撮影

take_snapshot: アクセシビリティスナップショット取得

 高度な設定
 既存のChromeインスタンスに接続すでに起動しているChromeブラウザに接続することもできます。

 リモートデバッグの有効化!Chrome 136以降の重要な変更
Chrome 136から、セキュリティ強化のため、デフォルトプロファイル（通常使用しているChromeプロファイル）でのリモートデバッグが禁止されました。リモートデバッグを使用する場合は、必ず--user-data-dirフラグで専用のプロファイルディレクトリを指定する必要があります。
これにより、マルウェアや攻撃者がリモートデバッグを悪用して、クッキーやセッショントークンを盗むリスクを軽減します。
Chromeを以下のオプションで起動：
# Chrome 136以降: 必ず --user-data-dir を指定
# macOS/Linux
google-chrome --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-debug-profile \
  --no-first-run --disable-default-apps

# Windows
chrome.exe --remote-debugging-port=9222 ^
  --user-data-dir=%TEMP%\chrome-debug-profile ^
  --no-first-run --disable-default-apps
パラメータの説明：

--remote-debugging-port=9222: リモートデバッグ用のポート

--user-data-dir: 専用プロファイルのディレクトリ（Chrome 136以降必須）

--no-first-run: 初回起動の画面をスキップ

--disable-default-apps: デフォルトアプリを無効化

 MCP設定の変更{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

 認証済みセッションでのデバッグChrome 136以降では、認証が必要なWebアプリケーション（X/Twitter、LinkedIn、GitHubなど）をデバッグする場合、特別な手順が必要です。
手順：
専用プロファイルでChromeを起動
google-chrome --remote-debugging-port=9222 \
  --user-data-dir=~/chrome-mcp-profile
ブラウザで各サービスにログイン
起動したChromeで必要なサービス（X、GitHub等）にログイン
ログイン情報は専用プロファイルに保存されます
MCPサーバーから接続
AIアシスタントがこのChromeインスタンスに接続すると、ログイン済みの状態でデバッグ可能
セッションは専用プロファイル内で永続化されます
注意事項：
通常のChromeプロファイルのデータを直接コピーして使用することも可能ですが、データ破損のリスクがあります
デバッグ専用のプロファイルを作成し、必要なサービスのみログインすることを推奨します
セキュリティの観点から、本番環境のアカウントではなくテストアカウントを使用してください

 自動接続の設定Chrome 145以降では、自動接続機能が利用できます：
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--auto-connect"
      ]
    }
  }
}
この設定により、MCPサーバーが起動中のChromeに自動的に接続します。

 カスタム設定オプションその他の設定オプション：

--headless: ヘッドレスモードで実行

--user-data-dir: カスタムユーザーデータディレクトリ

--viewport: デフォルトのビューポートサイズ
詳細は公式ドキュメントを参照してください。

 まとめChrome DevTools MCPを使うと、AIアシスタントがChromeブラウザを直接操作し、パフォーマンス測定やネットワーク解析、UI自動化を実行できるようになります。Model Context Protocolの標準規格に基づいており、Claude Code、Cursor、VS Code Copilotなど、複数のAIクライアントで利用可能です。
セットアップは、ほとんどのクライアントでワンクリックまたは数行の設定で完了します。Chrome 136以降を使用する場合は、セキュリティ強化により、リモートデバッグ時に--user-data-dirフラグで専用プロファイルを指定する必要があります。
この技術により、AIアシスタントがコード生成だけでなく、実際の動作検証まで担当できるため、Webアプリケーションの開発・デバッグサイクルを大幅に短縮できます。

 参考リンク
 公式ドキュメントChrome DevTools MCP - GitHub
Chrome DevTools MCP - 公式ブログ（日本語）
ツールリファレンス
トラブルシューティングガイド
Model Context Protocol 公式サイト

 日本語解説記事Chrome DevTools MCP導入とトラブル解決 - Qiita
Chrome DevTools MCPサーバーの使い方 - Apidog

はじめに

Chrome DevTools MCPとは？

Model Context Protocol（MCP）とは

Chrome DevTools MCPの主な特徴

実現できること

必要な環境

システム要件

動作環境の確認

セットアップ方法

基本的な設定の流れ

Claude Code での設定

CLIを使った設定（推奨）

Cursor での設定

ワンクリックインストール（最も簡単）

VS Code Copilot での設定

ワンクリックインストール

CLIを使った設定

Copilot CLI での設定

その他のAIクライアント

Windsurf

Cline

Gemini CLI

動作確認

実践的な使い方

パフォーマンス分析

ネットワークリクエストの分析

コンソールエラーの確認

UI自動化とテスト

スクリーンショットの取得

DOM・CSS検査

利用可能なツール一覧

入力自動化（8ツール）

ナビゲーション自動化（6ツール）

エミュレーション（2ツール）

パフォーマンス（3ツール）

ネットワーク（2ツール）

デバッグ（5ツール）

高度な設定

既存のChromeインスタンスに接続

リモートデバッグの有効化

MCP設定の変更

認証済みセッションでのデバッグ

自動接続の設定

カスタム設定オプション

まとめ

参考リンク

公式ドキュメント

日本語解説記事

Discussion