chrome-devtools-mcp Claude Code プラグイン
Claude Code プラグインClaude Code開発コード品質・レビュー・テスト監視・オブザーバビリティWeb・アプリ開発以下の解説は生成 AI によるものです。出典と照らし合わせてご確認ください。
chrome-devtools-mcp は、Claude Code などのコーディングエージェントから実際に起動中の Chrome ブラウザを操作・検査できるようにする MCP サーバー機能を提供するプラグインです。README によると、Puppeteer を用いてブラウザ操作を自動化するほか、パフォーマンストレースの記録、ネットワークリクエストの一覧・詳細取得、ソースマップ対応のコンソールメッセージ確認といったツールを備えています。Claude Code 向けには MCP サーバー本体とスキルがまとめて提供され、マーケットプレイス経由でのインストール手順が案内されています。README にはこのほか、メモリヒープスナップショットの解析、ブラウザ拡張機能の管理、Lighthouse 監査、デバイスやネットワーク条件のエミュレーションなども記載されています。ホームページでは、Chrome DevTools は Google Chrome に組み込まれた開発者向けツール群と説明されており、本プラグインはそれをエージェントの作業フローに接続する位置づけです。
chrome-devtools-mcp でできること
- 実際の Chrome ブラウザ上でページ遷移やクリック、入力、ドラッグ、フォーム入力を自動化する
- パフォーマンストレースを記録し、その内容を解析する
- ネットワークリクエストとレスポンスの一覧や詳細を取得する
- ソースマップ付きのコンソールメッセージやスタックトレースを確認する
- スクリーンショットや構造化されたページスナップショットを取得する
- ヒープスナップショットを取得・比較してメモリ使用状況を調べる
- ブラウザ拡張機能のインストール、再読み込み、削除を行う
- Lighthouse によるアクセシビリティや SEO などの監査を実行する
- ビューポートサイズ、CPU、ネットワーク条件をエミュレートする
- 起動済みの Chrome インスタンスにデバッグポートや WebSocket 経由で接続する