Émuler les capteurs de l’appareil

Utilisez l’outil Capteurs pour émuler l’entrée du capteur de n’importe quel appareil.

L’outil Capteurs

Vue d'ensemble

L’outil Capteurs vous permet d’effectuer les opérations suivantes :

Pour simuler une fenêtre d’affichage d’un appareil mobile et limiter le réseau et l’UC, consultez Émuler des appareils mobiles (émulation d’appareil).

Ouvrir l’outil Capteurs

  1. Ouvrez une page web, telle que la page de démonstration de l’application TODO , dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

    DevTools s’ouvre.

  3. Appuyez une ou deux fois sur Échap pour ouvrir le panneau Affichage rapide en bas de DevTools.

  4. Dans le panneau Affichage rapide , cliquez sur le bouton Autres outils , puis sélectionnez Capteurs.

    L’outil Capteurs s’ouvre dans le panneau Aperçu rapide au bas de DevTools.

Ouvrir l’outil Capteurs à l’aide du menu Commande

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

    • Sur Windows, Linux ou ChromeOS, Ctrl+Maj+P.
    • Sur MacOS, appuyez sur Cmd+Maj+P.

    Utilisation du menu de commande pour ouvrir l’outil Capteurs

  2. Tapez capteurs, sélectionnez Afficher les capteurs, puis appuyez sur Entrée.

    L’outil Capteurs s’ouvre en mode Aperçu rapide au bas de DevTools.

Remplacer la géolocalisation

De nombreux sites Web tirent parti de l’emplacement de l’utilisateur afin de fournir une expérience plus pertinente à leurs utilisateurs. Par exemple, un site web météo peut afficher les prévisions locales pour la zone d’un utilisateur, une fois que l’utilisateur a accordé au site web l’autorisation d’accéder à sa position. Pour accéder à la géolocalisation d’un utilisateur à partir de votre site web, consultez API géolocalisation, au niveau MDN.

Si vous créez une interface utilisateur qui change en fonction de l’endroit où se trouve l’utilisateur, vous souhaitez probablement vous assurer que le site se comporte correctement à différents endroits dans le monde.

Pour remplacer votre géolocalisation, ouvrez l’outil Capteurs et, dans la liste Emplacement , sélectionnez l’une des options suivantes :

  • Une des villes prédéfinies, comme Tokyo.
  • Autre pour entrer des coordonnées personnalisées de longitude et de latitude.
  • Sélectionnez Emplacement non disponible pour voir comment votre site se comporte lorsque l’emplacement de l’utilisateur n’est pas disponible.

Sélection de Tokyo dans la liste des emplacements

Simuler l’orientation de l’appareil

Les appareils mobiles ont des capteurs qui peuvent détecter leur orientation physique. Les sites web, tels que les jeux web ou les applications de cartographie, peuvent utiliser l’orientation de l’appareil pour offrir une meilleure expérience. Pour en savoir plus sur la détection de l’orientation de l’appareil, consultez Événements d’orientation de l’appareil, au niveau MDN.

Si vous créez une interface utilisateur qui change en fonction de l’orientation de l’appareil de l’utilisateur, vous devez tester votre interface utilisateur sous différentes orientations d’appareil.

Pour simuler différentes orientations d’appareil, ouvrez l’outil Capteurs, puis, dans la liste Orientation , sélectionnez l’une des options suivantes :

  • L’une des orientations prédéfinies, comme Portrait à l’envers :

    Sélection de « Portrait à l’envers » dans la liste « Orientation »

  • Orientation personnalisée, pour fournir votre propre orientation exacte.

    Une fois l’orientation personnalisée sélectionnée, les champs alpha, bêta et gamma sont activés. Pour comprendre le fonctionnement de ces axes, voir :

    Après avoir sélectionné Orientation personnalisée, 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 pour faire pivoter le long de l’axe alpha :

    Modèle d’orientation

Simuler des événements tactiles en cliquant sur

Pour tester les événements tactiles sur votre site web, même si vous testez sur un appareil sans écran tactile :

  1. Ouvrez une page web, telle que la page de démonstration de l’application TODO , dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

    DevTools s’ouvre.

  3. Appuyez une ou deux fois sur Échap pour ouvrir le panneau Affichage rapide en bas de DevTools.

  4. Dans le panneau Affichage rapide , cliquez sur le bouton Autres outils , puis sélectionnez Capteurs.

    L’outil Capteurs s’ouvre dans le panneau Aperçu rapide au bas de DevTools.

  5. Dans l’outil Capteurs , faites défiler vers le bas jusqu’au menu déroulant Tactile , puis sélectionnez Force activée :

    Forcer l’interaction tactile au lieu du clic

  6. Cliquez sur le bouton Recharger DevTools en haut de DevTools.

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

