エージェント向け Chrome DevTools を使用すると、レスポンシブ レイアウトの検証、位置情報認識 API のテスト、さまざまな CPU 速度やネットワーク速度のシミュレートを行うことができます。これらのツールを使用して、エッジケースを特定し、パフォーマンス監査をより効果的に自動化します。
これらのエミュレーション機能は、要素のクリック、フォームの入力、ページの移動など、エージェントがサイトを操作できるようにする他のツールと連携して動作します。
エミュレートできる内容は次のとおりです。
- ビューポート とユーザー エージェント: 特定の画面サイズとデバイス識別子をエミュレートします。
- 位置情報: 位置情報認識 API をテストするために、位置情報の座標をスプーフィングします。
- ネットワークと CPU: ネットワークの状況と CPU の速度を調整して、実際のパフォーマンスの制約をシミュレートします。
- カラーパターン: ライトモードとダークモードを切り替えます。
エミュレーションを使用する際は、次の点に注意してください。
- デバイスのサポート: エージェントは、Puppeteer の
KnownDevicesリストにある任意のデバイスをエミュレートできます。これには、モバイル ビューポートのタッチイベントのシミュレーションが含まれます。 - ブラウザ エンジンの動作: このツールはデバイスの特性をエミュレートしますが、Chromium 以外のブラウザ エンジンや異なるオペレーティング システムをシミュレートすることはありません。エージェントは常に現在のオペレーティング システムの Chrome で実行されます。
ユーザー エミュレーションのユースケース
エージェントに環境をエミュレートして UI を検証するよう指示します。コードを変更するたびに、ブラウザのサイズを手動で変更したり、IP をスプーフィングしたり、ネットワークをスロットリングしたりする必要はありません。
これらのワークフローを使用して、エミュレーションを開発プロセスに統合します。
レスポンシブ デザインを反復する
モバイルとパソコンのフォーム ファクタでは、ナビゲーション パターンが大きく異なることがよくあります。アプリケーションを構築する際に、エージェントに、書き込んだコンポーネントが正しくレンダリングされ、デバイス間で同じコンテンツが提供されることを確認するよう指示できます。
プロンプトの例:
Go to developer.chrome.com. Click the burger menu on mobile, check the top level
items and ensure the same items are available for a desktop device.
エージェントの実行例: エージェントが Chrome ウィンドウを開き、ページに移動してエミュレーションを開始し、両方のビューポートでアイテムを比較します。モバイルビュー（ハンバーガー メニュー）とデスクトップ ビュー（ヘッダー）に想定どおりのリンクが含まれていることを確認します。
ビューポート間のインタラクションを検証する
レイアウトは CSS だけでなく、インタラクション中にも崩れます。静的なスクリーンショットでは、ユーザーが実際に UI を操作したときに発生するバグを見逃すことがよくあります。エージェントに、複数のビューポートで特定のインタラクション フローをテストするタスクを割り当てて、隠れた機能バグを検出できます。
プロンプトの例:
Go to https://developer.chrome.com/ on mobile, tablet and desktop device, type
in a search query but don't submit it and wait for the type-ahead suggestions.
Ensure the Sign in button is visible all the time. Let me know if that's not the
case.
エージェントの実行例: エージェントが検索クエリを入力し、画面のサイズを 3 つのサイズに変更します。この例では、タブレットとモバイルで検索バーがヘッダーの幅全体に広がり、[ログイン] リンクが隠れてしまうことをエージェントが検出しています。
位置情報を認識する機能のプロトタイプを作成する
ユーザーの物理的な位置に依存する API（「近くの店」検索や店舗検索など）をテストするには、通常、センサーを手動でオーバーライドする必要があります。これで、エージェントに特定の地理位置情報をスプーフィングして、フロントエンドとバックエンドのロジックをスムーズに検証するように指示できます。
プロンプトの例:
Go to chrome.dev/devtools-store-locator. Search for Berlin, and confirm there's
a store showing. Confirm there's no store for Washington. Finally, simulate
Paris as location and verify there are stores listed.
エージェントの実行例: エージェントがサイトに移動し、ベルリンを検索してから、特定の緯度と経度の座標を動的に挿入してパリをエミュレートし、[現在地を使用] 機能を使用して、正しい店舗が入力されるようにします。