Utilisez le mode Appareil pour estimer l'apparence et les performances de votre page sur un appareil mobile.
Présentation
Le mode Appareil est le nom d'un ensemble de fonctionnalités des outils pour les développeurs Chrome qui vous aident à simuler des appareils mobiles. Voici certaines des fonctionnalités incluses :
- Simuler une fenêtre d'affichage pour mobile
- Limiter le processeur
- Limitation du réseau
- De plus, dans le panneau Sensors (Capteurs) :
Limites
Considérez le mode appareil comme une approximation de premier ordre de l'apparence 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 sur votre ordinateur portable ou de bureau.
Les outils de développement ne pourront jamais simuler certains aspects des appareils mobiles. Par exemple, l'architecture des processeurs mobiles est très différente de celle des processeurs pour ordinateurs portables ou de bureau. En cas de doute, la meilleure solution consiste à afficher votre page sur un appareil mobile. Utilisez le débogage à distance pour afficher, modifier, déboguer et profiler le code d'une page à partir de votre ordinateur portable ou de bureau lorsqu'elle 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:
- Ouvrez les outils de développement.
- Cliquez sur Appareils Activer/Désactiver la barre d'outils des appareils située dans la barre d'action en haut de l'écran.
Simuler une fenêtre d'affichage pour mobile
Par défaut, la barre d'outils de l'appareil s'ouvre dans la fenêtre d'affichage avec le paramètre 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 aussi saisir des valeurs
spécifiques dans les champs de largeur et de 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 la largeur pour définir la largeur en cliquant sur l'une des options suivantes:
| Mobile S | Mobile M | Mobile L | Tablette | Ordinateur portable | Ordinateur portable L | 4K |
|---|---|---|---|---|---|---|
| 320px | 375px | 425px | 768px | 1024px | 1440px | 2560px |
Afficher les requêtes média
Pour afficher les points d'arrêt des requêtes média au-dessus de la fenêtre d'affichage, cliquez sur 
Autres options > Afficher les requêtes média.
Les outils de développement affichent désormais deux barres supplémentaires au-dessus de la fenêtre d'affichage:
- Barre bleue avec
max-widthpoints d'arrêt - Barre orange avec
min-widthpoints d'arrêt
Cliquez entre les points d'arrêt pour modifier la largeur de la fenêtre d'affichage afin que le point d'arrêt se déclenche.
Pour trouver la déclaration @media correspondante, effectuez un clic droit entre les points d'arrêt, puis sélectionnez Reveal in source code (Afficher dans le code source). Les outils de développement ouvrent le panneau Sources au niveau de la ligne correspondante dans l'éditeur.
Définir le rapport de pixels de l'appareil
Le rapport de pixels de l'appareil (DPR) correspond au ratio entre les pixels physiques sur l'écran matériel et les pixels logiques (CSS). En d'autres termes, elle 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:
Cliquez sur Plus d'options
> Ajouter le ratio de pixels de l'appareil.
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 ces options. La méthode d'affichage indique si Chrome affiche la page sous la forme d'une fenêtre d'affichage sur mobile ou ordinateur. L'icône de curseur fait référence au type de curseur qui s'affiche lorsque vous pointez sur la page. Les événements déclenchés indiquent si la page déclenche des événements touch ou click lorsque vous interagissez avec elle.
| Option | Méthode d'affichage | Icône de curseur | Événements déclenchés |
|---|---|---|---|
| Mobile | Mobile | Cercle | tactile |
| Mobile (sans contact) | Mobile | Normal | click |
| Ordinateur | Ordinateur | Normal | click |
| 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é.
Faire pivoter la fenêtre d'affichage en mode paysage
Cliquez sur screen_rotation Faire pivoter pour faire pivoter la fenêtre d'affichage en mode paysage.
Notez que le bouton Faire pivoter 
disparaît si la barre d'outils de l'appareil est étroite.
Consultez également la section Définir l'orientation.
Activer/Désactiver le mode Dual Screen
Certains appareils, comme le Surface Duo, proposent deux écrans et deux façons de les utiliser: avec un écran actif ou les deux.
Pour basculer entre l'affichage double écran et le mode écran unique, cliquez sur devices_fold, puis sur 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 équipés d'écrans pliables. Ces écrans ont une position: continu ou plié. La position continue correspond à une position "plate", tandis que le pliage forme un angle entre les différentes 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 de l'appareil physique autour de la fenêtre d'affichage.
Dans cet exemple, les outils de développement affichent le cadre de Nest Hub.
Ajouter un appareil mobile personnalisé
Pour ajouter un appareil personnalisé:
Cliquez sur la liste Appareil, puis sélectionnez Modifier.
Dans l'onglet Paramètres settings > Appareils, sélectionnez un appareil dans la liste des appareils compatibles ou cliquez sur Ajouter un appareil personnalisé pour ajouter le vôtre.
Si vous ajoutez les vôtres, saisissez un nom, une largeur et une hauteur pour l'appareil, puis cliquez sur Ajouter.
Les champs Ratio de pixels de l'appareil, Chaîne user-agent et Type d'appareil sont facultatifs. Le champ du type d'appareil correspond à la liste définie par défaut sur Mobile.
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 taille 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 au niveau de marques spécifiques pour définir la largeur et la hauteur de la fenêtre d'affichage.
Zoomer dans la fenêtre d'affichage
La liste Zoom vous permet de faire un zoom avant ou arrière.
Faire une capture d'écran
Pour faire une capture d'écran de ce que vous voyez dans la fenêtre d'affichage, cliquez sur 
Plus d'options > Faire une capture d'écran.
Pour faire 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 Faire une capture d'écran en taille réelle dans le même menu.
Limiter le réseau et le processeur
Pour limiter à la fois le réseau et le processeur, sélectionnez Mobile de milieu de gamme ou Mobile de bas de gamme dans la liste Limitation.
Le mobile de milieu de gamme simule une connexion 3G rapide et limite la capacité du processeur, qui est alors quatre fois plus lent que d'habitude. Le mobile d'entrée de gamme simule une connexion 3G lente et ralentit votre processeur 6 fois par rapport à la normale. N'oubliez pas que la limitation dépend des capacités normales de votre ordinateur portable ou de bureau.
Notez que la liste des limitations est masquée si la barre d'outils de l'appareil est étroite.
Limiter uniquement le processeur
Pour limiter uniquement le processeur et non le réseau, accédez au panneau Performance, cliquez sur Capture Settings (Paramètres de capture) 
, puis sélectionnez x4x Ralent (Ralentissement x4), 6x Ralenty (Ralentissement x6) ou 20x Ralenty (Ralentissement x20) dans la liste CPU (Processeur).
Limiter uniquement le réseau
Pour limiter uniquement le réseau et non le processeur, accédez au panneau Network (Réseau) et sélectionnez Fast 3G (3G rapide) ou Slow 3G (3G lente) dans la liste Throttle (Throttle).
Vous pouvez également appuyer sur Commande+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux, ChromeOS) pour ouvrir le menu de commandes, saisir 3G, puis sélectionner Activer la limitation 3G rapide ou Activer la limitation 3G lente.
Vous pouvez également définir la limitation de bande passante réseau à partir du panneau Performances. Cliquez sur Capture Settings (Paramètres de capture) 
, puis sélectionnez Fast 3G (3G rapide) ou Slow 3G (3G lente) dans la liste Network (Réseau).
Émuler les capteurs
Utilisez le panneau Capteurs pour ignorer la géolocalisation, simuler l'orientation de l'appareil, forcer l'appui et émuler l'état inactif.
Les sections suivantes 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.
Ignorer la géolocalisation
Pour ouvrir l'interface utilisateur de remplacement de géolocalisation, cliquez sur Customize and control DevTools (Personnaliser et contrôler les outils de développement) 
, puis sélectionnez More tools > Sensors (Plus d'outils > Capteurs).
Vous pouvez également appuyer sur Commande+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux, ChromeOS) pour ouvrir le menu de commande, saisir Sensors, puis sélectionner Afficher les capteurs.
Sélectionnez l'un des préréglages dans la liste Emplacement, ou cliquez sur 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'interface utilisateur d'orientation, cliquez sur Customize and control DevTools (Personnaliser et contrôler les outils de développement) 
, puis sélectionnez More tools > Sensors (Plus d'outils > Capteurs).
Vous pouvez également appuyer sur Commande+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux, ChromeOS) pour ouvrir le menu de commande, saisir Sensors, puis sélectionner Afficher les capteurs.
Sélectionnez l'un des préréglages dans la liste Orientation ou sélectionnez Orientation personnalisée pour définir vos propres valeurs alpha, bêta et gamma.
