chrome-devtools

コア概念

ブラウザのライフサイクル: ブラウザは最初のツール呼び出し時に自動的に起動され、永続的な Chrome プロファイルを使用します。MCP サーバー設定の CLI 引数で構成できます: npx chrome-devtools-mcp@latest --help。拡張機能を有効にするには、--categoryExtensions を使用します。

ページの選択: ツールは現在選択されているページで動作します。list_pages で利用可能なページを確認し、select_page でコンテキストを切り替えます。

要素の相互作用: take_snapshot を使用してページ構造と要素の uid を取得します。各要素には相互作用用の一意の uid があります。要素が見つからない場合は、新しいスナップショットを取得してください。要素が削除されたか、ページが変更された可能性があります。

ワークフローパターン

ページと相互作用する前に

1. ナビゲート: navigate_page または new_page
2. 待機: wait_for でコンテンツが読み込まれたことを確認します(探すコンテンツがわかっている場合)。
3. スナップショット: take_snapshot でページ構造を理解します
4. 相互作用: スナップショットの要素 uid を使用して click、fill などを実行します

効率的なデータ取得

• 大きな出力(スクリーンショット、スナップショット、トレース)には filePath パラメータを使用
• ページネーション(pageIdx, pageSize)とフィルタリング(types)を使用してデータ量を最小化
• 更新されたページ状態が必要な場合を除き、入力アクションで includeSnapshot: false を設定

ツールの選択

• 自動化/相互作用: take_snapshot (テキストベース、高速、自動化に最適)
• ビジュアル検査: take_screenshot (ユーザーが視覚的な状態を確認する必要がある場合)
• 追加情報: アクセシビリティツリーにない情報には evaluate_script を使用

並列実行

複数のツール呼び出しを並列で送信できますが、正しい順序を保つ必要があります: ナビゲート → 待機 → スナップショット → 相互作用。

拡張機能のテスト

1. インストール: install_extension をアンパックされた拡張機能のパスとともに使用します。
2. 特定: レスポンスから拡張機能 ID を取得するか、list_extensions を呼び出して確認します。
3. アクションのトリガー: trigger_extension_action を使用して、該当する場合はポップアップまたはサイドパネルを開きます。
4. サービスワーカーの確認: evaluate_script で 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 を参照してください。