Mobiles Testen in der Entwicklung: Wenn DevTools nicht ausreichen

Dieser Blogpost beschreibt, warum die in Browsern integrierten Simulationswerkzeuge für das Testen von mobilen Anwendungen oft nicht ausreichen, und wie VS Code Port Forwarding eine elegante und unkomplizierte Lösung bietet.

Das Problem mit Browser-Simulationen

Moderne Browser wie Chrome und Firefox bieten in den DevTools eine integrierte Möglichkeit, verschiedene Bildschirmgrößen und Geräteprofile zu simulieren. Die meiste Zeit ist das vollkommen ausreichend, Layouts lassen sich schnell überprüfen, und responsive Breakpoints sind gut testbar.

Das ist ein Vorteil, bringt aber auch Grenzen mit sich:

• Fehlende Touch-Interaktion: Tipp- und Wischgesten werden simuliert, nicht emuliert.
• Kein betriebssystemspezifisches Verhalten: iOS Safari und Android Chrome unterscheiden sich in Feinheiten wie der Adressleiste, dem Scroll-Verhalten oder der Viewport-Höhe. Solche Unterschiede lassen sich nicht in den Browser-DevTools darstellen.
• HTTPS und Zertifikatsprobleme: Die meiste Kommunikation im Internet erfordert HTTPS. Lokale Entwicklungsserver laufen ggf. über HTTP, und selbst wenn HTTPS konfiguriert ist, vertraut ein mobiles Gerät im selben Netzwerk einem selbstsignierten Zertifikat nicht automatisch.

Diese Probleme führen dazu, dass Browser-Simulationen für viele Testszenarien auf mobilen Geräten schlicht nicht ausreichen.

Ansätze zum mobilen Testen

Es gibt verschiedene Wege, eine Webanwendung auf tatsächlichen mobilen Geräten zu testen. Ein kurzer Überblick:

• Direkter Netzwerkzugriff: Die meisten lokalen Entwicklungsserver sind auch über eine IP-Adresse im lokalen Netzwerk erreichbar. Das funktioniert für einfache Fälle, scheitert aber sobald HTTPS benötigt wird oder externe Dienste ins Spiel kommen.
• Cloud-Testdienste: Anbieter wie BrowserStack ermöglichen Tests auf einer Vielzahl von Geräten und Betriebssystemen, sind jedoch kostenpflichtig und binden ein externes System ein.
• VS Code Port Forwarding: Eine vergleichsweise wenig bekannte, aber praktische Funktion, die direkt in VS Code integriert ist. Ein lokaler Port wird nach außen weitergeleitet und ist über eine öffentliche URL auf jedem Gerät erreichbar, das einen Browser hat.

VS Code Port Forwarding

VS Code Port Forwarding ermöglicht es, einen lokalen Port für externe Geräte zugänglich zu machen. Dahinter steckt der Microsoft Dev Tunnels-Dienst, der den lokalen Entwicklungsserver über einen sicheren Tunnel nach außen verbindet.

Das Ergebnis: Ein lokaler Port wie localhost:3000 wird zu einer von überall erreichbaren URL, ohne Netzwerkkonfiguration, ohne Zertifikate, ohne VPN. Einmal eingerichtet, kann die URL auf jedem Gerät mit einem beliebigen Browser getestet werden, egal ob Android, iOS oder ein älteres Tablet. Ein weiterer Vorteil: Es ist auch möglich, die URL einem Kollegen zu senden und schnell Feedback einzuholen, ohne dass er Zugriff auf das lokale Netzwerk oder die Entwicklungsumgebung benötigt.

Was lässt sich konfigurieren?

Port Forwarding in VS Code bietet einige nützliche Optionen:

• Protokoll: HTTP oder HTTPS, abhängig davon wie der lokale Server konfiguriert ist. Die weitergeleitete URL ist immer über HTTPS erreichbar.
• Sichtbarkeit: Private oder Public. Bei Private ist die URL nur nach GitHub-Login abrufbar, das verhindert unbeabsichtigtes Veröffentlichen der lokalen Entwicklungsumgebung. Public eignet sich für schnelle, kurzfristige Tests.
• Mehrere Ports gleichzeitig: Frontend und Backend lassen sich unabhängig voneinander weiterleiten, was für Full-Stack-Anwendungen wichtig ist.

Fazit

Browser-Simulationen in den DevTools sind ein unverzichtbares Werkzeug für responsive Entwicklung. Für Tests auf tatsächlichen Geräten stoßen sie jedoch schnell an ihre Grenzen, insbesondere bei Touch-Verhalten, HTTPS-Anforderungen und externen Authentifizierungssystemen.

VS Code Port Forwarding bietet eine schnelle, einfache und elegante Lösung: Ein Port wird einmalig in der vertrauten Entwicklungsumgebung konfiguriert und ist danach auf jedem Gerät mit einem Browser erreichbar. Keine komplexe Netzwerkkonfiguration, keine Zertifikatsprobleme, kein Zusatz-Tooling.

Nicht jedes Problem braucht ein großes Werkzeug. Manchmal reicht ein kleines, das bereits da ist.

Quellen

1. VS Code Port Forwarding einschalten
2. VS Code Port Forwarding konfigurieren