Simuler des appareils mobiles avec le mode Appareil

Utilisez le mode Appareil pour avoir une idée de l'apparence et des performances de votre page sur un appareil mobile.

Présentation

Le mode Appareil désigne l'ensemble des fonctionnalités des outils pour les développeurs Chrome qui vous permet de simuler des appareils mobiles. Voici certaines des fonctionnalités incluses :

• Simuler un viewport mobile
• Limiter la consommation de ressources processeur
• Limiter la bande passante du réseau
• De plus, dans le panneau Capteurs :
  • Simuler la géolocalisation
  • Définir l'orientation

Limites

Considérez le mode Appareil comme une approximation du premier ordre de l'apparence et de l'expérience de votre page sur un appareil mobile. Avec le mode Appareil, vous n'exécutez pas réellement votre code sur un appareil mobile. Vous simulez l'expérience utilisateur mobile depuis votre ordinateur portable ou de bureau.

Il existe certains aspects des appareils mobiles que les outils de développement ne pourront jamais simuler. Par exemple, l'architecture des processeurs mobiles est très différente de celle des processeurs d'ordinateurs portables ou de bureau. En cas de doute, le mieux est d'exécuter votre page sur un appareil mobile. Utilisez le débogage à distance pour afficher, modifier, déboguer et profiler le code d'une page depuis votre ordinateur portable ou de bureau pendant qu'il s'exécute sur un appareil mobile.

Ouvrir la barre d'outils de l'appareil

Pour ouvrir la barre d'outils de l'appareil, procédez comme suit :

1. Ouvrez les outils de développement.
2. Cliquez sur Appareils > Afficher/Masquer la barre d'outils de l'appareil dans la barre d'action en haut de l'écran.

Simuler une fenêtre d'affichage mobile

Par défaut, la barre d'outils de l'appareil s'ouvre dans la fenêtre d'affichage avec Dimensions défini sur Responsive. Le menu déroulant Dimensions vous permet de simuler les dimensions d'un appareil mobile spécifique.

Mode Fenêtre d'affichage responsive

Faites glisser les poignées pour redimensionner la fenêtre d'affichage selon les dimensions souhaitées. Vous pouvez également saisir des valeurs spécifiques dans les champs "Largeur" et "Hauteur". Dans cet exemple, la largeur est définie sur 480 et la hauteur sur 415.

Vous pouvez également utiliser la barre de préréglages de largeur pour définir la largeur en un clic sur l'une des options suivantes :

Mobile S	Mobile M	Mobile L	Tablette	Ordinateur portable	Ordinateur portable L	4K
320 px	375 px	425 px	768 px	1 024 px	1440 px	2 560 px

Afficher les requêtes média

Pour afficher les points d'arrêt des requêtes média au-dessus de votre fenêtre d'affichage, cliquez sur Autres options > Afficher les requêtes média.

La console d'outils de développement affiche désormais deux barres supplémentaires au-dessus de la fenêtre d'affichage :

• Barre bleue avec max-width points d'arrêt.
• Barre orange avec min-width points d'arrêt.

Cliquez entre les points d'arrêt pour modifier la largeur de la fenêtre d'affichage afin de déclencher le point d'arrêt.

Pour trouver la déclaration @media correspondante, effectuez un clic droit entre les points d'arrêt et sélectionnez Afficher dans le code source. Les outils de développement ouvrent le panneau Sources à la ligne correspondante dans l'Éditeur.

Définir le rapport de pixels de l'appareil

Le ratio de pixels de l'appareil (DPR) correspond au rapport entre les pixels physiques sur l'écran matériel et les pixels logiques (CSS). En d'autres termes, le DPR indique à Chrome le nombre de pixels d'écran à utiliser pour dessiner un pixel CSS. Chrome utilise la valeur DPR lors du dessin sur des écrans HiDPI (High Dots Per Inch).

Pour définir une valeur de DPR :

1. Cliquez sur Autres options  > Ajouter le ratio de pixels de l'appareil.

   

