Les outils pour les développeurs Chrome pour les agents permettent à votre agent de vérifier les mises en page responsives, de tester les API de géolocalisation et de simuler différentes vitesses de processeur ou de réseau. Utilisez ces outils pour identifier les cas extrêmes et automatiser plus efficacement les audits de performances.
Ces fonctionnalités d'émulation fonctionnent avec d'autres outils qui permettent à votre agent d'interagir avec votre site, par exemple en cliquant sur des éléments, en remplissant des formulaires et en parcourant des pages.
Voici quelques exemples de ce que vous pouvez émuler :
- Fenêtre d'affichage et agent utilisateur : émulez des tailles d'écran et des identifiants d'appareil spécifiques.
- Géolocalisation : simulez des coordonnées de localisation pour tester les API de géolocalisation.
- Réseau et processeur : limitez les conditions réseau et la vitesse du processeur pour simuler les contraintes de performances réelles.
- Jeu de couleurs : basculez entre les modes clair et sombre.
Lorsque vous utilisez l'émulation, gardez les points suivants à l'esprit :
- Compatibilité avec les appareils : votre agent peut émuler n'importe quel appareil de la liste Puppeteer's
KnownDevices. Cela inclut la simulation d'événements tactiles pour les fenêtres d'affichage mobiles. - Comportement du moteur de navigateur : bien que l'outil émule les caractéristiques de l'appareil, il ne simule pas les moteurs de navigateur non Chromium ni les différents systèmes d'exploitation. Votre agent s'exécute toujours dans Chrome sur votre système d'exploitation actuel.
Cas d'utilisation de l'émulation utilisateur
Demandez à votre agent d'émuler des environnements et de vérifier l'interface utilisateur à votre place, plutôt que de redimensionner manuellement les navigateurs, de simuler des adresses IP ou de limiter les réseaux après chaque modification de code.
Intégrez l'émulation à votre processus de développement à l'aide de ces workflows.
Itérer sur le responsive design
Les modèles de navigation changent souvent radicalement entre les formats mobiles et ordinateurs. Lorsque vous créez votre application, vous pouvez demander à votre agent de vérifier que les composants qu'il vient d'écrire s'affichent correctement et fournissent le même contenu sur tous les appareils.
Exemple de 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.
Exemple d'exécution de l'agent : votre agent ouvre une fenêtre Chrome, accède à la page, lance l'émulation et compare les éléments dans les deux fenêtres d'affichage. Il confirme que l'affichage sur mobile (menu burger) et l'affichage sur ordinateur (en-tête) contiennent les liens attendus.
Valider les interactions entre les fenêtres d'affichage
Les mises en page sont interrompues lors des interactions, et pas seulement dans le CSS. Les captures d'écran statiques manquent souvent les bugs qui se produisent lorsque les utilisateurs touchent réellement l'interface utilisateur. Vous pouvez demander à votre agent de tester des flux d'interaction spécifiques sur plusieurs fenêtres d'affichage pour détecter les bugs fonctionnels cachés.
Exemple de 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.
Exemple d'exécution de l'agent : votre agent saisit une requête de recherche et redimensionne l'écran à chacune des trois tailles. Dans cet exemple, votre agent détecte que sur une tablette et un mobile, la barre de recherche s'étend sur toute la largeur de l'en-tête, ce qui masque le lien Se connecter.
Prototyper des fonctionnalités de géolocalisation
Le test des API qui dépendent de la localisation physique de l'utilisateur (comme les recherches "À proximité" ou les localisateurs de magasins) nécessite généralement de remplacer manuellement les capteurs. Vous pouvez désormais demander à votre agent de simuler des géolocalisations spécifiques pour vérifier votre logique frontend et backend sans problème.
Exemple de 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.
Exemple d'exécution de l'agent : votre agent accède au site, recherche Berlin, puis injecte dynamiquement des coordonnées de latitude et de longitude spécifiques pour émuler Paris, avant d'interagir avec la fonctionnalité Utiliser ma position afin de s'assurer que les magasins appropriés s'affichent.