Як протестувати localhost на телефоні?

Запустіть тунель localhost через PortPreview, щоб отримати публічний HTTPS-URL, потім відкрийте цей URL у браузері телефона. Тунель перенаправляє трафік на ваш локальний dev-сервер.

Чому телефон не може отримати доступ до localhost на ноутбуку?

localhost-адреси — це loopback-інтерфейси, доступні лише на машині, де запущено сервер. Тунель створює публічний URL, що перенаправляє на ваш локальний процес.

Чи потрібен HTTPS для мобільного тестування?

Так для багатьох мобільних функцій, включно з безпечними cookie, service worker та OAuth-редиректами. Тунелі localhost надають HTTPS за замовчуванням без налаштування сертифікатів.

Мобільне тестування з тунелем localhost

Ви можете тестувати застосунок на мобільних пристроях, поки він працює на localhost, відкривши його через публічний HTTPS-URL. Телефони й планшети не дістаються до 127.0.0.1 на вашому ноутбуку, але тунель localhost миттєво долає цей розрив.

Чому мобільні пристрої не можуть отримати доступ до localhost

Коли ви запускаєте dev-сервер на ноутбуку, він слухає на loopback-адресі (127.0.0.1 або localhost), до якої дістається лише ваша машина. Навіть якщо телефон у тій самій Wi-Fi-мережі, введення http://192.168.x.x:3000 часто не працює через правила фаєрвола, вимоги HTTPS або політики CORS.

Тунель localhost дає вашому телефону стандартний HTTPS-URL, що перенаправляє на ваш локальний процес — без налаштування мережі.

Що ловить мобільне тестування, що пропускають емулятори

Реальні дотикові цілі, поведінку прокрутки та обробку жестів.
Фактичні розміри viewport на пристроях iOS та Android.
Примхи мобільних браузерів (Safari, Chrome, in-app WebView).
Продуктивність на реальному залізі, а не симульованих середовищах.
Поведінку камери, геолокації та специфічних для пристрою API.
OAuth- та діплінк-редиректи в мобільних браузерах.

Крок за кроком: мобільне тестування з PortPreview

Запустіть dev-сервер локально (наприклад, npm run dev на порту 3000).
Виконайте npx portpreview 3000, щоб отримати публічний HTTPS-URL.
Відкрийте URL у браузері телефона (або відскануйте QR-код, якщо команда так ділиться посиланнями).
Протестуйте адаптивні макети, навігацію, форми та потоки авторизації на реальному пристрої.
Поділіться тим самим URL з колегами з QA чи дизайну для крос-девайс-рев’ю.

Чек-лист мобільного тестування

Адаптивний макет

Перевірте брейкпоінти, масштабування шрифтів, завантаження зображень і поведінку overflow на телефонах і планшетах.

Дотикові взаємодії

Тестуйте дотикові цілі, свайп-жести, pull-to-refresh та липкі шапки за реального дотикового вводу.

Потоки автентифікації

OAuth-редиректи й логіни через magic-link поводяться інакше в мобільних браузерах. Тестуйте повний цикл авторизації на пристрої. Див. тестування OAuth-колбеків для деталей налаштування.

Продуктивність

Вимірюйте завантаження сторінки, вплив JavaScript-бандла та оптимізацію зображень на пристроях середнього класу — не лише на вашому ноутбуку розробника.

Поради для надійного мобільного тестування localhost

Використовуйте HTTPS: багато мобільних функцій (service worker, безпечні cookie, геолокація) вимагають HTTPS, який тунелі надають за замовчуванням.
Вимикайте кеш під час тестів: жорстке оновлення або режим інкогніто, щоб уникнути застарілих ассетів.
Тестуйте кілька пристроїв: iOS Safari та Android Chrome по-різному обробляють CSS і JavaScript.
Тримайте тунель активним: URL перестає працювати, коли ви закриваєте сесію CLI.

Діліться мобільними прев’ю з командою

Замість запису скрінкастів поділіться URL тунелю, щоб колеги тестували на власних пристроях. Прочитайте як поділитися локальним dev-сервером для робочих процесів співпраці.

Почніть PortPreview безкоштовно для швидкого мобільного тестування з localhost.