Tous les articles
Plusieurs téléphones et une tablette prévisualisant une application locale via un tunnel partagé.
mobile testinglocalhost tunnelingQAcross-device

Tests mobile avec un tunnel localhost

Vous pouvez tester votre app sur mobile depuis localhost en l'exposant via une URL HTTPS publique. Téléphones et tablettes n'atteignent pas 127.0.0.1 sur votre laptop — un tunnel localhost comble cette lacune instantanément.

Pourquoi les mobiles n'accèdent pas à localhost

Votre serveur de dev écoute sur une adresse loopback (127.0.0.1) joignable uniquement sur votre machine. Même sur le même Wi-Fi, http://192.168.x.x:3000 échoue souvent (pare-feu, HTTPS, CORS). Un tunnel localhost fournit une URL HTTPS standard sans config réseau.

Ce que les émulateurs ratent

  • Vraies cibles tactiles, scroll et gestes.
  • Tailles viewport réelles iOS et Android.
  • Quirks navigateurs mobile (Safari, Chrome, WebViews).
  • Performance sur hardware réel.
  • API device (caméra, géolocalisation).
  • Redirects OAuth sur navigateurs mobile.

Étapes : tests mobile avec PortPreview

  1. Lancez npm run dev sur le port 3000.
  2. Exécutez npx portpreview 3000.
  3. Ouvrez l'URL sur le navigateur mobile.
  4. Testez layout, navigation, formulaires et auth.
  5. Partagez l'URL avec QA ou design pour revue multi-appareils.

Checklist mobile

Layout responsive : breakpoints, polices, images, overflow.

Interactions tactiles : tap targets, swipe, pull-to-refresh.

Auth : OAuth et magic links se comportent différemment. Voir test callbacks OAuth.

Performance : mesurez sur appareils milieu de gamme, pas seulement votre laptop.

Conseils fiabilité

HTTPS requis pour cookies sécurisés et service workers. Désactivez le cache pendant les tests. Testez iOS Safari et Android Chrome séparément.

Partage : partager le serveur de dev local. Commencez PortPreview gratuitement.

HTTPS et fonctionnalités mobile

De nombreuses APIs mobile (service workers, cookies sécurisés, géolocalisation) exigent HTTPS. Les tunnels localhost le fournissent par défaut sans configuration certificat — un avantage décisif par rapport aux adresses IP locales en HTTP.

Questions fréquentes

Comment tester localhost sur mon téléphone ?
Démarrez un tunnel PortPreview pour obtenir une URL HTTPS publique, puis ouvrez cette URL dans le navigateur de votre téléphone.
Pourquoi mon téléphone ne peut pas accéder au localhost de mon laptop ?
Les adresses localhost ne sont joignables que sur la machine qui exécute le serveur. Un tunnel crée une URL publique qui redirige vers votre processus local.
Ai-je besoin de HTTPS pour les tests mobile ?
Oui pour de nombreuses fonctionnalités mobile (cookies sécurisés, service workers, redirects OAuth). Les tunnels localhost fournissent HTTPS par défaut.