Chrome DevTools

コーディングエージェントからライブの Chrome ブラウザを直接操作・検査できます。Chrome DevTools MCP はブラウザ自動化、パフォーマンスプロファイリング、ネットワーク解析、デバッグにわたる 29 のツールを提供し、Puppeteer と Chrome DevTools Protocol を通じて Claude に DevTools のフル機能を与えます。

クリック、入力、フォーム入力、ファイルアップロード、ページ遷移、ダイアログ操作などのブラウザ操作を自動化できます。モバイルデバイスやカスタムビューポートをエミュレートして、レスポンシブデザインのテストも行えます。パフォーマンストレースやメモリスナップショットを記録してボトルネックを診断し、Lighthouse 監査の実行や CrUX フィールドデータを含む実用的なパフォーマンスインサイトを取得できます。

ネットワークリクエストの検査、ソースマップ付きスタックトレースによるコンソールメッセージの確認、スクリーンショットの取得、DOM スナップショット、ページコンテキストでの JavaScript 実行が可能です。軽量な基本的ブラウザ操作向けのスリムモードも用意されています。

使い方：Chrome で動作中のアプリケーションを操作するよう Claude に指示してください。プロンプト例：「localhost:3000 のアプリを開いてログインボタンをクリックして」、「ページをスクロールしながらパフォーマンストレースを記録して、遅い箇所を教えて」、「モバイルビューポートでホームページのスクリーンショットを撮って」、「フォームを送信した後のコンソールエラーを確認して」、「このページの Lighthouse 監査を実行して結果をまとめて」、「ダッシュボード読み込み時のネットワークリクエストをすべて一覧表示して」。