Дебажим мобильное веб приложение на Android-смартфоне

Иногда бывает нужно подебажить веб приложение прямо на телефоне для чистоты эксперимента. Google Chrome позволяет подключить смартфон и запустить отладку по USB. Вот пошаговый туториал как это сделать.

Для начала скачаем и установим adb (Android Debug Bridge). adb входит в состав platform-tools. Скачать и установить его можно по ссылке (либо через home brew на macOS).
Если у вас установлен Android SDK, то скорее всего adb  уже у вас установлен (если нет, то можно установить его из меню SDK).

После установки проверим, что adb доступен в терминале, выполнив adb.

Теперь докажем вашему смартфону, что вы действительно разработчик. Перейдем в Настройки - О телефоне - Номер сборки и начнем неистово тапать, как будто до листинга хомяка осталось 5 минут. После 10 раза, смартфон вам поверит и скажет, что вы реально разработчик, при этом у вас появится меню Developer Options, где нужно будет найти переключатель USB debugging и включить его.

Отлично, ваш смартфон готов к развлечениям!

Подключим его к компу, а в консоли выполним adb devices и увидим, что есть какое-то неавторизованное устройство (если этого нет, возможно на телефоне есть уведомление, что вид вашего подключения к компу - это зарядка или передача файлов. Выберите USB debug).

На смартфоне должен выскочить попап о разрешении дебага по USB - выберите разрешаю, поставив галочку "Всегда разрешать с этого компа".

Ура!

Теперь перейдем на страницу chrome://inspect/#devices. Там отображаются устройства и открытые вкладки на них (офигеем от того, сколько вкладок у нас открыто). Можем перейти в любую и посмотреть, как она работает нативно на устройстве, при этом отображаясь на вашем компьютере.

Но как открыть приложение в процессе разработки, которое запущено на localhost вашего компа?

Для этого пропишем port forwarding (самая верхняя кнопка). Откроем соответствующие настройки и пропишем (например 6006: localhost:6006), и не забудем поставить галочку внизу "использовать port forwarding".

Готово, открывайте http://localhost:6006 на телефоне и дебажьте приложение на компе.

Спасибо за внимание!

Подписывайтесь на каналы в телеграм FrontEndDev и Sleepless Tech чтобы получать больше интересного контента о разработке.