ЛОКАЛЬНАЯ РАЗРАБОТКА · ПРАКТИЧЕСКИЕ ТЕСТЫ
Откройте localhost: тесты на телефоне и вебхуки
Сайт работает на вашем компьютере. Временная HTTPS-ссылка даст доступ телефону, клиенту или сервису вебхуков. Развёртывание не требуется.
Перед публикацией проверьте локальный адрес
Посмотрите адрес, который выводит сервер разработки. Протокол и порт важны: http://localhost:5173 и https://localhost:7143 — разные цели. Откройте точный адрес на компьютере и выполните обычное действие перед созданием туннеля.
Одно приложение, один порт
Если страница и API используют один локальный адрес, один туннель достигает обоих. Пути сохраняются: публичный запрос к /contact попадает на /contact локального приложения. Туннель не копирует и не развёртывает файлы.
Фронтенд и API на разных портах
Туннель к фронтенду не публикует API на другом порту автоматически. Вызов localhost:3000 из браузера обращается к устройству посетителя. Используйте API-прокси сервера разработки или доступный тестовый адрес API и настройте фронтенд.
Создайте публичную ссылку
Запустите сайт или API и проверьте локальный доступ. GhostlyShare автоматически обнаруживает работающие локальные веб-приложения. Нажмите Go Public, чтобы создать публичную HTTPS-ссылку.
- Не закрывайте приложение и GhostlyShare во время теста.
- Перед отправкой откройте ссылку в приватном окне браузера.
- Используйте тестовые данные. При необходимости задайте пароль для закрытого просмотра клиентом.
Windows и Linux. Бесплатные временные ссылки без аккаунта, электронной почты и подписки.
Скачать GhostlyShare ↗
Откройте публичный адрес на компьютере и другом устройстве. Если локальная страница работает, а публичная нет, сравните оба адреса, чтобы отделить ошибку приложения от проблемы туннеля или настройки хоста.
Откройте localhost на телефоне
На телефоне localhost означает сам телефон, а не ваш компьютер. Откройте публичную ссылку или отсканируйте QR-код в GhostlyShare.
- Переключитесь на мобильный интернет, чтобы проверить доступ вне своей сети Wi-Fi.
- Проверьте меню, формы, клавиатуру и загрузку файлов на настоящем устройстве.
- Откройте внутреннюю страницу напрямую и обновите её. Проверьте изображения и ответы API.
Тестируете только в одной сети Wi-Fi? Локального сетевого адреса компьютера может хватить, если сервер разработки и межсетевой экран разрешают доступ. Публичный туннель полезен для других сетей и внешних сервисов.
Полезный тест на телефоне за пять минут
- Навигация и вёрстка
- Откройте меню, поверните телефон и просмотрите длинную страницу. Ищите горизонтальную прокрутку, закрытые кнопки и содержимое за закреплённой шапкой. Эмуляция браузера полезна, но не воспроизводит все действия на реальном устройстве.
- Формы и сеанс входа
- Коснитесь каждого поля, отправьте неверное, затем верное значение. Проверьте видимость ошибок над клавиатурой. Если вход работает только на компьютере, начните новый сеанс и проверьте callback-адрес и cookie.
- Запросы и загрузка
- Проверьте страницу с множеством изображений и действие с загрузкой данных. Медленный ответ через домашнее соединение не измеряет производительность рабочей версии сайта. Запишите страницу, устройство и действие, чтобы воспроизвести сбой локально.
Покажите работу клиенту
Отправьте конкретную страницу для проверки. Объясните, что попробовать и когда доступ закроется.
Перед отправкой
Используйте тестовый аккаунт и примерные данные. Убедитесь, что ссылка работает без ваших файлов cookie и сеанса авторизации.
Попросите о конкретной проверке
Заполнить форму, проверить мобильное меню или оформить заказ с тестовой оплатой: понятная задача даёт более полезные отзывы.
Вот ссылка для сегодняшнего обсуждения. Проверьте мобильное меню и контактную форму. После нашего звонка доступ закроется.
Собирайте отзывы, по которым можно повторить ошибку
Попросите адрес страницы, устройство, браузер и последнее действие до сбоя. Снимок с пояснением «ожидал X, но произошло Y» полезнее слов «страница не работает». Предупредите об изменениях во время просмотра: в зависимости от настроек посетитель может сразу увидеть обновления или перезагрузку.
Принимайте вебхуки локально
Сервис вебхуков не может обратиться к localhost вашего компьютера. Укажите публичный адрес туннеля с путём callback. Пример предполагает, что приложение уже обрабатывает POST-запросы по /api/webhooks/demo.
http://localhost:5173/api/webhooks/demohttps://YOUR-TUNNEL.trycloudflare.com/api/webhooks/demo- Замените YOUR-TUNNEL настоящим именем хоста и укажите полный callback-адрес в тестовых настройках сервиса.
- Не отключайте проверку подписей. Храните секрет вебхука локально и отправьте тестовое событие из сервиса.
- Проверьте статус доставки и локальные журналы. Верните ожидаемый ответ об успехе и обрабатывайте повторные доставки без повторения действия.
Запрос пароля в браузере может заблокировать отправителя вебхука. Используйте доступную сервису конечную точку и проверяйте подписанные запросы. CORS относится к запросам браузера, а не к вебхукам между серверами.
Проверяйте ответ вебхука, а не только браузер
Открытие callback-адреса в браузере обычно отправляет GET. Многие вебхуки ожидают POST, поэтому ошибка браузера не доказывает сбой доставки. Отправьте тестовое событие и сравните время и идентификатор доставки с локальным журналом.
- 404 / 405
- Проверьте путь и метод HTTP. Используйте порт API, а не обязательно фронтенда. Доступная главная страница не означает, что конечная точка callback существует.
- 401 / 403
- Определите, что отклонило запрос: пароль предпросмотра, авторизация приложения или проверка подписи. Для подписанных данных соблюдайте требования к исходному телу запроса: разбор и повторная запись до проверки могут нарушить подпись.
- 5xx / Timeout
- Проверьте, работает ли приложение и получило ли запрос. При долгой обработке соблюдайте срок ответа сервиса и при необходимости используйте фоновые задачи. Проверьте повторную доставку, чтобы не создавать дубли заказов или сообщений.
Используйте тестовый режим сервиса и не записывайте секреты или полные персональные данные в журналы. Успешный тест проверяет доставку и обработку приложением, но не заменяет требования сервиса к интеграции.
Ссылка открывается, но что-то не работает?
Публичная ссылка не достигает приложения
Сначала откройте локальный адрес. Проверьте порт, HTTP или HTTPS и убедитесь, что приложение и туннель работают.
Изображения или вызовы API не работают
Найдите адреса localhost, жёстко заданные в коде. По возможности используйте относительные пути. API на другом порту нужен собственный доступный маршрут.
Приложение перенаправляет на localhost
Проверьте публичный базовый адрес, доверенные прокси и callback-адреса входа. Разрешите конкретный хост предпросмотра вместо полного отключения проверки хостов.
Автообновление или WebSockets не работают
Проверьте, используют ли WebSockets публичный хост и wss на HTTPS-страницах. Некоторым серверам разработки нужен отдельный параметр хоста HMR.
Вебхук не получает успешного ответа
Проверьте путь callback, метод HTTP, секрет подписи и журнал доставки. Обновляйте callback-адрес после запуска нового временного туннеля.
Завершите тест и закройте доступ
Остановите публикацию в GhostlyShare или туннель в терминале через Ctrl+C. Срок действия ссылки позволяет закрыть запланированный просмотр автоматически. Удалите временные callback-адреса из настроек сервиса вебхуков.
Нужен постоянный адрес для длительной работы?
Временный предпросмотр не заменяет развёртывание. Руководство по домашнему хостингу описывает именованные туннели, домены, службы Windows и расходы на работу.
Настроить постоянный Cloudflare Tunnel →Вопросы о локальном предпросмотре
Часто задаваемые вопросы
Почему localhost не работает на телефоне?
Localhost означает устройство, открывающее адрес. На телефоне используйте публичную ссылку, чтобы попасть в приложение на компьютере.
Компьютер должен оставаться включённым?
Да. Компьютер, локальное приложение и туннель должны работать. Спящий режим или остановка туннеля делают предпросмотр недоступным.
Нужен ли домен для предпросмотра?
Нет. Временный туннель выдаёт публичный HTTPS-адрес. Если адрес изменится, обновите отправленные ссылки и настройки вебхуков.