Как протестировать 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.