chrome-devtools

Chrome DevTools MCP スキル

Chrome DevTools Protocol を使用した、Chrome ブラウザーの自動化とデバッグ機能を網羅しています。このスキルでは、ウェブ開発、テスト、デバッグのタスクに役立つ Chrome DevTools のすべての機能を利用できます。

機能

1. 移動と自動化 - ブラウザーの移動、タブ、ページ上の操作を制御します
2. ページの操作 - クリック、入力、ドラッグ、フォームへの入力、ファイルのアップロードを行います
3. デバッグと検査 - コンソールログやネットワークリクエストの表示、スクリプトの実行を行います
4. パフォーマンス分析 - トレースを記録してパフォーマンスに関する分析情報を取得します
5. エミュレーション - さまざまなデバイス、ネットワーク状況、ビューポートでテストします
6. ビジュアルテスト - スクリーンショットと DOM スナップショットを取得します

クイックリファレンス

各操作の詳しい手順については、以下を参照してください。

• NAVIGATION.md - ページの移動、タブ、待機
• INTERACTION.md - クリック、入力、フォーム、アップロード
• DEBUGGING.md - コンソールログ、ネットワークリクエスト、スクリプトの実行
• PERFORMANCE.md - パフォーマンスのトレースと分析
• EMULATION.md - デバイスとネットワークのエミュレーション
• VISUAL.md - スクリーンショットと DOM スナップショット

一般的なワークフロー

ウェブテストのワークフロー

1. navigate_page を使用してページに移動します
2. click、fill、press_key を使用して要素を操作します
3. take_screenshot または list_console_messages で結果を確認します
4. list_network_requests でネットワークの動作を確認します

パフォーマンス分析のワークフロー

1. performance_start_trace でトレースを開始します
2. ページに移動するか、ページを操作します
3. performance_stop_trace でトレースを停止します
4. performance_analyze_insight で分析情報を取得します

デバッグのワークフロー

1. 問題のあるページに移動します
2. list_console_messages でコンソールを確認します
3. list_network_requests でネットワークを検査します
4. evaluate_script で診断スクリプトを実行します
5. スクリーンショットを撮影して視覚的に確認します

フォームテストのワークフロー

1. フォームのあるページに移動します
2. fill で各フィールドに入力するか、fill_form で複数のフィールドにまとめて入力します
3. 必要に応じて upload_file でファイルをアップロードします
4. 送信し、スクリーンショットやコンソールで確認します

ツールカテゴリの概要

入力の自動化（8 ツール）

• click - 要素をクリックします
• drag - ドラッグ＆ドロップ操作を行います
• fill - フィールドにテキストを入力します
• fill_form - 複数のフォームフィールドに入力します
• handle_dialog - アラートやダイアログを管理します
• hover - 要素にカーソルを合わせます
• press_key - キーボード入力を行います
• upload_file - ファイルのアップロードを処理します

ナビゲーション（6 ツール）

• navigate_page - URL に移動します
• new_page - 新しいタブを作成します
• close_page - タブを閉じます
• list_pages - 開いているタブを表示します
• select_page - タブを切り替えます
• wait_for - 条件が満たされるまで待機します

エミュレーション（2 ツール）

• emulate - デバイスや状況をシミュレートします
• resize_page - ビューポートのサイズを変更します

パフォーマンス（3 ツール）

• performance_start_trace - 記録を開始します
• performance_stop_trace - 記録を終了します
• performance_analyze_insight - 推奨事項を取得します

ネットワーク（2 ツール）

• list_network_requests - すべてのリクエストを表示します
• get_network_request - リクエストの詳細を取得します

デバッグ（5 ツール）

• evaluate_script - JavaScript を実行します
• take_screenshot - 画面を撮影します
• take_snapshot - DOM を取得します
• list_console_messages - コンソールを表示します
• get_console_message - 特定のメッセージを取得します

重要な指示

必須：Chrome DevTools ツールを使用する前に、Read ツールを使用して関連するリファレンスファイルを読み込む必要があります。これらのリファレンスには、この概要に含まれていない重要な操作手順が記載されています。

ユーザーが Chrome DevTools を使った作業を依頼した場合：

1. 実行したい操作（移動、デバッグ、テスト、分析）を特定します
2. **必須：**ツールを実行する前に、Read ツールを使用して関連するリファレンスファイルを読み込みます：
   • 移動タスク → まず references/NAVIGATION.md を読み込みます
   • 操作タスク → まず references/INTERACTION.md を読み込みます
   • デバッグタスク → まず references/DEBUGGING.md を読み込みます
   • パフォーマンスタスク → まず references/PERFORMANCE.md を読み込みます
   • エミュレーションタスク → まず references/EMULATION.md を読み込みます
   • ビジュアルテストタスク → まず references/VISUAL.md を読み込みます
3. 読み込んだリファレンスのパターンに従って、適切な MCP ツールコマンドを実行します
4. 必要に応じてスクリーンショットやデータを添えて、結果をわかりやすく報告します
5. 必要に応じて操作を連続して実行します（例：移動 → 操作 → 検証）

関連するリファレンスドキュメントを先に読み込まずに、Chrome DevTools ツールを使用しようとしないでください。

ベストプラクティス

• 適切なタイミングで常に待機します - wait_for を使用してページの準備が整ったことを確認します
• エラーに適切に対処します - コンソールメッセージとネットワークエラーを確認します
• スクリーンショットを撮影します - 視覚的な確認はデバッグに役立ちます
• 操作を論理的な順序で連続して実行します - 操作の前に移動し、アクションの前にトレースを開始します
• クリーンアップします - リソースを解放するため、作業が終わったらページを閉じます
• セレクターを慎重に使用します - 要素セレクターが具体的で信頼できることを確認します

例

ウェブサイトのスクリーンショットを撮影する

User: "Take a screenshot of example.com"
Me: Uses navigate_page → wait_for → take_screenshot

フォームの送信をテストする

User: "Fill out the login form on staging.example.com"
Me: Uses navigate_page → fill_form → click → list_console_messages

ページのパフォーマンスを分析する

User: "Check the performance of our homepage"
Me: Uses performance_start_trace → navigate_page → performance_stop_trace → performance_analyze_insight

ネットワークの問題をデバッグする

User: "Why is the API call failing on /dashboard?"
Me: Uses navigate_page → list_network_requests → get_network_request (for failed request)

モバイルのビューポートをテストする

User: "How does the site look on iPhone 13?"
Me: Uses emulate (iPhone 13) → navigate_page → take_screenshot

設定

Chrome DevTools MCP サーバーは、Claude Code の MCP 設定で構成する必要があります：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

任意の設定フラグ：

• --headless false - ブラウザーウィンドウを表示します
• --categoryEmulation - エミュレーションツールを有効にします
• --categoryPerformance - パフォーマンスツールを有効にします
• --categoryNetwork - ネットワークツールを有効にします