Як працює Перегляд працюючого застосунку

Тунель до localhost, дозволені порти, названі цілі і що робити, коли в Перегляді стара версія сторінки.

8 хвилин Оновлено 2026-09-13

Перегляд відкриває в телефоні застосунок, який працює на вашому комп'ютері на localhost. Не копію, не знімок екрана — саме той працюючий застосунок. Агент щось змінює, ви торкаєтесь оновлення і бачите це.

Як дані туди потрапляють

Браузер у застосунку говорить із власним localhost телефону, а Сервер на іншому боці відкриває TCP-з'єднання до localhost:port у себе. Між ними — той самий зашифрований канал, яким іде все інше.

У тунелі нічого не переписується — ні заголовки, ні вміст. Завдяки цьому працюють і WebSockets, тож сервер розробки з гарячим перезавантаженням поводиться так само, як на комп'ютері.

Нікуди нічого не публікується. Застосунок на localhost залишається на localhost; тунель існує лише поки відкритий Перегляд.

Дозволені порти

Сервер пропускає лише порти з дозволених діапазонів. Типово це:

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

Туди вміщуються звичайні сервери розробки, а бази даних і SSH — ні. Змінити це можна в налаштуваннях Сервера:

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

Спроба порту поза діапазоном записується в журнал Сервера. Це єдиний слід того, що телефон намагався дістатися туди, куди не має.

Названі цілі — і чому вони варті того

У налаштуваннях Сервера можна назвати цілі застосунки, тобто не один порт, а групу:

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

У Перегляді вони тоді з'являться як кнопка під «З налаштувань Сервера» і відкриються усі їхні порти разом.

Це найчастіше розв'язання проблеми, яка виглядає як зламаний застосунок: сторінка завантажується, але вхід або завантаження даних падає. Фронтенд працює на 3000, API на 8000 — і коли відкрито лише 3000, запити до API з телефону не ведуть нікуди. Названа ціль відкриє обидва.

Ціль із портом поза дозволеними діапазонами Сервер відкине відразу під час запуску. Якби пропустив, Перегляд відкрився б і впав би лише запит до API — і це шукали б у застосунку, а не у файлі, де воно справді є.

Стара версія сторінки

Найчастіше непорозуміння: Агент повідомляє, що готово, а в Перегляді досі старе. Зазвичай винна одна з цих трьох речей — у такому порядку:

Браузер тримає завантажену сторінку: Торкніться оновлення в панелі Перегляду. Це не звичайний reload — завантажується нове вікно, тож нічого зі схованого браузером не використовується. Саме тому це так зроблено: ви тиснете це тоді, коли змінили код, і хочете побачити новий.
Сервер розробки на комп'ютері не перезавантажився: Якщо Агент змінив щось, що не підхоплюється на ходу — налаштування, залежності, збірку — оновлення в телефоні не допоможе, бо на комп'ютері досі працює старий процес. Нехай Агент перезапустить той сервер.
Тунель завис на старому з'єднанні: Закрийте Перегляд і відкрийте знову. Виникне нове з'єднання до localhost — це той крок, що допомагає, коли сервер розробки тим часом перезапустився, а старе з'єднання залишилося висіти.

Коли й це не допомагає, справа майже завжди в комп'ютері, а не в телефоні. Найшвидша перевірка — відкрити ту адресу в браузері на комп'ютері.

Інші речі, які плутають

На порті ніхто не слухає: Застосунок на комп'ютері не працює або працює на іншому порті. Помилку Перегляд покаже як повідомлення з можливістю спробувати знову, а не як сторінку помилки браузера.
Слухає, але лише на IPv6: Vite типово прив'язується до [::1]. Сервер пробує обидві родини адрес, тож це працює — а якщо все ж не вдасться, у повідомленні видно, яка адреса відмовила.
Білий екран без помилки: Зазвичай запит до іншого порту, який із телефону не веде нікуди. Перегляд такі запити перехоплює і повідомляє про них — але розв'язанням є названа ціль з усіма портами, див. вище.
Застосунок реєструє service worker: Браузер у телефоні не підтримує service worker через HTTP. Перегляд замість них підставляє бездіяльну заміну, щоб застосунок не впав — але офлайновий режим у Перегляді не працює і працювати не має.
Зламана верстка: Перемкніть ширину на «Комп'ютер». Застосунок, написаний для комп'ютера, у ширині телефону поводиться інакше, і це не вина Перегляду.

Застрягло десь інде, ніж тут написано? Напишіть на support@coden-app.com.