Sensors (Capteurs) : émuler les capteurs de l'appareil

Kayce Basques

Sofia Emelianova

Utilisez le panneau Capteurs pour émuler l'entrée des capteurs de n'importe quel appareil.

Présentation

Le panneau Capteurs vous permet d'effectuer les opérations suivantes:

• Ignorer la géolocalisation.
• Simulez l'orientation.
• Forcer le toucher
• Émulez l'état du détecteur d'inactivité.

Ouvrir le panneau "Capteurs"

1. En fonction de votre système d'exploitation, appuyez sur les touches suivantes pour ouvrir le menu de commande:

   • Sous macOS, Command+Maj+P
   • Sur Windows, Linux ou ChromeOS : Ctrl+Maj+P

   

2. Saisissez sensors, sélectionnez Afficher les capteurs, puis appuyez sur Entrée. Le panneau Capteurs s'ouvre en bas de la fenêtre "DevTools".

Ignorer la géolocalisation

De nombreux sites Web exploitent la position des utilisateurs pour leur offrir une expérience plus pertinente. Par exemple, un site Web météo peut afficher les prévisions locales pour la zone d'un utilisateur une fois que celui-ci a autorisé le site Web à accéder à sa position.

Si vous créez une UI qui change en fonction de la localisation de l'utilisateur, vous voudrez probablement vous assurer que le site se comporte correctement dans différents pays du monde.

Pour remplacer votre géolocalisation, ouvrez le panneau Capteurs, puis sélectionnez l'une des options suivantes dans la liste Géolocalisation:

• L'une des villes prédéfinies, comme Tokyo.
• Emplacement personnalisé pour saisir des coordonnées de latitude et de longitude personnalisées.
• Sélectionnez Position non disponible pour voir comment votre site se comporte lorsque la position de l'utilisateur n'est pas disponible.

Simuler l'orientation de l'appareil

Pour simuler différentes orientations de l'appareil, ouvrez le panneau Capteurs, puis sélectionnez l'une des options suivantes dans la liste Orientation:

• L'une des orientations prédéfinies, comme Portrait à l'envers.
• Orientation personnalisée pour indiquer votre propre orientation exacte.

Après avoir sélectionné Orientation personnalisée, les champs alpha, bêta et gamma sont activés. Consultez Alpha, Bêta et Gamma pour comprendre le fonctionnement de ces axes.

Vous pouvez également définir une orientation personnalisée en faisant glisser le modèle d'orientation. Maintenez la touche Maj enfoncée avant de faire glisser l'élément pour le faire pivoter autour de l'axe alpha.

Forcer le mode tactile

Pour tester les événements tactiles sur votre site Web, vous pouvez forcer l'utilisation d'un geste tactile au lieu d'un clic, même si vous effectuez des tests sur un appareil sans écran tactile.

Pour déclencher des événements tactiles avec votre curseur:

1. Ouvrez le panneau Capteurs.
2. Dans la liste déroulante Toucher, sélectionnez Forcer le toucher.
3. Cliquez sur Actualiser les outils pour les développeurs dans l'invite en haut de la page.

Émuler l'état du détecteur d'inactivité

L'API Idle Detection vous permet de détecter les utilisateurs inactifs et de réagir aux changements d'état d'inactivité. Avec DevTools, vous pouvez émuler les changements d'état d'inactivité à la fois pour l'état de l'utilisateur et l'état de l'écran au lieu d'attendre que l'état d'inactivité réel change.

Pour émuler les états d'inactivité:

1. Ouvrez le panneau Capteurs. Pour ce tutoriel, vous pouvez l'essayer sur cette page de démonstration.

2. Cochez la case à côté de Éphémère et, dans l'invite, accordez à la page de démonstration l'autorisation de détection d'inactivité. Ensuite, actualisez la page.

   

3. Dans le menu déroulant Emuler l'état du détecteur d'inactivité, sélectionnez l'une des options suivantes:

   • Aucune émulation de l'état inactif
   • Utilisateur actif, écran déverrouillé
   • Utilisateur actif, écran verrouillé
   • Utilisateur inactif, écran déverrouillé
   • Utilisateur inactif, écran verrouillé

Dans cet exemple, DevTools émule un état Utilisateur inactif, écran verrouillé. Dans ce cas, la page de démonstration lance le compte à rebours de 10 secondes pour effacer le canevas.

Émuler la simultanéité matérielle

Pour émuler les performances de votre site Web sur des appareils avec un nombre différent de cœurs de processeur, vous pouvez remplacer la valeur signalée par la propriété navigator.hardwareConcurrency. Certaines applications utilisent cette propriété pour contrôler le degré de parallélisme de leur application, par exemple pour contrôler la taille du pool Emscripten pthread.

Pour émuler la simultanéité matérielle:

1. Ouvrez le panneau Capteurs.
2. En bas du panneau, recherchez et activez la check_box Concurrency matérielle.
3. Dans le champ de saisie numérique, saisissez le nombre de cœurs que vous souhaitez émuler.

Pour rétablir la valeur par défaut, cliquez sur le bouton Réinitialiser Annuler.