chrome-devtools-mcp プラグイン
プラグイン Claude Code 開発 コード品質・レビュー・テスト監視・オブザーバビリティWeb・アプリ開発以下の解説は生成 AI によるものです。出典と照らし合わせてご確認ください。
chrome-devtools-mcpは、README によると、Claude・Cursor・Copilot・Gemini CLIなどのコーディングエージェントから、稼働中のChromeブラウザを操作・検査できるMCP(Model-Context-Protocol)サーバーです。Chrome DevToolsの機能を通じてパフォーマンストレースの記録やネットワークリクエストの解析、ソースマップ付きスタックトレースでのコンソールメッセージ確認ができ、Puppeteerによるブラウザ操作の自動化も備えています。MCPクライアントを使わずに利用できるCLIも提供されています。公式サポート対象はGoogle ChromeとChrome for Testingで、MCPクライアントにブラウザの内容が渡される点が注意事項として明記されています。使用統計はデフォルトでGoogleに収集されますが、フラグで無効化できます。
概要
README によると、chrome-devtools-mcpはApache-2.0ライセンスのオープンソースMCPサーバーで、npmパッケージchrome-devtools-mcpとして公開されています。npx経由で起動し、Claude Code、Cursor、VS Code/Copilot、Gemini CLI、Windsurfなど各種MCPクライアントの設定ファイルに登録して使う仕組みです。
chrome-devtools-mcp でできること
- click・drag・fill・fill_form・hover・press_key・type_text・upload_file・click_at・handle_dialogなどPuppeteerベースの入力操作を自動化する(README のツール一覧より)
- navigate_page・new_page・close_page・list_pages・select_page・wait_forでページ遷移・管理を行う
- emulate・resize_pageでデバイス条件やビューポートをエミュレートする
- performance_start_trace・performance_stop_trace・performance_analyze_insightでパフォーマンストレースを記録・解析する(CrUXの実ユーザーデータと併用可能)
- list_network_requests・get_network_requestでネットワークリクエストを確認し、list_console_messages・get_console_messageでソースマップ付きコンソールメッセージを確認する
- evaluate_script・take_screenshot・take_snapshot・screencast_start/stop・lighthouse_auditでページをデバッグする
- take_heapsnapshotやcompare_heapsnapshotsなどのヒープスナップショット系ツールでメモリを解析する
- install_extension・list_extensions・reload_extension・trigger_extension_action・uninstall_extensionで拡張機能を管理する
- --browserUrl・--wsEndpoint・--autoConnectを使い、新規起動せず稼働中のChromeインスタンスに接続する
- --slimオプションでナビゲーション・スクリプト実行・スクリーンショットのみに絞った軽量モードを使う
出典
原文の説明（英語）
Control and inspect a live Chrome browser from your coding agent. Record performance traces, analyze network requests, check console messages with source-mapped stack traces, and automate browser actions with Puppeteer.
chrome-devtools-mcp の変更履歴
- プラグイン chrome-devtools-mcp を追加