Émulateur Android sur PC : comment tester un site sur Android

Tester un site sur Chrome Android depuis votre ordinateur : vues mobiles dans Chrome, émulateur Android Studio et débogage à distance d'un vrai téléphone.

Pour tester un site sur Android depuis un ordinateur, commencez par une vue au format Android dans Chrome sur ordinateur, puis confirmez sur l’émulateur d’Android Studio ou sur un vrai téléphone branché avec le débogage USB. Chrome sur ordinateur est un bien meilleur substitut d’Android que d’iPhone, car Chrome sur Android utilise le même moteur Blink. L’émulateur et le vrai téléphone ajoutent ce que Chrome sur ordinateur ne peut pas offrir : la vraie interface du navigateur, le clavier et le matériel mobile.

Pourquoi Android est plus facile à reproduire que l’iPhone

Sur iPhone, le moteur du navigateur est presque toujours WebKit, que Chrome sur ordinateur n’utilise pas. Sur Android, le navigateur par défaut de la plupart des gens est Chrome, construit sur le même moteur que Chrome sur ordinateur. Quand vous émulez un téléphone Android dans Chrome sur ordinateur, le comportement CSS et JavaScript est donc généralement le même, et les différences portent surtout sur la taille d’écran, la saisie, les performances et l’interface du navigateur.

Le piège, c’est la diversité. Les téléphones Android existent dans de nombreuses largeurs (souvent de 360 à 412 pixels CSS en portrait), avec des ratios de pixels et des navigateurs variés. Samsung Internet, préinstallé sur les téléphones Samsung, a son propre calendrier de versions et ses propres réglages, comme un mode sombre forcé, qui peuvent changer l’apparence d’un site.

Étape 1 : une vue au format Android dans Chrome

Pour vérifier la mise en page, l’un ou l’autre de ces outils convient :

Le mode appareil des DevTools. Ouvrez les DevTools, appuyez sur Ctrl + Shift + M (Cmd + Shift + M sur Mac), choisissez un préréglage Pixel ou Galaxy et rechargez. Le mode appareil émule les événements tactiles et permet de brider le CPU et le réseau. Toutes les étapes : guide de l’émulateur mobile de Chrome.
Une extension de vue mobile. Mobile View Extension propose des préréglages Android et recharge l’onglet courant avec le user agent, la taille d’écran et le ratio de pixels correspondants, sans ouvrir les DevTools. Pratique pour parcourir rapidement de nombreuses pages.

Testez au moins 360 px et 412 px de large, plus le mode paysage.

Étape 2 : l’émulateur d’Android Studio

Android Studio est l’environnement de développement gratuit de Google pour Android, disponible sous Windows, macOS et Linux. Il comprend un émulateur qui fait tourner une image système Android complète.

Installez Android Studio et ouvrez le Device Manager.
Créez un appareil virtuel. Choisissez un profil de téléphone et une image système incluant Google Play, pour que Chrome soit préinstallé.
Démarrez l’appareil, ouvrez Chrome et saisissez votre URL.

Pour joindre un serveur de développement de votre ordinateur depuis l’émulateur, utilisez l’adresse spéciale 10.0.2.2 au lieu de localhost. Par exemple, http://10.0.2.2:5173 atteint un serveur sur le port 5173 de votre machine. Pour tourner à une vitesse correcte, l’émulateur a besoin que la virtualisation matérielle soit activée dans le BIOS ou les réglages système.

Étape 3 : un vrai téléphone Android avec débogage à distance

Un vrai téléphone montre les performances et le comportement tactile réels, et Chrome permet de l’inspecter depuis l’ordinateur :

Sur le téléphone, ouvrez Paramètres > À propos du téléphone et touchez sept fois Numéro de build pour activer les options pour les développeurs.
Dans Options pour les développeurs, activez le Débogage USB.
Branchez le téléphone en USB et acceptez la demande de débogage sur le téléphone.
Sur l’ordinateur, ouvrez Chrome et allez sur chrome://inspect/#devices.
Ouvrez votre site dans Chrome sur le téléphone, puis cliquez sur inspect à côté, sur l’ordinateur.

Vous disposez de tous les DevTools pour la page qui tourne sur le téléphone, avec une recopie d’écran en direct. La même page propose Port forwarding, qui relie un port du téléphone à votre ordinateur : localhost:3000 sur le téléphone ouvre alors votre serveur local. Plus de détails dans tester un site en localhost sur mobile.

Et un émulateur Android dans le navigateur ?

Quand on cherche « émulateur Android en ligne », on veut en général l’une de deux choses. Certains veulent un site qui fait tourner Android dans un onglet. Ces services existent : ils diffusent un émulateur distant ou un vrai appareil, et sont généralement payants ou limités dans le temps. D’autres veulent que Chrome lui-même se comporte comme un téléphone Android, ce que font précisément le mode appareil ou une extension de vue mobile.

Pour tester un site, la seconde option suffit presque toujours pour la mise en page, et l’émulateur d’Android Studio ou un vrai téléphone couvre le reste. Les services de diffusion à distance sont utiles quand vous ne pouvez rien installer en local.

Ce qu’il faut vérifier spécifiquement sur Android

Des largeurs de 360 et 412 px, les tailles les plus courantes sur les téléphones de milieu et de haut de gamme.
Le clavier à l’écran. Quand il s’ouvre, la zone visible rétrécit. Les pieds de page fixes et les boutons de chat peuvent masquer les champs de saisie.
Le bouton et le geste retour du système. Les applications monopages doivent gérer l’historique pour que « retour » fasse ce que l’utilisateur attend.
Le mode sombre. Samsung Internet et les réglages expérimentaux de Chrome peuvent assombrir les pages qui ne déclarent pas de schéma de couleurs.
La taille de police. Les utilisateurs d’Android augmentent souvent la taille de police du système. Vérifiez que le texte grandit sans casser la mise en page.
Les performances sur un appareil de milieu de gamme. Utilisez le bridage CPU des DevTools ou un vrai téléphone de milieu de gamme : les modèles haut de gamme masquent un JavaScript lent.

Pour la liste complète avant mise en ligne, voir la checklist de test de site mobile.

Questions fréquentes

L’émulation Android de Chrome est-elle fidèle ?

Pour la mise en page et la plupart du CSS et du JavaScript, oui, car Chrome sur Android utilise le même moteur. Elle l’est moins pour les performances, les gestes tactiles et l’interface du navigateur : confirmez les parcours importants sur un vrai téléphone.

Comment ouvrir localhost dans l’émulateur Android ?

Utilisez 10.0.2.2 à la place de localhost, en gardant le même port, par exemple http://10.0.2.2:3000.

Faut-il Android Studio juste pour tester un site ?

Non. La plupart des vérifications de mise en page se font dans Chrome sur ordinateur. Android Studio vaut la peine d’être installé quand il vous faut la vraie interface du navigateur Android, le comportement du clavier ou une version précise d’Android.