Mit den Chrome-Entwicklertools für KI-Agenten kann Ihr Agent responsive Layouts überprüfen, standortbezogene APIs testen und verschiedene CPU- oder Netzwerkgeschwindigkeiten simulieren. Mit diesen Tools können Sie Grenzfälle identifizieren und Leistungsprüfungen effektiver automatisieren.
Diese Emulierungsfunktionen funktionieren mit anderen Tools, mit denen Ihr Agent mit Ihrer Website interagieren kann, z. B. durch Klicken auf Elemente, Ausfüllen von Formularen und Navigieren auf Seiten.
Sie können beispielsweise Folgendes emulieren:
- Viewport und User-Agent: Emulieren Sie bestimmte Bildschirmgrößen und Geräte-IDs.
- Standortbestimmung:Mit dieser Funktion können Sie Standortkoordinaten fälschen, um standortbezogene APIs zu testen.
- Netzwerk und CPU:Drosseln Sie die Netzwerkbedingungen und die CPU-Geschwindigkeit, um Leistungsbeschränkungen in der Praxis zu simulieren.
- Farbschema:Sie können zwischen dem hellen und dem dunklen Modus wechseln.
Beachten Sie bei der Verwendung der Emulation Folgendes:
- Geräteunterstützung:Ihr Agent kann jedes Gerät in der Liste von Puppeteer
KnownDevicesemulieren. Dazu gehört auch das Simulieren von Touch-Events für mobile Viewports. - Verhalten der Browser-Engine: Das Tool emuliert zwar Geräteeigenschaften, simuliert aber keine Browser-Engines, die nicht auf Chromium basieren, oder andere Betriebssysteme. Ihr Agent wird immer in Chrome in Ihrem aktuellen Betriebssystem ausgeführt.
Anwendungsfälle für die Nutzeremulation
Weisen Sie Ihren Agent an, Umgebungen zu emulieren und die Benutzeroberfläche für Sie zu überprüfen, anstatt nach jeder Codeänderung Browser manuell zu skalieren, IP-Adressen zu fälschen oder Netzwerke zu drosseln.
Mit diesen Workflows können Sie die Emulation in Ihren Entwicklungsprozess einbinden.
Responsives Design iterieren
Navigationsmuster ändern sich oft drastisch zwischen Mobilgeräten und Computern. Während Sie Ihre Anwendung entwickeln, können Sie Ihren Agenten anweisen, zu prüfen, ob die gerade geschriebenen Komponenten korrekt gerendert werden und auf allen Geräten dieselben Inhalte bereitstellen.
Beispiel für einen Prompt:
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.
Beispiel für die Ausführung eines Agents:Ihr Agent öffnet ein Chrome-Fenster, ruft die Seite auf, startet die Emulation und vergleicht Elemente in beiden Viewports. Es wird bestätigt, dass die mobile Ansicht (Dreistrich-Menü) und die Desktopansicht (Kopfzeile) die erwarteten Links enthalten.
Viewport-übergreifende Interaktionen validieren
Layouts werden nicht nur im CSS, sondern auch bei Interaktionen unterbrochen. Auf statischen Screenshots werden Fehler, die auftreten, wenn Nutzer die Benutzeroberfläche berühren, oft nicht angezeigt. Sie können Ihren Agent damit beauftragen, bestimmte Interaktionsabläufe auf mehreren Viewports zu testen, um verborgene funktionale Fehler zu finden.
Beispiel für einen Prompt:
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.
Beispiel für die Ausführung eines Agents:Ihr Agent gibt eine Suchanfrage ein und ändert die Größe des Bildschirms auf jede der drei Größen. In diesem Beispiel erkennt Ihr Agent, dass sich die Suchleiste auf Tablets und Smartphones über die gesamte Breite des Headers erstreckt und den Link Anmelden verdeckt.
Standortbezogene Funktionen prototypisieren
Wenn Sie APIs testen, die auf dem physischen Standort des Nutzers basieren (z. B. „In meiner Nähe“-Suchanfragen oder Standortfinder), müssen Sie Sensoren in der Regel manuell überschreiben. Sie können Ihren Agent jetzt anweisen, bestimmte geografische Standorte vorzutäuschen, um Ihre Frontend- und Backend-Logik reibungslos zu überprüfen.
Beispiel für einen Prompt:
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.
Beispiel für die Ausführung eines Agents:Ihr Agent ruft die Website auf, sucht nach „Berlin“ und fügt dann dynamisch bestimmte Breiten- und Längengradkoordinaten ein, um Paris zu simulieren. Anschließend interagiert er mit der Funktion Meinen Standort verwenden, um sicherzustellen, dass die richtigen Geschäfte angezeigt werden.