L’API de détection d’inactivité vous permet de détecter les utilisateurs inactifs et de réagir aux modifications d’état inactif. Avec DevTools, vous pouvez émuler les changements d’état d’inactivité pour l’état utilisateur et l’état de l’écran au lieu d’attendre que l’état d’inactivité réel change.

Pour émuler les états inactifs :

  1. Ouvrez une page web, telle que la démonstration de détection d’inactivité, dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur la page, puis sélectionnez Inspecter.

    DevTools s’ouvre.

  3. Appuyez une ou deux fois sur Échap pour que l’Affichage rapide s’ouvre en bas de DevTools.

  4. Dans la barre d’outils Affichage rapide , cliquez sur le bouton Autres outils , puis sélectionnez Capteurs.

    L’outil Capteurs s’ouvre dans le volet Affichage rapide .

  5. Dans la page de démonstration, cliquez sur le bouton Démarrer la détection de l’état d’inactivité .

    La première fois seulement, une boîte de dialogue Autoriser s’ouvre.

  6. Cliquez sur le bouton Autoriser .

    La page de démonstration reçoit l’autorisation de détection d’inactivité.

  7. Dans DevTools, dans l’outil Capteurs , faites défiler vers le bas jusqu’à la liste déroulante Émuler l’état du détecteur de ralenti , puis sélectionnez une option :

    • Pas d’émulation inactive
    • Utilisateur actif, écran déverrouillé
    • Utilisateur actif, écran verrouillé
    • Utilisateur inactif, écran déverrouillé
    • Utilisateur inactif, écran verrouillé

    La page de démonstration affiche l’utilisateur émulé et les états de l’écran :

    Sélection d’un état inactif et verrouillé sur une page de démonstration

Voir aussi :

Émuler la concurrence 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 l’accès concurrentiel matériel :

  1. Ouvrez une page web, telle que la page de démonstration de l’application TODO , dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

    DevTools s’ouvre.

  3. Appuyez une ou deux fois sur Échap pour ouvrir le panneau Affichage rapide en bas de DevTools.

  4. Dans le panneau Affichage rapide , cliquez sur le bouton Autres outils , puis sélectionnez Capteurs.

    L’outil Capteurs s’ouvre dans le panneau Aperçu rapide au bas de DevTools.

  5. Dans l’outil Capteurs , faites défiler vers le bas jusqu’à la case à cocher Concurrence matérielle , puis sélectionnez-la.

  6. Dans la zone d’entrée du nombre, entrez le nombre de cœurs que vous souhaitez émuler :

    Activation de « Concurrence matérielle » avec le nombre de cœurs défini sur 10

    Attention : le dépassement de la valeur par défaut peut dégrader les performances.

Pour rétablir la valeur par défaut, cliquez sur le bouton Réinitialiser (icône Réinitialiser).

Émuler la pression du processeur

La pression sur le processeur ou sur le calcul est un ensemble d’états signalés qui vous donnent une idée de la charge de travail subie par le calcul du système et indique si elle est proche de la limite. Ces informations vous permettent d’adapter votre application temps réel, par exemple, visioconférence ou jeu vidéo, pour tirer parti de 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.

L’outil 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 une page web, telle que la page de démonstration de l’application TODO , dans une nouvelle fenêtre ou un nouvel onglet.

  2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter.

    DevTools s’ouvre.

  3. Appuyez une ou deux fois sur Échap pour ouvrir le panneau Affichage rapide en bas de DevTools.

  4. Dans le panneau Affichage rapide , cliquez sur le bouton Autres outils , puis sélectionnez Capteurs.

    L’outil Capteurs s’ouvre dans le panneau Aperçu rapide au bas de DevTools.

  5. Dans l’outil Capteurs , faites défiler jusqu’à la section Pression du processeur , puis sélectionnez l’un des états de pression lisibles par l’homme :

    • Pas de remplacement
    • Valeur nominale
    • Équitable
    • Sérieux
    • Critique

  6. En haut de DevTools, cliquez sur le bouton Recharger DevTools :

    Émulation d’une pression CPU « grave »

Voir également

MDN :

Démonstrations :

Manuscrit :

Remarque

Certaines parties de cette page sont des modifications fondées sur le travail créé et partagé par Google et utilisées conformément aux conditions décrites dans la licence internationale 4,0 d’attribution créative. La page originale se trouve ici et est écrite par Kayce Basques et Sofia Emelianova.

Creative Commons License Ce travail est sous licence Creative Commons Attribution 4.0 International.

  • Dernière mise à jour :