Partager via

Émuler des capteurs d’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 le processeur, 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 sur Échap une ou deux fois pour que le panneau Affichage rapide s’ouvre 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 Affichage rapide en bas de DevTools.

Ouvrez l’outil Capteurs à l’aide du menu Commandes

  1. Selon votre système d’exploitation, appuyez sur la commande suivante pour ouvrir le menu Commande :

    • Sur Windows, Linux ou ChromeOS, Ctrl+Maj+P.
    • Sur MacOS, Commande+Maj+P.

    Utilisation du menu Commandes pour ouvrir l’outil Capteurs

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

    L’outil Capteurs s’ouvre dans l’affichage rapide en 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 pour 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 à son emplacement. Pour accéder à la géolocalisation d’un utilisateur à partir de votre site web, consultez API de géolocalisation, sur MDN.

Si vous créez une interface utilisateur qui change en fonction de l’emplacement de 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 de longitude et de latitude personnalisées.
  • 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 Emplacement

Simuler l’orientation de l’appareil

Les appareils mobiles disposent de capteurs capables de détecter leur orientation physique. Les sites web tels que les jeux web ou les applications de mappage 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 sur 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 :

  • 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.

    Après avoir sélectionné Orientation personnalisée, les champs alpha, bêta et gamma sont activés. Pour comprendre le fonctionnement de ces axes, consultez :

    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 lors d’un clic

Pour tester les événements tactiles sur votre site web, même si vous effectuez des tests 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 sur Échap une ou deux fois pour que le panneau Affichage rapide s’ouvre 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 Affichage rapide en bas de DevTools.

  5. Dans l’outil Capteurs , faites défiler jusqu’au menu déroulant Tactile , puis sélectionnez Forcer l’activation :

    Forcer l’interaction tactile au lieu de cliquer

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

Émuler l’état du détecteur inactif

L’API Détection d’inactivité vous permet de détecter les utilisateurs inactifs et de réagir en cas de changement d’état d’inactivité. Avec DevTools, vous pouvez émuler les changements d’état inactif 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 sur Échap une ou deux fois 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 panneau 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 inactive.

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

    • Aucune é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 les états de l’utilisateur émulé et 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 différents nombres 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 sur Échap une ou deux fois pour que le panneau Affichage rapide s’ouvre 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 Affichage rapide en bas de DevTools.

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

  6. Dans la zone de saisie numérique, entrez le nombre de cœurs que vous souhaitez émuler :

    Activé « Accès concurrentiel matériel » 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 revenir à la valeur par défaut, cliquez sur le bouton Réinitialiser (icône Réinitialiser).

Émuler la pression du processeur

La pression du processeur ou du calcul est un ensemble d’états signalés qui vous donnent une idée de la charge de travail que subit le calcul du système et si elle est proche de la limite. Ces informations vous permettent d’adapter votre application en temps réel, par exemple, la vidéoconférence ou le 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 sur Échap une ou deux fois pour que le panneau Affichage rapide s’ouvre 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 Affichage rapide en 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’utilisateur :

    • Aucun remplacement
    • Nominal
    • Juste
    • Sérieux
    • Critique

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

    Émulation de la pression « sérieuse » du processeur

Voir également

MDN :

Démos:

Emscripten :

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 créée par Kayce Basques et Sofia Emelianova.

Licence Creative Commons Cette œuvre est concédée sous licence creative commons attribution 4.0 international.

  • Last updated on