Я всегда создаю веб-приложения, которые нужно оптимизировать для мобильных устройств. Обязательно просмотрите мой проект на телефоне перед развертыванием.
Я часто использую эмулятор мобильного устройства в Chrome Devtools для небольших корректировок стиля, но нет ничего, что лучше всего имитировало бы настоящий мобильный браузер, чем само мобильное устройство. Это помогает мне выявлять ошибки, связанные с мобильными устройствами, до того, как они станут проблемой для пользователей.
Вот метод, который я использую, чтобы максимально упростить тестирование на мобильных устройствах. Эти инструкции предназначены для среды Mac.
Обслуживайте свой Wi-Fi через локальный IP-адрес
Это звучит сложно, но на самом деле это очень просто.
ВАЖНО: Убедитесь, что ваш компьютер разработчика и мобильное устройство подключены к одной и той же сети Wi-Fi.
Шаг 1. Обслуживание на Localhost
На вашем компьютере разработчика обслуживайте ваше приложение обычным способом, который обслуживает его по localhost адресу.
Обязательно запишите номер порта, на котором он обслуживается. На изображении ниже мы отмечаем 8080.
Как только вы сможете просматривать свое приложение локально на своем компьютере через localhost, вы можете перейти к шагу 2.
Шаг 2. Найдите свой локальный IP-адрес
Откройте Системные настройки ›Сеть. Выберите «Wi-Fi» на левой панели, если он еще не выбран.
В разделе «Статус: подключен» вы должны увидеть «Wi-Fi подключен к‹ сетевому имени ›и имеет IP-адрес‹ локальный IP-адрес ›».
Обратите внимание на этот IP-адрес!
Примечание. Ваш локальный IP-адрес обычно изменяется автоматически, когда ваше устройство или другие устройства подключаются / отключаются от сети. Значит, вы не можете добавить этот адрес в закладки. Вместо этого вам придется каждый раз находить свой адрес - для меня это обычно просто, когда я начинаю каждое утро, и он остается в течение дня.
Шаг 3. Просмотрите на телефоне
В браузере мобильного устройства (подойдет любой) перейдите к http://<Local IP Address>:<port number>.
Например, если я работал на localhost:8080, а мой локальный IP-адрес - 123.45.67.890, в браузере мобильного устройства я бы перешел на http://123.45.67.890:8080. http:// важен, не упускайте его.
Успех!
Теперь вы должны просматривать свое приложение на своем мобильном устройстве. Установите его прямо рядом с вашим основным монитором, потому что он будет перезагружаться каждый раз при перезагрузке вашего локального хоста, поэтому он будет идеально синхронизирован с локально обслуживаемым настольным веб-приложением.
У вас нет никаких интерфейсных инструментов разработки с этим интерфейсом, но вы получаете раннее предупреждение, если что-то выглядит или ведет себя по-другому в обычном браузере.
