Тестирование локального сайта на мобильном устройстве

Server

Была ли у вас необходимость проверить сайт, который вы делаете на localhost, на мобильном устройстве? Наверняка да. У меня такая необходимость возникает довольно часто.

Конечно, мы можем воспользоваться инструментами, которые идут в комплекте с браузером, но что, если возникла необходимость открыть сайт на реальном устройстве?

Такая задача легко решается, когда у вас есть удаленный сервер, на котором вы ведете разработку и совершенно спокойно можно открыть сайт на своем телефоне или использовать сервис типа BrowserStack, но что делать, если разработка ведется на локальном сервере?

Решение есть – ngrok!

ngrok позволяет создать туннель к вашему ресурсу предоставляя доступ на него из вне. Вы получаете возможность протестировать сайт с любого устройства, подключенного к интернет, используя внешнюю ссылку, главное, чтобы был доступ к интернет на всех устройствах которые вы используете во время тестирования.

Установка ngrok на macOS

Для установки необходимо выполнить всего три шага:

  1. Скачать ngrok;
  2. Разархивировать в папку Программы(Applications);
  3. Создать символическую ссылку(symlink).

Создание симлинка для ngrok

Выполните две команды в терминале для создания симлинка:

Это позволит запускать ngrok из любой папки в терминале, иначе придется переходить в папку Программы, или туда, куда вы поместили ngrok, или ссылаться на него указывая полный путь при каждом запуске.

Также установить ngrok можно выполнив команду:

Использование ngrok

Проще всего запустить туннелирование выполнив команду ngrok http [номер порта], например:

После выполнения команды вы увидите примерно следующие данные:

и используя сгенерированные сервисом ссылки сможете перейти на локальный ресурс с любого устройства.

Имейте ввиду, что данное решение не стоит использовать как полноценный сервер и направлять на него какой-либо существенный трафик, так как сервис не рассчитан на это.

Добавить комментарий

Войти с помощью: 

Комментариев: 2, на “Тестирование локального сайта на мобильном устройстве

  1. Хороший пост, обычно юзаем как раз browserstack или browsersync, в большинстве случаев проект уходит на test/staging vps и уже там проверяем на боевой машине. Но этот подход тоже супер и имеет место для экспериментов. Спс

    1. Очевидность удобства этого варианта появляется тогда, когда используешь Vagrant. Там уже есть команда vagrant share, но для ее работы нужен ngrok )

        -  

Вступайте в нашу группу в VK

Через группу удобно следить за обновлениями сайта, а так же получать дополнительный интересный материал, который публикуется только в группе.

ИП Исаенко А.В.

ОГРНИП 317774600344403

ИНН 773770600180