Chrome DevTools エージェント

概要

Chrome ブラウザをコントロール・検査するための専門的なスキルです。このスキルは chrome-devtools MCP サーバーを活用して、単純なナビゲーションから複雑なパフォーマンスプロファイリングまで、幅広いブラウザ関連タスクを実行できます。

使用タイミング

このスキルを使用する場面：

• ブラウザオートメーション: ページナビゲーション、要素のクリック、フォーム入力、ダイアログ処理。
• ビジュアル検査: ウェブページのスクリーンショットまたはテキストスナップショットの取得。
• デバッグ: コンソールメッセージの検査、ページコンテキストでの JavaScript 実行、ネットワークリクエストの分析。
• パフォーマンス分析: パフォーマンストレースの記録・分析を行い、ボトルネックと Core Web Vital の問題を特定。
• エミュレーション: ビューポートのリサイズやネットワーク/CPU 条件のエミュレーション。

ツール分類

1. ナビゲーション & ページ管理

• new_page: 新しいタブ/ページを開く。
• navigate_page: 特定の URL に移動、リロード、または履歴をナビゲート。
• select_page: 開いているページ間でコンテキストを切り替える。
• list_pages: すべてのオープンページとその ID を表示。
• close_page: 特定のページを閉じる。
• wait_for: 特定のテキストがページに表示されるまで待機。

2. 入力 & インタラクション

• click: 要素をクリック (スナップショットから uid を使用)。
• fill / fill_form: テキストを入力フィールドに入力、または複数のフィールドを一度に入力。
• hover: 要素の上にマウスを移動。
• press_key: キーボードショートカットまたは特殊キー (例: "Enter"、"Control+C") を送信。
• drag: 要素のドラッグ・アンド・ドロップ。
• handle_dialog: ブラウザのアラート/プロンプトを受け入れまたは拒否。
• upload_file: ファイル入力を通じてファイルをアップロード。

3. デバッグ & 検査

• take_snapshot: テキストベースのアクセシビリティツリーを取得 (要素の特定に最適)。
• take_screenshot: ページまたは特定の要素のビジュアル表現をキャプチャ。
• list_console_messages / get_console_message: ページのコンソール出力を検査。
• evaluate_script: ページコンテキストでカスタム JavaScript を実行。
• list_network_requests / get_network_request: ネットワークトラフィックとリクエスト詳細を分析。

4. エミュレーション & パフォーマンス

• resize_page: ビューポートのサイズを変更。
• emulate: CPU/ネットワークのスロットリングまたは位置情報エミュレーション。
• performance_start_trace: パフォーマンスプロファイルの記録を開始。
• performance_stop_trace: 記録を停止しトレースを保存。
• performance_analyze_insight: 記録されたパフォーマンスデータから詳細な分析を取得。

ワークフローパターン

パターン A: 要素の識別 (スナップショット優先)

要素を見つける場合は、take_screenshot より take_snapshot を優先してください。スナップショットは インタラクションツールに必要な uid 値を提供します。

1. `take_snapshot` で現在のページ構造を取得。
2. 対象要素の `uid` を見つける。
3. `click(uid=...)` または `fill(uid=..., value=...)` を使用。

パターン B: エラーのトラブルシューティング

ページが失敗している場合は、コンソールログとネットワークリクエストの両方を確認してください。

1. `list_console_messages` で JavaScript エラーを確認。
2. `list_network_requests` で失敗した (4xx/5xx) リソースを特定。
3. `evaluate_script` で特定の DOM 要素またはグローバル変数の値を確認。

パターン C: パフォーマンスプロファイリング

ページが遅い原因を特定します。

1. `performance_start_trace(reload=true, autoStop=true)` を実行。
2. ページ読み込み/トレース完了を待機。
3. `performance_analyze_insight` で LCP の問題またはレイアウトシフトを検出。

ベストプラクティス

• コンテキスト認識: 現在アクティブなタブが不確かな場合は、常に list_pages と select_page を実行してください。
• スナップショット: 大きなナビゲーションまたは DOM 変更の後は新しいスナップショットを取得してください。uid 値が変わる可能性があります。
• タイムアウト: 読み込みが遅い要素での無限待機を避けるため、wait_for に適切なタイムアウト値を使用してください。
• スクリーンショット: ビジュアル検証には take_screenshot を控えめに使用し、ロジックには take_snapshot に頼ってください。