Les outils de développement Chrome pour les agents permettent à votre agent de vérifier les mises en page responsives, de tester les API de localisation 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 : usurpez les coordonnées de localisation pour tester les API basées sur la localisation.
- 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 le mode clair et le mode sombre.
Lorsque vous utilisez l'émulation, tenez compte des points suivants :
- Compatibilité des appareils : votre agent peut émuler n'importe quel appareil de la liste
KnownDevicesde Puppeteer. 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 des appareils, 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 d'utilisateur
Demandez à votre agent d'émuler des environnements et de vérifier l'UI pour vous, plutôt que de redimensionner manuellement les navigateurs, de simuler des adresses IP ou de limiter le débit des réseaux après chaque modification du code.
Intégrez l'émulation à votre processus de développement grâce à ces workflows.
Itérer sur le responsive design
Les schémas de navigation changent souvent radicalement entre les facteurs de forme mobile et ordinateur. Lorsque vous développez 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 requête :
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 d'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 la vue mobile (menu hamburger) et la vue pour ordinateur (en-tête) contiennent les liens attendus.
Valider les interactions entre les points de vue
Les mises en page se cassent lors des interactions, et pas seulement dans le CSS. Les captures d'écran statiques passent souvent à côté des bugs qui se produisent lorsque les utilisateurs touchent l'UI. 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 requête :
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 d'un 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 tablette et mobile, la barre de recherche s'étend pour remplir toute la largeur de l'en-tête, masquant le lien Se connecter.
Prototyper des fonctionnalités de localisation
Pour tester les API qui s'appuient sur la position géographique de l'utilisateur (comme les recherches "À proximité" ou les localisateurs de magasins), vous devez généralement remplacer manuellement les capteurs. Vous pouvez désormais demander à votre agent d'usurper des géolocalisations spécifiques pour vérifier facilement votre logique de frontend et de backend.
Exemple de requête :
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 simuler Paris, avant d'interagir avec la fonctionnalité Utiliser ma position pour s'assurer que les bons magasins s'affichent.