Львиная доля сил по разработке сайта уходит на отладку его мобильной версии. И если функционал сайта хотя бы на пару шагов в сторону далёк от стандартных решений, то могут возникнуть определенные проблемы при работе со смартфонами, планшетами и прочими мобильными устройствами. Внезапно выясняется, что один и тот же браузер себя ведёт по разному на компьютере и мобильном телефоне.
И если на компьютере у нас под рукой инструменты разработчика, то на смартфоне мы не видим исходный код сайта и не можем на него влиять в режиме реального времени.
Однако, не всё так грустно и плачевно.
Разработчики браузеров предоставили нам замечательную возможность решения данной задачи.
Речь идёт об отладке мобильной версии сайта по WI FI
Как она работает?
Мобильный телефон под управлением ОС Android предоставляет доступ компьютеру по локальной сети.
После предоставления доступа, код открытой страницы становится виден на компьютере.
Появляется возможность его редактирования и изменения в реальном времени. При изменении кода на компьютере, меняется внешний вид сайта на телефоне.
ROSA Linux и другие операционные системы
Несмотря на то, мой рабочий компьютер работает под управлением операционной системы ROSA Linux и десктопная часть будет описана именно для данного дистрибутива, владельцам других операционных систем расстраиваться не стоит.
Принцип настройки везде один и тот же.
Для многих станет откровением, но в Windows также есть командная строка. И основные команды в рамках данной статьи похожи, как под Linux, так и под Windows, так и под Mac OS.
Подготовка компьютера
Перед тем, как предоставлять доступ с телефона, я предлагаю установить инструменты платформы Android SDK на компьютер, где мы планируем править код мобильной версии сайта.
Сделать это можно по ссылке ниже:
https://developer.android.com/tools/releases/platform-tools?hl=ru
Для Rosa Linux я это сделал командой:
sudo dnf install android-tools
Настройка мобильной версии браузера Mozilla Firefox
В настройках мобильной версии браузера Mozilla Firefox, необходимо активировать удалённую отладку по USB.
Предоставляем доступ с телефона
Первое, что мы должны сделать — это активировать настройки для разработчиков.
Сделать это можно в настройках телефона, в разделе «О телефоне», где мы несколько раз кликаем по номеру версии вашей системы.
Хочу отметить, что мой телефон работает под управлением HyperOs — Android совместимой ОС от компании Xiaomi.
Поэтому расположение тех или иных настроек может отличаться от вашего смартфона.
После активации переходим в настройки для разработчиков.
В моем случае это:
Настройки → Расширенные настройки → Для разработчиков
Затем открываем раздел «Отладка по Wi-Fi»
Активируем отладку по Wi-Fi и далее нажимаем на «Подключить устройство с помощью кода подключения».
Откроется окошко с данными, которые нам нужны и важны.
Нас интересует адрес нашего устройства, а также предложенный код.
Далее садимся за компьютер, открываем терминал (командную строку) и вводим команду:
adb pair 192.168.0.4:38411 479697
В вашем случае и адрес и код подключения будет другой.
Если всё прошло хорошо, то в командной строке вы прочтете что-то вроде:
Successfully paired to 192.168.0.4:38411
Далее мы должны подключиться по адресу, который нам предлагает наш телефон в блоке «IP адрес и порт».
Для этого не покидая командную строку вводим команду:
adb connect 192.168.0.4:41969
На что будет получен ответ:
connected to 192.168.0.4:41969
Напоминаю, что IP адрес и порт у вас будет свой. Не пытайтесь их копировать из статьи и вставлять куда-нибудь во что-нибудь.
Настройка браузера Mozilla Firefox
Настало время настройки нашего браузера, что установлен на компьютере.
Для этого в адресной строке вводим:
about:debugging#/setup
На этой странице активируем USB устройства.
После активации, в левой части окна появится иконка телефона, код и кнопка «Connect» (Соединиться).
Нажатие на кнопку активирует соединение, а клик по нему откроет список возможных действий.
Чтобы открыть отладчик, на мобильном телефоне предварительно откроем требуемый сайт.
Затем вернемся за компьютер и увидим, что он появился в списке, осталось лишь напротив него нажать на кнопку «Inspect».
Заключение
Признаюсь честно, статью писал в особенности для себя любимого. Ибо команды могут стереться из памяти. А сайт мой — это островок стабильности в в этом нестабильном мире.
Не могу назвать себя гуру по соединениям всевозможных устройств. Однако, если у вас есть вопросы, смело задавайте их в моей группе по ссылке ниже. Авось, кто да поможет.
С уважением, Владимир Егоров
