Wie teste ich localhost auf meinem Smartphone?

Starte einen localhost-Tunnel mit PortPreview, um eine öffentliche HTTPS-URL zu erhalten, und öffne diese URL im Browser deines Smartphones. Der Tunnel leitet den Traffic an deinen lokalen Dev-Server weiter.

Warum kann mein Smartphone nicht auf localhost meines Laptops zugreifen?

localhost-Adressen sind Loopback-Interfaces, die nur auf der Maschine erreichbar sind, die den Server ausführt. Ein Tunnel erstellt eine öffentliche URL, die an deinen lokalen Prozess weiterleitet.

Brauche ich HTTPS für Mobile-Testing?

Ja für viele mobile Features, darunter sichere Cookies, Service Worker und OAuth-Redirects. localhost-Tunnel liefern HTTPS standardmäßig ohne Zertifikat-Setup.

Mobile-Testing mit einem Localhost-Tunnel

Du kannst deine App auf Mobilgeräten testen, während sie auf localhost läuft, indem du sie über eine öffentliche HTTPS-URL freigibst. Smartphones und Tablets erreichen 127.0.0.1 auf deinem Laptop nicht, aber ein localhost-Tunnel überbrückt diese Lücke sofort.

Warum Mobilgeräte nicht auf localhost zugreifen können

Wenn du einen Dev-Server auf deinem Laptop startest, lauscht er auf einer Loopback-Adresse (127.0.0.1 oder localhost), die nur deine Maschine erreicht. Selbst wenn dein Smartphone im selben WLAN ist, schlägt http://192.168.x.x:3000 oft an Firewall-Regeln, HTTPS-Anforderungen oder CORS-Richtlinien fehl.

Ein localhost-Tunnel gibt deinem Smartphone eine Standard-HTTPS-URL, die an deinen lokalen Prozess weiterleitet — keine Netzwerkkonfiguration nötig.

Was Mobile-Testing fängt, das Emulatoren verpassen

Echte Touch-Targets, Scroll-Verhalten und Gesten-Handling.
Tatsächliche Viewport-Größen über iOS- und Android-Geräte hinweg.
Mobile-Browser-Eigenheiten (Safari, Chrome, In-App-WebViews).
Performance auf echter Hardware, nicht simulierten Umgebungen.
Kamera-, Geolocation- und gerätespezifisches API-Verhalten.
OAuth- und Deep-Link-Redirects in mobilen Browsern.

Schritt für Schritt: Mobile-Testing mit PortPreview

Starte deinen Dev-Server lokal (zum Beispiel npm run dev auf Port 3000).
Führe npx portpreview 3000 aus, um eine öffentliche HTTPS-URL zu erhalten.
Öffne die URL im Browser deines Smartphones (oder scanne einen QR-Code, wenn dein Team Links so teilt).
Teste responsive Layouts, Navigation, Formulare und Auth-Flows auf dem echten Gerät.
Teile dieselbe URL mit QA- oder Design-Kolleg:innen für geräteübergreifendes Review.

Mobile-Testing-Checkliste

Responsive Layout

Prüfe Breakpoints, Font-Skalierung, Bild-Laden und Overflow-Verhalten auf Smartphones und Tablets.

Touch-Interaktionen

Teste Tap-Targets, Swipe-Gesten, Pull-to-Refresh und Sticky-Header unter echtem Touch-Input.

Authentifizierungs-Flows

OAuth-Redirects und Magic-Link-Logins verhalten sich in mobilen Browsern anders. Teste den vollen Auth-Zyklus auf dem Gerät. Siehe OAuth-Callback-Testing für Setup-Details.

Performance

Miss Seitenladezeit, JavaScript-Bundle-Einfluss und Bildoptimierung auf Mittelklasse-Geräten — nicht nur deinem Entwickler-Laptop.

Tipps für zuverlässiges mobiles localhost-Testing

Nutze HTTPS: viele mobile Features (Service Worker, sichere Cookies, Geolocation) verlangen HTTPS, das Tunnel standardmäßig liefern.
Deaktiviere Cache beim Testen: Hard-Refresh oder Inkognito-Modus, um veraltete Assets zu vermeiden.
Teste mehrere Geräte: iOS Safari und Android Chrome behandeln CSS und JavaScript unterschiedlich.
Halte den Tunnel aktiv: die URL funktioniert nicht mehr, wenn du die CLI-Session schließt.

Teile mobile Vorschauen mit deinem Team

Statt Screen-Captures aufzunehmen, teile die Tunnel-URL, damit Kolleg:innen auf ihren eigenen Geräten testen. Lies wie du deinen lokalen Dev-Server teilst für Kollaborations-Workflows.

Starte PortPreview kostenlos für schnelles Mobile-Testing von localhost aus.