L’émulateur mobile de Chrome s’appelle le mode appareil (device mode) et il est intégré à Chrome DevTools. Ouvrez DevTools, appuyez sur Ctrl + Maj + M sous Windows et Linux ou Cmd + Maj + M sur Mac, choisissez un téléphone dans le menu Dimensions et rechargez la page. Chrome affiche alors la page avec le viewport, la densité de pixels et le user agent de ce téléphone.
Ce guide passe en revue chaque réglage utile pour tester au quotidien l’affichage mobile, et se termine par ce que le mode appareil ne peut pas montrer.
Comment activer le mode appareil dans Chrome
- Ouvrez la page à tester.
- Ouvrez DevTools :
F12,Ctrl + Maj + I(Windows, Linux) ouCmd + Option + I(Mac). Vous pouvez aussi faire un clic droit sur la page et choisir Inspecter. - Cliquez sur l’icône Toggle device toolbar (un téléphone et une tablette) en haut à gauche de DevTools, ou utilisez le raccourci ci-dessus quand DevTools a le focus.
- Rechargez la page pour que le site reçoive le user agent mobile dès la première requête.
L’étape 4 est celle que l’on oublie. Sans rechargement, un site qui détecte l’appareil côté serveur vous a déjà envoyé son HTML pour ordinateur.
Choisir un appareil ou une taille personnalisée
Le menu Dimensions au-dessus du viewport a deux modes.
Responsive permet de tirer les bords du viewport ou de saisir une largeur et une hauteur. Servez-vous-en pour trouver la largeur exacte où une mise en page casse. La barre au-dessus du viewport propose des largeurs prédéfinies (Mobile S 320, Mobile M 375, Mobile L 425, Tablet 768, Laptop 1024) comme raccourcis.
Un appareil nommé, comme un modèle d’iPhone ou de Pixel, règle en même temps la largeur, la hauteur, la densité de pixels et le user agent. La liste par défaut est courte. Cliquez sur Edit en bas de la liste pour activer d’autres appareils, ou sur Add custom device pour créer le vôtre avec un nom, une largeur, une hauteur, une densité de pixels et une chaîne de user agent. Un appareil personnalisé est utile quand le téléphone qui vous intéresse est plus récent que la liste de Chrome. Le tableau des tailles d’écran iPhone donne les valeurs des iPhone actuels.
L’icône de rotation bascule entre portrait et paysage.
Simuler un téléphone lent : brider le réseau et le CPU
Un ordinateur est plusieurs fois plus rapide qu’un téléphone courant. Le mode appareil peut réduire cet écart :
- Le menu Throttling de la barre d’appareils propose des préréglages milieu de gamme et entrée de gamme, qui ralentissent à la fois le réseau et le CPU.
- Dans le panneau Performance, vous pouvez régler séparément le ralentissement du CPU (par exemple 4x ou 6x).
- Dans le panneau Network, vous pouvez choisir des préréglages réseau comme Fast 4G, Slow 4G ou 3G.
Le bridage est une simulation, pas une mesure sur du vrai matériel. Utilisez-le pour repérer les problèmes évidents, comme un script qui bloque le rendu pendant deux secondes. Pour des chiffres à présenter, voyez le guide du test de vitesse mobile et l’audit Lighthouse mobile.
Tactile, capteurs et autres réglages d’émulation
Quand un appareil mobile est sélectionné, Chrome déclenche des événements tactiles au lieu des événements souris, et le curseur devient un cercle. Cela permet de tester grossièrement les carrousels à balayer et les gestionnaires de tap, même si une souris ne bouge pas comme un pouce.
Le menu à trois points de la barre d’appareils ajoute d’autres options : Show media queries affiche vos breakpoints sous forme de barres colorées, Show rulers ajoute des règles en pixels, et Add device pixel ratio et Add device type font apparaître ces réglages dans la barre. Le panneau Sensors (à ouvrir depuis le menu de commandes avec Ctrl + Maj + P ou Cmd + Maj + P) remplace la géolocalisation et l’orientation de l’appareil.
Faire une capture d’écran mobile en mode appareil
Ouvrez le menu à trois points de la barre d’appareils et choisissez Capture screenshot pour la zone visible ou Capture full size screenshot pour la page entière. Si vous avez choisi un appareil nommé, activez d’abord Show device frame pour inclure le contour du téléphone. Nous comparons cette méthode aux autres dans comment faire une capture d’écran mobile d’un site.
Ce que le mode appareil ne peut pas montrer
Le mode appareil fonctionne aussi sur localhost. Pour tester le même serveur local sur un vrai téléphone, voir tester localhost sur mobile.
La documentation de Chrome qualifie elle-même le mode appareil d’approximation de premier ordre. Ses limites sont bien réelles :
| Aspect | Ce que fait le mode appareil | Ce qu’il ne peut pas faire |
|---|---|---|
| Moteur de rendu | Utilise Chrome pour ordinateur (Blink) | Montrer les bugs propres à Safari ou iOS |
| Performance | Simule un CPU et un réseau plus lents | Reproduire la chauffe, la mémoire ou le GPU d’un vrai téléphone |
| Saisie | Transforme la souris en événements tactiles | Reproduire les gestes à plusieurs doigts, la portée du pouce ou le clavier virtuel |
| Interface du navigateur | Affiche la zone de la page | Montrer la vraie barre d’adresse, les barres d’outils et les zones de sécurité d’iOS et d’Android |
Pour Safari, utilisez le simulateur Xcode ou un vrai iPhone (guide). Pour Chrome Android sur du vrai matériel, branchez un téléphone et ouvrez chrome://inspect sur votre ordinateur (guide).
Mode appareil ou extension d’affichage mobile ?
Le mode appareil est le meilleur choix pour déboguer : les panneaux Elements, Console et Network sont juste à côté de l’aperçu (ces panneaux sont présentés dans le guide Chrome DevTools). Pour un simple contrôle visuel, il demande beaucoup de manipulations : DevTools doit rester ouvert et l’émulation se réinitialise à chaque onglet.
Mobile View Extension couvre la partie visuelle en un clic, sans ouvrir DevTools. L’extension applique le user agent, la taille d’écran et la densité de pixels d’un appareil, affiche un cadre de téléphone et reste active pendant la navigation. Elle ne génère pas d’événements tactiles : pour tester le tactile, le mode appareil reste l’outil adapté. Les compromis sont détaillés dans simulateur mobile en extension ou DevTools.
Questions fréquentes
Quel est le raccourci de l’émulateur mobile de Chrome ?
DevTools ouvert et actif, appuyez sur Ctrl + Maj + M sous Windows et Linux ou sur Cmd + Maj + M sous macOS.
Pourquoi le site garde-t-il sa version ordinateur en mode appareil ?
Rechargez la page après avoir choisi l’appareil. Certains sites décident quelle version servir dès la première requête, avant que le user agent émulé ne soit appliqué.
Peut-on émuler un iPhone dans Chrome ?
Vous pouvez émuler la taille d’écran, la densité de pixels et le user agent d’un iPhone. La page reste rendue par le moteur de Chrome et non par WebKit, le moteur de Safari : les bugs propres à Safari n’apparaîtront donc pas.