エージェント用の Chrome DevTools を使用すると、エージェントはレスポンシブ レイアウトの検証、位置情報認識 API のテスト、さまざまな CPU 速度やネットワーク速度のシミュレーションを行うことができます。これらのツールを使用して、エッジケースを特定し、パフォーマンス監査をより効果的に自動化できます。
これらのエミュレーション機能は、要素のクリック、フォームへの入力、ページの移動など、エージェントがサイトとやり取りできるようにする他のツールと連携して動作します。
エミュレートできる内容は次のとおりです。
- ビューポート とユーザー エージェント: 特定の画面サイズとデバイス識別子をエミュレートします。
- 位置情報: 位置情報の座標をスプーフィングして、位置情報認識 API をテストします。
- ネットワークと CPU: ネットワーク条件と CPU 速度を調整して、実際のパフォーマンス制約をシミュレートします。
- カラーパターン: ライトモードとダークモードを切り替えます。
エミュレーションを使用する場合は、次の点に注意してください。
- デバイスのサポート: エージェントは、Puppeteer's
KnownDevicesリストにある任意のデバイスをエミュレートできます。 これには、モバイル ビューポートのタッチイベントのシミュレーションが含まれます。 - ブラウザ エンジンの動作: このツールはデバイスの特性をエミュレートしますが、 非 Chromium ブラウザ エンジンやさまざまなオペレーティング システムはシミュレートしません。エージェントは常に、現在のオペレーティング システムの Chrome で実行されます。
ユーザー エミュレーションのユースケース
コードを変更するたびにブラウザのサイズを手動で変更したり、IP をスプーフィングしたり、ネットワークを調整したりするのではなく、エージェントに環境をエミュレートして UI を検証するように指示します。
次のワークフローを使用して、エミュレーションを開発プロセスに統合します。
レスポンシブ デザインを反復する
ナビゲーション パターンは、モバイルとパソコンのフォーム ファクタで大きく異なることがよくあります。アプリケーションを構築する際に、エージェントに、記述したコンポーネントが正しくレンダリングされ、デバイス間で同じコンテンツが提供されることを確認するように指示できます。
プロンプトの例:
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.
エージェントの実行例: エージェントはサイトに移動してベルリンを検索し、特定の緯度と経度の座標を動的に挿入してパリをエミュレートします。次に、[現在地を使用] 機能を使用して、正しい店舗が表示されることを確認します。