Jak przetestować localhost na telefonie?

Uruchom tunel localhost z PortPreview, by uzyskać publiczny URL HTTPS, potem otwórz ten URL w przeglądarce telefonu. Tunel przekazuje ruch do twojego lokalnego serwera dev.

Dlaczego mój telefon nie ma dostępu do localhost na laptopie?

Adresy localhost to interfejsy loopback osiągalne tylko na maszynie uruchamiającej serwer. Tunel tworzy publiczny URL przekierowujący do twojego lokalnego procesu.

Czy potrzebuję HTTPS do testowania mobilnego?

Tak dla wielu funkcji mobilnych, w tym bezpiecznych ciasteczek, service workers i przekierowań OAuth. Tunele localhost dają HTTPS domyślnie bez konfiguracji certyfikatów.

Testowanie mobilne z tunelem localhost

Możesz testować aplikację na urządzeniach mobilnych, gdy działa na localhost, wystawiając ją przez publiczny URL HTTPS. Telefony i tablety nie sięgną 127.0.0.1 na twoim laptopie, ale tunel localhost natychmiast pokonuje tę lukę.

Dlaczego urządzenia mobilne nie mają dostępu do localhost

Gdy uruchamiasz serwer dev na laptopie, nasłuchuje on na adresie loopback (127.0.0.1 lub localhost), do którego sięga tylko twoja maszyna. Nawet jeśli telefon jest w tej samej sieci Wi-Fi, wpisanie http://192.168.x.x:3000 często zawodzi przez reguły zapory, wymagania HTTPS lub polityki CORS.

Tunel localhost daje twojemu telefonowi standardowy URL HTTPS, który przekierowuje do twojego lokalnego procesu — bez konfiguracji sieci.

Co testowanie mobilne wychwytuje, a emulatory pomijają

Prawdziwe cele dotykowe, zachowanie przewijania i obsługę gestów.
Rzeczywiste rozmiary viewport na urządzeniach iOS i Android.
Dziwactwa przeglądarek mobilnych (Safari, Chrome, WebViews in-app).
Wydajność na prawdziwym sprzęcie, nie symulowanych środowiskach.
Zachowanie kamery, geolokalizacji i API specyficznych dla urządzenia.
Przekierowania OAuth i deep-link w przeglądarkach mobilnych.

Krok po kroku: testowanie mobilne z PortPreview

Uruchom serwer dev lokalnie (na przykład npm run dev na porcie 3000).
Wykonaj npx portpreview 3000, by uzyskać publiczny URL HTTPS.
Otwórz URL w przeglądarce telefonu (lub zeskanuj kod QR, jeśli twój zespół tak dzieli linki).
Testuj responsywne układy, nawigację, formularze i przepływy auth na prawdziwym urządzeniu.
Udostępnij ten sam URL kolegom z QA lub designu do przeglądu na wielu urządzeniach.

Checklista testowania mobilnego

Responsywny układ

Sprawdź breakpointy, skalowanie czcionek, ładowanie obrazów i zachowanie overflow na telefonach i tabletach.

Interakcje dotykowe

Testuj cele dotykowe, gesty swipe, pull-to-refresh i przyklejone nagłówki przy prawdziwym wejściu dotykowym.

Przepływy uwierzytelniania

Przekierowania OAuth i logowania magic-link zachowują się inaczej w przeglądarkach mobilnych. Testuj pełny cykl auth na urządzeniu. Zobacz testowanie callbacków OAuth po szczegóły konfiguracji.

Wydajność

Mierz ładowanie strony, wpływ bundla JavaScript i optymalizację obrazów na urządzeniach ze średniej półki — nie tylko na laptopie deweloperskim.

Wskazówki dla niezawodnego mobilnego testowania localhost

Używaj HTTPS: wiele funkcji mobilnych (service workers, bezpieczne ciasteczka, geolokalizacja) wymaga HTTPS, który tunele dają domyślnie.
Wyłącz cache podczas testów: twarde odświeżenie lub tryb incognito, by uniknąć przestarzałych zasobów.
Testuj wiele urządzeń: iOS Safari i Android Chrome obsługują CSS i JavaScript inaczej.
Trzymaj tunel aktywny: URL przestaje działać, gdy zamkniesz sesję CLI.

Udostępniaj mobilne podglądy zespołowi

Zamiast nagrywać zrzuty ekranu, udostępnij URL tunelu, by koledzy testowali na własnych urządzeniach. Przeczytaj jak udostępnić lokalny serwer dev po przepływy współpracy.

Zacznij PortPreview za darmo po szybkie testowanie mobilne z localhost.