Jak działa Podgląd działającej aplikacji

Tunel do localhosta, dozwolone porty, nazwane cele i co robić, kiedy w Podglądzie jest stara wersja strony.

8 minut Zaktualizowano 2026-09-13

Podgląd otwiera w telefonie aplikację, która działa na twoim komputerze na localhoście. Nie kopię, nie zrzut ekranu — właśnie tę działającą aplikację. Agent coś zmieni, stukasz w odświeżenie i widzisz to.

Jak dane się tam dostają

Przeglądarka w aplikacji rozmawia z localhostem telefonu, a Serwer po drugiej stronie otwiera połączenie TCP do localhost:port u siebie. Pomiędzy nimi jest ten sam zaszyfrowany kanał, którym idzie wszystko inne.

W tunelu nic nie jest przepisywane — ani nagłówki, ani treść. Dzięki temu działają też WebSockety, więc serwer developerski z hot reloadem zachowuje się jak na komputerze.

Nigdzie nic nie jest publikowane. Aplikacja na localhoście zostaje na localhoście; tunel istnieje tylko tak długo, jak Podgląd jest otwarty.

Dozwolone porty

Serwer przepuszcza tylko porty z dozwolonych zakresów. Domyślnie są to:

3000–3999, 4000–4999, 5173, 8000–8999

Zmieszczą się tam zwykłe serwery developerskie, a bazy danych i SSH nie. Zmienić to można w konfiguracji Serwera:

{
  "allowed_ports": [{ "from": 3000, "to": 3999 }, { "from": 9000, "to": 9000 }]
}

Próba portu poza zakresem zostaje zapisana w logu Serwera. To jedyny ślad tego, że telefon próbował dostać się gdzieś, gdzie nie powinien.

Nazwane cele — i dlaczego się opłacają

W konfiguracji Serwera można nazwać całe aplikacje, czyli nie jeden port, a grupę:

{
  "preview_targets": [
    { "name": "jobino", "port": 3000, "extra_ports": [8000] }
  ]
}

W Podglądzie pojawią się wtedy jako przycisk pod „Z konfiguracji Serwera” i otworzą się wszystkie ich porty naraz.

To najczęstsze rozwiązanie problemu, który wygląda jak zepsuta aplikacja: strona się ładuje, ale logowanie albo pobieranie danych pada. Frontend działa na 3000, API na 8000 — a kiedy otwarty jest tylko 3000, zapytania do API z telefonu nie prowadzą nigdzie. Nazwany cel otworzy oba.

Cel z portem poza dozwolonymi zakresami Serwer odrzuci już przy starcie. Gdyby go przepuścił, Podgląd by się otworzył, a padłoby dopiero zapytanie do API — i szukano by tego w aplikacji, a nie w pliku, w którym to naprawdę jest.

Stara wersja strony

Najczęstsze zamieszanie: Agent zgłasza, że gotowe, a w Podglądzie wciąż jest stare. Zwykle winna jest jedna z tych trzech rzeczy — w tej kolejności:

Przeglądarka trzyma wczytaną stronę: Stuknij w odświeżenie na pasku Podglądu. To nie zwyczajny reload — wczytuje się nowe okno, więc nie zostanie użyte nic, co przeglądarka sobie odłożyła. Dokładnie dlatego jest to tak zrobione: naciskasz to w chwili, gdy zmieniłeś kod, i chcesz zobaczyć nowy.
Serwer developerski na komputerze się nie przeładował: Jeśli Agent zmienił coś, co nie jest przejmowane w trakcie działania — konfigurację, zależności, build — odświeżenie w telefonie nie pomoże, bo na komputerze wciąż działa stary proces. Niech Agent zrestartuje ten serwer.
Tunel wisi na starym połączeniu: Zamknij Podgląd i otwórz go ponownie. Powstanie nowe połączenie do localhosta — to ten krok, który pomaga, kiedy serwer developerski w międzyczasie się zrestartował, a stare połączenie zostało zawieszone.

Kiedy i to nie pomaga, sprawa jest prawie zawsze na komputerze, nie w telefonie. Najszybsza próba to otworzyć ten adres w przeglądarce na komputerze.

Inne rzeczy, które się mylą

Na porcie nic nie nasłuchuje: Aplikacja na komputerze nie działa albo działa na innym porcie. Błąd Podgląd pokaże jako komunikat z możliwością ponownej próby, a nie jako stronę błędu przeglądarki.
Nasłuchuje, ale tylko na IPv6: Vite domyślnie wiąże się z [::1]. Serwer próbuje obu rodzin adresów, więc to działa — a kiedy jednak zawiedzie, w komunikacie widać, który adres odmówił.
Biały ekran bez błędu: Zwykle zapytanie do innego portu, które z telefonu nie prowadzi nigdzie. Podgląd takie zapytania przechwytuje i o nich mówi — ale rozwiązaniem jest nazwany cel ze wszystkimi portami, patrz wyżej.
Aplikacja rejestruje service workera: Przeglądarka w telefonie nie obsługuje service workerów po HTTP. Podgląd podstawia w ich miejsce bezczynną atrapę, żeby aplikacja nie padła — ale tryb offline w Podglądzie nie działa i działać nie ma.
Zepsuty layout: Przełącz szerokość na „Komputer”. Aplikacja napisana na desktop zachowuje się w szerokości telefonu inaczej i to nie wina Podglądu.

Zacięło się gdzie indziej niż to, co tu jest? Napisz na support@coden-app.com.