2. Dans la barre d'action en haut de la fenêtre d'affichage, sélectionnez une valeur de DPR dans le nouveau menu déroulant DPR.

   

Définir le type d'appareil

Utilisez la liste Type d'appareil pour simuler un appareil mobile ou un ordinateur.

Si la liste ne s'affiche pas dans la barre d'action en haut de l'écran, sélectionnez Plus d'options  > Ajouter un type d'appareil.

Le tableau suivant décrit les différences entre les options. La méthode de rendu indique si Chrome affiche la page en tant que fenêtre d'affichage mobile ou pour ordinateur. L'icône de curseur fait référence au type de curseur qui s'affiche lorsque vous pointez sur la page. Événements déclenchés indique si la page déclenche des événements touch ou click lorsque vous interagissez avec elle.

Option	Méthode de rendu	Icône de curseur	Événements déclenchés
Mobile	Mobile	Cercle	tactile
Mobile (sans écran tactile)	Mobile	Normale	clic
Ordinateur	Ordinateur	Normale	clic
Ordinateur (tactile)	Ordinateur	Cercle	tactile

Mode spécifique à l'appareil

Pour simuler les dimensions d'un appareil mobile spécifique, sélectionnez-le dans la liste Dimensions.

Pour en savoir plus, consultez Ajouter un appareil mobile personnalisé.

Faites pivoter la fenêtre d'affichage en mode paysage.

Cliquez sur screen_rotation Rotate (Faire pivoter) pour faire pivoter la fenêtre d'affichage en mode Paysage.

Notez que le bouton Rotation disparaît si la barre d'outils de l'appareil est étroite.

Consultez également Définir l'orientation.

Activer/Désactiver le mode double écran

Certains appareils, comme le Surface Duo, sont dotés de deux écrans et de deux modes d'utilisation : avec un ou deux écrans actifs.

Pour basculer entre le mode double écran et le mode écran unique, cliquez sur devices_fold Activer/Désactiver le mode double écran dans la barre d'outils.

Définir la position de l'appareil

Certains appareils, comme l'Asus Zenbook Fold, sont dotés d'écrans pliables. Ces écrans ont une posture : continue ou pliée. La posture continue fait référence à une position "à plat", tandis que la posture pliée forme un angle entre les sections de l'écran.

Pour définir la position de l'appareil, sélectionnez Continu ou Plié dans le menu déroulant correspondant de la barre d'outils.

Afficher le cadre de l'appareil

Lorsque vous simulez les dimensions d'un appareil mobile spécifique, comme un Nest Hub, sélectionnez Plus d'options  > Afficher le cadre de l'appareil pour afficher le cadre physique de l'appareil autour de la fenêtre d'affichage.

Dans cet exemple, les outils de développement affichent le frame pour Nest Hub.

Ajouter un appareil mobile personnalisé

Pour ajouter un appareil personnalisé :

1. Cliquez sur la liste Appareil, puis sélectionnez Modifier.

   

2. Dans l'onglet Paramètres Paramètres > Appareils, choisissez un appareil dans la liste des appareils compatibles ou cliquez sur Ajouter un appareil personnalisé pour ajouter le vôtre.

3. Si vous ajoutez votre propre appareil, saisissez son nom, sa largeur et sa hauteur, puis cliquez sur Ajouter.

   

   Les champs Ratio de pixels de l'appareil, Chaîne de l'agent utilisateur et Type d'appareil sont facultatifs. Le champ "Type d'appareil" est la liste définie sur Mobile par défaut.

4. De retour dans la fenêtre d'affichage, sélectionnez l'appareil que vous venez d'ajouter dans la liste Dimensions.

Afficher les règles

Cliquez sur Plus d'options  > Afficher les règles pour afficher les règles. L'unité de mesure des règles est le pixel.

Les outils de développement affichent des règles en haut et à gauche de la fenêtre d'affichage.

Cliquez sur les règles à des repères spécifiques pour définir la largeur et la hauteur de la fenêtre d'affichage.

Zoomer sur la fenêtre d'affichage

