Narzędzia deweloperskie w Chrome dla agentów umożliwiają agentowi weryfikowanie elastycznych układów, testowanie interfejsów API uwzględniających lokalizację i symulowanie różnych prędkości procesora lub sieci. Używaj tych narzędzi, aby identyfikować przypadki brzegowe i skuteczniej automatyzować audyty wydajności.
Te funkcje emulacji działają z innymi narzędziami, które umożliwiają agentowi interakcję z Twoją witryną, np. klikanie elementów, wypełnianie formularzy i przeglądanie stron.
Możesz emulować m.in.:
- Obszar widoku i ciąg znaków user agent: emuluj określone rozmiary ekranu i identyfikatory urządzeń.
- Geolokalizacja: fałszowanie współrzędnych lokalizacji w celu testowania interfejsów API korzystających z lokalizacji.
- Sieć i procesor: ogranicz warunki sieciowe i szybkość procesora, aby symulować rzeczywiste ograniczenia wydajności.
- Schemat kolorów: przełączaj się między trybem jasnym i ciemnym.
Podczas korzystania z emulacji pamiętaj o tych kwestiach:
- Obsługa urządzeń: agent może emulować dowolne urządzenie z listy Puppeteer.
KnownDevicesObejmuje to symulowanie zdarzeń dotyku w przypadku obszarów wyświetlania na urządzeniach mobilnych. - Działanie silnika przeglądarki: narzędzie emuluje cechy urządzenia, ale nie symuluje silników przeglądarek innych niż Chromium ani różnych systemów operacyjnych. Agent zawsze działa w Chrome w bieżącym systemie operacyjnym.
Przypadki użycia emulacji użytkownika
Poproś agenta o emulowanie środowisk i weryfikowanie interfejsu użytkownika, zamiast ręcznie zmieniać rozmiar przeglądarek, fałszować adresy IP lub ograniczać przepustowość sieci po każdej zmianie kodu.
Zintegruj emulację z procesem programowania za pomocą tych przepływów pracy.
Ulepszanie elastycznego projektowania stron
Wzorce nawigacji często znacznie się różnią w przypadku urządzeń mobilnych i komputerów. Podczas tworzenia aplikacji możesz poprosić agenta o sprawdzenie, czy napisane przez niego komponenty są prawidłowo renderowane i czy na różnych urządzeniach wyświetlają tę samą treść.
Przykładowy 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.
Przykład działania agenta: agent otwiera okno Chrome, przechodzi do strony, rozpoczyna emulację i porównuje elementy w obu obszarach wyświetlania. Sprawdza, czy widok na urządzeniach mobilnych (menu hamburgerowe) i widok na komputerach (nagłówek) zawierają oczekiwane linki.
Weryfikowanie interakcji w różnych widokach
Układy ulegają zmianie podczas interakcji, a nie tylko w CSS. Statyczne zrzuty ekranu często nie uwzględniają błędów, które występują, gdy użytkownicy dotykają interfejsu. Możesz zlecić agentowi testowanie konkretnych ścieżek interakcji na różnych obszarach wyświetlania, aby wykryć ukryte błędy funkcjonalne.
Przykładowy 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.
Przykład działania agenta: agent wpisuje zapytanie i zmienia rozmiar ekranu na każdy z 3 rozmiarów. W tym przykładzie agent wykrywa, że na tabletach i urządzeniach mobilnych pasek wyszukiwania rozszerza się na całą szerokość nagłówka, zasłaniając link Zaloguj się.
Prototypowanie funkcji opartych na lokalizacji
Testowanie interfejsów API, które korzystają z fizycznej lokalizacji użytkownika (np. wyszukiwania „W pobliżu” lub lokalizatory sklepów), zwykle wymaga ręcznego zastępowania czujników. Teraz możesz poinstruować agenta, aby podszywał się pod określone geolokalizacje, co pozwoli Ci bezproblemowo weryfikować logikę frontendu i backendu.
Przykładowy 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.
Przykład działania agenta: agent przechodzi do witryny, wyszukuje Berlin, a następnie dynamicznie wstawia konkretne współrzędne geograficzne, aby zasymulować Paryż, po czym korzysta z funkcji Użyj mojej lokalizacji, aby wyświetlić prawidłowe sklepy.