このMCPはChromeのブラウザ操作が可能です。
つまりVSCodeとGitHub CopilotとブラウザのChromeと直接対話が出来るようになりました。
これからは、ユーザーがGitHub CopilotやGemini CLIをより効果的に活用するために、指示スキルを鍛える必要になるでしょう。
ブラウザからの情報量が増えるため、制限がないGitHub Copilotのx0のAIモデルや、現在無料中(2025年9月現在)のGemini CLIなどを利用しましょう。
GitHub Copilotシリーズ
環境
Windows11
Chromeブラウザ
VSCode
GitHub Copilot
Gemini CLI
ソース
公式からChrome用のMCPの発表です。
Chrome DevTools (MCP) for your AI agent | Blog | Chrome for Developers
https://developer.chrome.com/blog/chrome-devtools-mcp
chrome-devtools-mcp/docs/tool-reference.md at main · ChromeDevTools/chrome-devtools-mcp
https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md
MCPとは
AIエージェント(GitHub Copilot、Gemini CLI等)がChrome DevToolsを操作できるようにするためのプロトコルで、Model Context Protocolの略称です。
主な出来ること
チャットから
- コンソールログの出力
- リサイズ
- スクショ撮影
などの主なブラウザ操作がほぼ全て可能となります。
Chrome DevTools MCP Tool Reference
ツール一覧
- click: クリック
- drag: ドラッグ
- fill: 単一フォーム要素 (input, textarea, select)
- fill_form: 複数フォーム要素
- handle_dialog: ダイアログ操作
- hover: ホバー操作
- upload_file: ファイルアップロード
ナビゲーション
- close_page: ページを閉じる
- list_pages: ページ一覧
- navigate_page: ページ移動
- navigate_page_history: 履歴
- new_page: 新しいページ
- select_page: ページを選択
- wait_for: 待機
エミュレーション
- emulate_cpu: CPUをエミュレート
- emulate_network: ネットワークをエミュレート
- resize_page: ページのリサイズ
パフォーマンス
- performance_analyze_insight: パフォーマンス分析のインサイト
- performance_start_trace: パフォーマンスのトレースを開始
- performance_stop_trace: パフォーマンスのトレースを停止
ネットワーク
- get_network_request: ネットワークリクエストを取得
- list_network_requests: ネットワークリクエスト一覧
デバッグ
- evaluate_script: スクリプトを評価
- list_console_messages: コンソールメッセージ一覧
- take_screenshot: スクリーンショットを撮る
- take_snapshot: スナップショットを撮る
出来ることの事例、ネットで拾った声
ブラウザの動作検証が可能
チャットからの指示で、「Chrome」で意図したとおりに動作するか自動で検証する
ネットワークリクエストを解析してオリジン間リソース共有（CORS）の問題を発見できる。
コンソールログを検査して機能が期待どおりに動作しない原因を見つけられる
list_console_messagesで
devtoolsのconsoleを見てくれるようになる
AIエージェントにパフォーマンストレースを実行・分析をやらせ、どこに問題があるかを調べてもらう。
ChromeブラウザのUIをナビゲートしたり、フォームに入力したり、ボタンをクリックできるようになった。
ユーザー行動をシミュレートして不具合の再現が可能。
複雑なユーザーフローをテストができるようになった。
AIエージェントにライブページに接続してから、DOMとCSSを検査して、複雑なレイアウト問題を修正するための具体的な提案をしてもらえるようになった
「パフォーマンスチェックして」と頼むだけで、
DevToolsを自動操作して実用的なレポートが出力される
playwrightより体感指示が通りやすい
GitHub Copilot の GPT-5-Codex(Preview) にChrome DevToolsのMCPを渡してから、1度もコンソールエラーになっていません。
ブラウザにしか出ないエラーをAIエージェントが勝手に吸い上げて対応をしてくれる。
・DevToolsのネットワークモニター
・コンソールログ
・パフォーマンストレース
などの機能をエージェントが利用可能になります。
問題の特定や修正の精度が向上します。
コンソールログの取得、エラー監視
ネットワーク通信のキャプチャ（リクエスト/レスポンス）
DOM 情報の取得・要素のプロパティ確認
パフォーマンス・トレースの記録
Web解析において超低コンテクストで最高の分析ができちゃう
このサイトのデザインで作ってくださいとURLを渡しておねがいすると
「これは教育目的のレプリカです。実際のXXXのデザインをコピーしないよう注意してください。」とでる。
でもこれはAIのモデルによるのかな？
その他多数
しなくて良くなること
ブラウザのスクリーンショット取って、フォルダを開いて、スクリーンショットのファイルをドラッグアンドドロップしてVSCodeに渡してGitHub Copilotに見せる手間がなくなった、直接指示可能
ブラウザのエラーやログをコピペして見せる必要がなくなった、直接指示可能
その他多数
これからは指示で十分です。
インストール
VSCodeへのインストール (GitHub Copilot利用時)
VSCodeの ctrl + shift + pでコマンドパレットを開きます。
"MCP: Open User Configuration" と検索します。
mcp.jsonが開いたら👇️のように設定します。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
実行ボタンを押して実行中になれば成功です。
Gemini CLIへのインストール
# gemini CLIの立ち上げ
gemini
settings
設定を立ち上げ
👆️settings.json.origは、同名ファイルや以前の設定があったときに上書きせず別のファイルとして保存されたファイルです。
設定を settings.json ファイルに書きます。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest"
]
},
...
その他：おまけ
stagewise という 拡張機能 ＜＜ ブラウザの特定箇所を指定してAIに渡せる
毎日10件まで無料
毎日100件まで €20 ユーロ/月
stagewise | The frontend coding agent for production codebases
https://stagewise.io/
stagewiseとCursorでフロントエンド開発が最高すぎる件
https://zenn.dev/the_exile/articles/stagewise-witth-cursor