chrome-devtools

コアコンセプト

ブラウザのライフサイクル: ブラウザは最初のツール呼び出し時に、永続的な Chrome プロファイルを使用して自動的に起動します。MCP サーバー設定の CLI 引数で構成します: npx chrome-devtools-mcp@latest --help。 以下のフラグを指定することで、追加のツールを有効にできます:

• 拡張機能ツールを使用するには、--categoryExtensions フラグを使用します。
• メモリツールを使用するには、--memoryDebugging フラグを使用します。

ページのターゲット指定: ページスコープのツールは、特定のページをターゲットにするために pageId パラメータを必要とします。list_pages を使用して利用可能なページとその ID を確認するか（例: pageId: 1）、new_page でページを作成したときに返される ID を使用します。 注: evaluate_script では、ページをターゲットにする場合に pageId が必須です。ただし、--categoryExtensions が有効な場合は pageId は任意となり、代わりに serviceWorkerId を渡すことで拡張機能のバックグラウンドサービスワーカー内で評価できます。 要素の操作: take_snapshot を使用して、要素の uid を含むページ構造を取得します。各要素には操作のための一意の uid があります。要素が見つからない場合は、新しいスナップショットを取得してください。要素が削除されたか、ページが変更された可能性があります。

ワークフローパターン

ページを操作する前に

1. ナビゲート: navigate_page または new_page
2. 待機: 探している内容がわかっている場合は、wait_for でコンテンツが読み込まれるのを待ちます。
3. スナップショット: pageId を指定して take_snapshot でページ構造を把握します
4. 操作: スナップショットから取得した要素の uid を click、fill などに使用し、対応する pageId を渡します。

効率的なデータ取得

• 大きな出力（スクリーンショット、スナップショット、トレース）には filePath パラメータを使用します
• ページネーション（pageIdx、pageSize）とフィルタリング（types）を使用してデータを最小限に抑えます
• 更新されたページ状態が必要でない限り、入力アクションでは includeSnapshot: false を設定します

ツールの選択

• 自動化/操作: take_snapshot（テキストベースで高速、自動化に適しています）
• 視覚的な確認: take_screenshot（ユーザーが視覚的な状態を確認する必要がある場合）
• CSS とスタイリングの確認: get_css_styles を使用して、一致したルール、カスケード、CSS 変数を確認します。出力を信頼できる完全なものとして扱ってください。
• 追加の詳細: get_css_styles や take_snapshot では取得できない実行時の DOM/JS データには evaluate_script を使用します。

並列実行

複数のツール呼び出しを並列で送信できますが、正しい順序を維持してください: ナビゲート → 待機 → スナップショット → 操作。

拡張機能のテスト

続行する前に: 拡張機能ツール（install_extension、list_extensions など）は、MCP サーバーが --categoryExtensions フラグ付きで起動されている場合にのみ利用できます。これらのツールがツールリストにない場合は、停止してユーザーに MCP サーバー設定を更新するよう依頼してください:

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

更新後、変更を反映するにはユーザーが MCP サーバー（または AI クライアント）を再起動する必要があります。

1. インストール: install_extension を使用して、アンパックされた拡張機能のパスを指定します。
2. 特定: レスポンスから、または list_extensions を呼び出して拡張機能 ID を取得します。
3. アクションのトリガー: 該当する場合は trigger_extension_action を使用してポップアップまたはサイドパネルを開きます。
4. サービスワーカーの確認: serviceWorkerId を指定して evaluate_script を使用し（pageId と args は省略）、拡張機能の状態を確認するかバックグラウンドアクションをトリガーします。ページ内で評価する場合は、pageId を渡します（serviceWorkerId は省略します）。
5. ページの動作確認: 拡張機能が動作するページにナビゲートし、take_snapshot を使用して、コンテンツスクリプトが要素を注入したか、またはページを正しく変更したかを確認します。

トラブルシューティング

chrome-devtools-mcp では不十分な場合は、Chrome DevTools UI の使用をユーザーに案内してください。

• https://developer.chrome.com/docs/devtools
• https://developer.chrome.com/docs/devtools/ai-assistance

chrome-devtools-mcp や Chrome の起動時にエラーが発生する場合は、https://github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/troubleshooting.md を参照してください。