chrome-devtools

Chrome DevTools エージェント

概要

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

使用する場面

次のような場合にこのスキルを使用します：

• ブラウザ自動化: ページのナビゲーション、要素のクリック、フォームの入力、ダイアログの処理。
• 視覚的検査: Web ページのスクリーンショットやテキストスナップショットの取得。
• デバッグ: コンソールメッセージの検査、ページコンテキストでの JavaScript の評価、ネットワークリクエストの分析。
• パフォーマンス分析: パフォーマンストレースの記録と分析による、ボトルネックや Core Web Vitals の問題の特定。
• エミュレーション: ビューポートのリサイズやネットワーク/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` to get the current page structure.
2. Find the `uid` of the target element.
3. Use `click(uid=...)` or `fill(uid=..., value=...)`.

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

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

1. `list_console_messages` to check for JavaScript errors.
2. `list_network_requests` to identify failed (4xx/5xx) resources.
3. `evaluate_script` to check the value of specific DOM elements or global variables.

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

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

1. `performance_start_trace(reload=true, autoStop=true)`
2. Wait for the page to load/trace to finish.
3. `performance_analyze_insight` to find LCP issues or layout shifts.

ベストプラクティス

• コンテキストの認識: 現在どのタブがアクティブかわからない場合は、常に list_pages と select_page を実行してください。
• スナップショット: uid 値は変更される可能性があるため、大きなナビゲーションや DOM の変更の後には新しいスナップショットを取得してください。
• タイムアウト: 読み込みの遅い要素でハングしないよう、wait_for には妥当なタイムアウトを設定してください。
• スクリーンショット: 視覚的な確認には take_screenshot を控えめに使用し、ロジックには take_snapshot を頼りにしてください。