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

Kayce Basques

Sofia Emelianova

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

Présentation

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

• Remplacer la géolocalisation
• Simulez l'orientation.
• Force Touch.
• Émulez l'état du détecteur d'inactivité.

Point clé : Pour simuler une fenêtre d'affichage d'un appareil mobile et limiter le réseau et le processeur, consultez Mode Appareil.

Ouvrir le panneau "Capteurs"

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

   • Sur 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 des outils de développement.

Remplacer 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 région 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 l'emplacement de l'utilisateur, vous devez probablement vous assurer que le site se comporte correctement dans différentes régions du monde.

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

• Une des villes prédéfinies, comme Tokyo.
• Position personnalisée pour saisir des coordonnées de longitude et de latitude personnalisées.
• Sélectionnez Position indisponible 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, dans la liste Orientation, sélectionnez l'une des options suivantes :

• L'une des orientations prédéfinies, comme Portrait à l'envers.
• Orientation personnalisée : indiquez 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.

Force Touch

Pour tester les événements tactiles sur votre site Web, vous pouvez effectuer un appui prolongé au lieu d'un clic, même si vous effectuez le test sur un appareil sans écran tactile.

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

1. Ouvrez le panneau Capteurs.
2. Dans la liste déroulante Touch (Toucher), sélectionnez Force Touch.
3. Cliquez sur Recharger les outils de développement 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 les outils de développement, vous pouvez émuler les changements d'état inactif pour l'état de l'utilisateur et l'état de l'écran au lieu d'attendre que l'état inactif réel change.

Pour émuler les états inactifs :

1. Ouvrez le panneau Capteurs.

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

   

3. Dans le menu déroulant Émuler 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é

Émuler la simultanéité matérielle

Pour simuler les performances de votre site Web sur des appareils dotés d'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 check_box Concurrence matérielle.
3. Dans la zone de saisie du nombre, saisissez le nombre de cœurs que vous souhaitez émuler.

Attention : Toute valeur supérieure à la valeur par défaut de 12 risque de dégrader les performances.

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

Émuler la charge du processeur

La pression du processeur ou de calcul est un ensemble d'états signalés qui vous donnent une idée de la charge de travail du système de calcul et de sa proximité avec la limite. Ces informations vous permettent d'adapter votre application en temps réel (par exemple, une application de visioconférence ou un jeu vidéo) pour exploiter toute la puissance de traitement disponible tout en maintenant la réactivité du système en adaptant les charges de travail en temps réel.

Le panneau Capteurs vous permet d'émuler les états qui peuvent être signalés par l'API Compute Pressure.

Pour émuler la pression du processeur sur votre site Web :

1. Ouvrez le panneau Capteurs.
2. Près du bas du panneau, recherchez la section Pression du processeur, puis sélectionnez l'un des états de pression lisibles par l'utilisateur : Aucune substitution, Nominal, Correct, Sérieux ou Critique.
3. Dans l'invite en haut des outils de développement, cliquez sur Actualiser les outils de développement.