Utilisez la liste Zoom pour faire un zoom avant ou arrière.

Faire une capture d'écran

Pour effectuer une capture d'écran de ce qui s'affiche dans la fenêtre d'affichage, cliquez sur Plus d'options > Effectuer une capture d'écran.

Pour capturer une capture d'écran de la page entière, y compris le contenu qui n'est pas visible dans la fenêtre d'affichage, sélectionnez Effectuer une capture d'écran en taille réelle dans le même menu.

Pour inclure un cadre d'appareil lorsque vous capturez une capture d'écran en mode spécifique à l'appareil, commencez par Afficher le cadre de l'appareil, puis cliquez sur Effectuer une capture d'écran comme indiqué précédemment.

Pour découvrir d'autres méthodes de capture d'écran avec les outils de développement, consultez 4 façons de capturer des captures d'écran avec les outils de développement.

Limiter le réseau et le processeur

Pour limiter à la fois le réseau et le processeur, sélectionnez Mobile milieu de gamme ou Mobile bas de gamme dans la liste Limiter.

Mobile milieu de gamme simule une connexion 3G rapide et limite votre processeur pour qu'il soit quatre fois plus lent que la normale. Mobile bas de gamme simule une connexion 3G lente et limite votre processeur pour qu'il soit six fois plus lent que la normale. N'oubliez pas que la limitation est relative à la capacité normale de votre ordinateur portable ou de bureau.

Notez que la liste Throttle sera masquée si votre barre d'outils de l'appareil est étroite.

Limiter la consommation de ressources processeur uniquement

Pour limiter uniquement le processeur et non le réseau, accédez au panneau Performances, cliquez sur Paramètres de capture , puis sélectionnez Ralentissement x4, Ralentissement x6 ou Ralentissement x20 dans la liste CPU.

Limiter uniquement la bande passante réseau

Pour limiter uniquement le réseau et non le processeur, accédez au panneau Réseau, puis sélectionnez 3G rapide ou 3G lente dans la liste Limiter.

Vous pouvez également appuyer sur Cmd+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux, ChromeOS) pour ouvrir le menu de commandes, saisir 3G, puis sélectionner Activer la limitation de débit 3G rapide ou Activer la limitation de débit 3G lente.

Vous pouvez également définir la limitation de bande passante réseau à partir du panneau Performances. Cliquez sur Paramètres de capture , puis sélectionnez 3G rapide ou 3G lente dans la liste Réseau.

Émuler des capteurs

Utilisez le panneau Capteurs pour remplacer la géolocalisation, simuler l'orientation de l'appareil, forcer le contact et émuler l'état inactif.

Les sections suivantes vous expliquent rapidement comment remplacer la géolocalisation et définir l'orientation de l'appareil. Pour obtenir la liste complète des fonctionnalités, consultez Émuler les capteurs de l'appareil.

Remplacer la géolocalisation

Pour ouvrir l'interface utilisateur de remplacement de la géolocalisation, cliquez sur Personnaliser et contrôler les outils de développement , puis sélectionnez Plus d'outils > Capteurs.

Vous pouvez également appuyer sur Cmd+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux, ChromeOS) pour ouvrir le menu de commandes, saisir Sensors, puis sélectionner Afficher les capteurs.

Sélectionnez l'un des préréglages de la liste Position, ou sélectionnez Autre… pour saisir vos propres coordonnées, ou sélectionnez Position non disponible pour tester le comportement de votre page lorsque la géolocalisation est en état d'erreur.

Définir l'orientation

Pour ouvrir l'UI d'orientation, cliquez sur Personnaliser et contrôler les outils de développement , puis sélectionnez Plus d'outils > Capteurs.

Vous pouvez également appuyer sur Cmd+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux, ChromeOS) pour ouvrir le menu de commandes, saisir Sensors, puis sélectionner Afficher les capteurs.

Sélectionnez l'un des préréglages de la liste Orientation ou Orientation personnalisée pour définir vos propres valeurs alpha, bêta et gamma.