はじめに
Googleが2025年9月23日にChrome DevTools MCPの公開プレビューを開始しました。
これによってChrome DevToolsの機能をAIに解析してもらうことやWebページを直接デバッグすることなどが可能になった。
色々なAIサービスに対応しているが、今回は弊社で使用しているCursorでの設定でChrome DevTools MCPを連携をやっていきます。
連携方法
連携方法には公式から出ているように2種類存在します。
自動連携
公式の方で自動的に設定してくれるボタンを用意しているらしくこのボタンをクリックしていけば連携されます。
手動連携
Cursor → 基本設定 → Cursor Settings → Tools & MCP → New MCP Serverボタンを押下して、下記設定を追加すれば、MCPとして使用できます。
{
"chrome-devtools": {
"command": "npx -y chrome-devtools-mcp@latest"
}
}
要件
Chrome DevTools MCPを使用する上で要件がいくつかあります。
- Nodeのバージョンはv20.19またはそれ以降の最新のメンテナンスLTSバージョン以降
- Chromeの現在の安定バージョン以降
- npm
この３つが必要になります。
2と3はほぼほぼ問題ないかと思いますが、Nodeのバージョンに関してはnodenvなどを導入し、Nodeのバージョンを切り替えられるようにすることをおすすめします。
Chrome DevTools MCP使用可能な場合
Chrome DevTools MCP使用不可な場合
使用例
https://actbe.co.jp/press-release/ で 株式会社アクトビ、東京証券取引所 TOKYO PRO Market（TPM）へ上場の記事をクリックして詳細画面に遷移してほしい
とするとChromeが立ち上がり該当のページに遷移して記事をクリックし詳細画面に遷移してくれます。
https://〇〇〇〇/contact で 下記のお問い合わせ内容を記入してお問い合わせをしてほしい
お問い合わせ内容: 〇〇について
名前: 〇〇 〇〇
フリガナ: 〇〇 〇〇
メールアドレス: 〇〇@〇〇.com
お問い合わせ内容: 〇〇〇〇
とするとそのページのお問い合わさせを自動的に行なってくれたりなどします。
機能一覧
ブラウザの自動操作、パフォーマンス計測、デバッグを実現する包括的なツールセットです。以下の6つのカテゴリに分類される28のツールを提供しています。
※2025年10月24日時点
1. 入力操作の自動化 (8ツール)
Webページ上の要素を操作するためのツール群
- click - 要素のクリック操作（ダブルクリックにも対応）
- drag - 要素のドラッグ&ドロップ
- fill - テキスト入力やセレクトボックスの選択
- fill_form - 複数のフォーム要素を一括入力
- handle_dialog - ブラウザダイアログの処理（承認/却下）
- hover - 要素へのホバー操作
- press_key - キーボード操作（ショートカットキーにも対応）
- upload_file - ファイルアップロード
2. ページナビゲーション (7ツール)
ブラウザのタブやページ遷移を制御
- list_pages - 開いているページの一覧取得
- new_page - 新しいページを開く
- select_page - 操作対象のページを選択
- close_page - ページを閉じる
- navigate_page - 指定URLへ移動
- navigate_page_history - 戻る/進む操作
- wait_for - 特定のテキストが表示されるまで待機
3. エミュレーション (3ツール)
デバイスやネットワーク環境のシミュレーション
- emulate_cpu - CPU速度の制限（1-20倍のスロットリング）
- emulate_network - ネットワーク環境の再現（3G/4G、オフラインなど）
- resize_page - ページサイズの変更（レスポンシブデザインのテスト用）
4. パフォーマンス計測 (3ツール)
Webページのパフォーマンス分析
- performance_start_trace - パフォーマンストレースの開始（Core Web Vitalsも計測）
- performance_stop_trace - トレースの停止
- performance_analyze_insight - パフォーマンス改善のインサイト詳細を取得
5. ネットワーク監視 (2ツール)
HTTPリクエスト/レスポンスの確認
- list_network_requests - ネットワークリクエストの一覧表示（リソースタイプでフィルタ可能）
- get_network_request - 特定のリクエスト詳細を取得
6. デバッグ (5ツール)
開発者向けのデバッグ機能
- take_snapshot - アクセシビリティツリーベースのページ構造取得（要素にuidが付与される）
- take_screenshot - ページまたは要素のスクリーンショット撮影
- list_console_messages - コンソールメッセージの一覧（エラー、警告などでフィルタ可能）
- get_console_message - 特定のコンソールメッセージの詳細取得
- evaluate_script - JavaScriptコードの実行と結果取得
セキュリティ上の警告
MCPクライアントと共有したくない機密情報や個人情報は、絶対に扱わないでください。
- ブラウザに表示される全ての情報がMCPクライアントから閲覧可能
- パスワード、個人情報、機密データなどは入力・表示しない
- テスト・開発用途専用のブラウザインスタンスとして使用することを推奨
まとめ
特定のWebサイトの内容を分析するだけでなく、UIのテストやSTテストなども行えることもありテストも自動化できるようになりよりエンジニアの負担が減るようなMCPなのかなと思うので是非皆さんも使用してみてください！
Discussion