Comment tester son application web en local sur son téléphone ?

Aujourd'hui, les navigateurs web sont dotés d'outils formidables pour faciliter la vie des développeurs, notamment pour tester les différentes tailles d'écrans de pc, de tablettes, de téléphones, etc...

Sauf qu'entre un navigateur qui simule une taille d'écran de smartphone, et un vrai smartphone, il y a de vraies différences, notamment :

• La gestion du viewport
• Le ratio de densité de pixel
• Le user-agent
• La gestion des vidéos et de l'auto-play
• etc...

Alors bien sûr il est possible d'avoir une version de dev privée hébergée en ligne pour y accéder avec son smartphone, mais devoir déployer son projet à chaque fois pour tester des problématiques liés au téléphone va vite vous faire perdre un temps fou !

Et puis ce n'est pas vraiment une solution "propre"

La solution

Vous allez voir que la solution est très simple, il n'y a rien à installer et rien à configurer, vous avez déjà tous les outils sous la main !

Etape 1 : WiFi

Assurez-vous que votre ordinateur et votre téléphone sont bien connecté au même WiFi, si ils ne le sont pas, faites-le !

Attention, je parle bien du WiFi, et non pas de la box, car les connexions sans-fil et Ethernet sont parfois gérés par deux sous-réseaux différents !

Etape 2 : l'IP

Trouvez l'IP locale de la carte WiFi de votre machine, en générale sous la forme 192.168.x.x.

Sur Windows, vous pouvez utiliser la commande "ipconfig" ou bien "ifconfig" pour Linux et MacOS.

Etape 3 : Le port

Lancez votre projet sur votre ordinateur, et notez bien le port qu'utilise l'application que vous développez.

Si vous travaillez avec un serveur web classique, le port par défaut est le 80.

Etape 4 : Le smartphone

Ouvrez le navigateur web sur votre smartphone, et rentrez l'adresse suivante dans la barre de recherche "http://[IP_MACHINE]:[PORT_APPLICATION]

Et surprise ! Votre application qui tourne en local sur votre PC est en fait accessible aux appareils qui sont connectés sur le même réseau !

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage de d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !

Photo by Aaron Weiss on Unsplash