Tester un site en localhost sur mobile : téléphone et vue mobile

Pour ouvrir un site en localhost sur votre téléphone, faites écouter votre serveur de développement sur le réseau (en général avec l’option --host), connectez le téléphone au même Wi-Fi et ouvrez l’adresse IP locale de votre ordinateur avec le port, par exemple http://192.168.1.20:5173. Si le réseau bloque cette connexion, utilisez la redirection de ports de Chrome en USB ou un tunnel. Et si vous voulez seulement voir la mise en page mobile, vous pouvez vous passer du téléphone et ouvrir localhost en vue mobile dans Chrome sur ordinateur.

Le plus rapide : une vue mobile de localhost dans Chrome sur ordinateur

localhost fonctionne dans n’importe quel outil de votre ordinateur, sans aucune configuration réseau :

• Le mode appareil des DevTools de Chrome : ouvrez les DevTools, activez la barre d’appareils avec Ctrl + Shift + M (Cmd + Shift + M sur Mac), choisissez un téléphone. Voir le guide de l’émulateur mobile de Chrome.
• Une extension de vue mobile compatible avec les pages locales. Mobile View Extension fonctionne en localhost et garde la vue téléphone d’une page locale à l’autre : vous pouvez la laisser ouverte pendant le développement.

Beaucoup de testeurs responsive en ligne en sont incapables, car ils chargent votre URL depuis leurs propres serveurs et ne peuvent pas atteindre votre machine.

Quand il vous faut le vrai tactile, le vrai clavier ou Safari, passez au téléphone.

Méthode 1 : même Wi-Fi et IP locale de l’ordinateur

1. Faire écouter le serveur sur toutes les interfaces

La plupart des serveurs de développement n’écoutent que localhost (127.0.0.1) par défaut, inaccessible aux autres appareils. Demandez-leur d’écouter le réseau :

Lancés avec --host, Vite et Astro affichent une URL « Network ». C’est l’adresse à ouvrir sur le téléphone.

2. Trouver votre adresse IP locale

Si votre outil ne l’affiche pas : sur macOS, ouvrez Réglages Système > Wi-Fi > Détails ; sur Windows, lancez ipconfig et cherchez l’adresse IPv4 ; sur Linux, lancez ip addr. Elle commence généralement par 192.168. ou 10..

3. L’ouvrir sur le téléphone

Connectez le téléphone au même réseau Wi-Fi et ouvrez http://<votre-ip>:<port>.

Si la page ne se charge pas

• Pare-feu. macOS et Windows peuvent bloquer les connexions entrantes vers Node ou Python. Autorisez l’application quand on vous le demande, ou ajoutez une règle pour le port.
• Réseaux invités ou d’entreprise. Beaucoup isolent les appareils les uns des autres (« isolation des clients »). Utilisez la méthode 2 ou 3.
• URL localhost écrites en dur. Si votre front appelle http://localhost:8080/api, le téléphone essaiera de se joindre lui-même. Utilisez des URL relatives ou une variable d’environnement pour l’hôte de l’API.
• CORS et cookies. Une nouvelle origine (192.168.1.20:5173) peut casser des réglages de cookies ou de CORS qui n’autorisent que localhost.

Méthode 2 : la redirection de ports de Chrome vers un téléphone Android

Avec un téléphone Android branché en USB et le débogage USB activé, Chrome peut relier un port du téléphone à votre ordinateur :

1. Ouvrez chrome://inspect/#devices sur l’ordinateur.
2. Cliquez sur Port forwarding, ajoutez votre port (par exemple 5173) et la cible localhost:5173, puis cochez Enable port forwarding.
3. Sur le téléphone, ouvrez http://localhost:5173 dans Chrome.

Comme le téléphone utilise localhost, les cookies et le CORS se comportent comme sur l’ordinateur, et vous pouvez inspecter la page depuis les DevTools du bureau. L’activation du débogage USB est expliquée dans tester sur Android.

Méthode 3 : un tunnel avec une URL HTTPS publique

Un tunnel donne à votre serveur local une adresse publique temporaire. Cela fonctionne sur n’importe quel réseau et fournit du HTTPS, indispensable à certaines fonctions (service workers, géolocalisation, caméra, cookies sécurisés).

Deux options courantes :

• Cloudflare Tunnel : cloudflared tunnel --url http://localhost:5173 affiche une URL temporaire en trycloudflare.com.
• ngrok : ngrok http 5173 affiche une URL de redirection (compte gratuit requis).

Tant que le tunnel tourne, toute personne qui a l’URL peut joindre votre serveur de développement : arrêtez-le une fois terminé et n’exposez ni interface d’administration ni données réelles. Certains frameworks bloquent aussi les noms d’hôte inconnus par défaut ; Vite, par exemple, demande d’ajouter le domaine du tunnel dans server.allowedHosts.

Méthode 4 : émulateurs et simulateurs

• Simulator de Xcode (Mac) : il partage le réseau du Mac, donc http://localhost:5173 fonctionne directement dans Safari simulé. Voir tester sur iPhone.
• Émulateur d’Android Studio : localhost y désigne l’émulateur lui-même. Utilisez http://10.0.2.2:5173 pour joindre votre ordinateur.

Quelle méthode choisir

Questions fréquentes

Pourquoi mon téléphone n’arrive-t-il pas à ouvrir localhost ?

Sur le téléphone, localhost désigne le téléphone lui-même. Utilisez l’adresse IP locale de votre ordinateur et faites écouter le serveur sur le réseau avec --host ou 0.0.0.0.

Comment tester localhost sur un iPhone ?

Avec le même Wi-Fi et l’adresse IP de l’ordinateur, avec un tunnel, ou dans le Simulator de Xcode sur Mac, où localhost fonctionne directement.

Peut-on voir la version mobile de localhost sans téléphone ?

Oui. Utilisez le mode appareil des DevTools ou une extension de vue mobile compatible avec les pages locales.