Как удаленно отлаживать веб-приложения на Android

Сегодня Интернет чаще просматривается на мобильных телефонах, чем на настольных компьютерах. Поскольку устройства стали действительно портативными, а размеры экранов меньше. Поэтому, если вы разрабатываете веб-приложение, вы просто не можете избежать поддержки мобильных телефонов (Android или iOS). Неработающие или некачественно выглядящие сайты на мобильных экранах действительно могут нанести ущерб вашей репутации в Интернете. Пользовательский интерфейс на телефонах полностью отличается от настольных. Поэтому разработчикам приходится специально разрабатывать приложения для адаптации к экрану мобильных устройств.

Google Chrome Dev предоставляет инструменты, которые позволяют вам проверять, отлаживать и анализировать работу на устройстве, и вы можете использовать инструменты Chrome Dev на локальном компьютере для отладки приложения на мобильном устройстве. В этом руководстве мы узнаем, как настроить локальную машину разработки для удаленной отладки на Android. Мы будем выполнять отладку через USB-соединение между вашим мобильным устройством и вашей локальной машиной разработки.

Для продолжения удаленной отладки вам потребуется следующее:

1. Мобильный телефон или планшет Android с установленным Chrome для Android 28 (его можно установить с здесь).
2. USB-кабель для подключения устройства Android к локальной машине разработки. Также убедитесь, что у вас установлены необходимые диски для подключения мобильного Android-устройства к компьютеру.
3. Проверить Список OEM-драйверов USB и подберите для себя подходящие драйверы.
4. Chrome 28+ установлен на вашем локальном компьютере для разработки.
5. Убедитесь, что на вашем локальном компьютере для разработки установлено расширение ADB Chrome. Вы можете установить его из здесь.

В этом руководстве мы будем использовать Sony Xperia L (устройство Android) и Windows 7 на нашей локальной машине для разработки. Итак, начнем с удаленной отладки:

1. Сначала убедитесь, что на вашем устройстве Android включен режим отладки.

Если вы не включили, обратитесь к этому:

• Для пользователей Android 4.2 см .: http://www.thesmarthacks.com/2013/04/enabling-usb-debugging-mode-on-android.html.
• Остальные из них могут относиться к: http://www.groovypost.com/howto/mobile/how-to-enable-usb-debugging-android-phone/.

Для получения дополнительной информации о настройке Android-устройства для разработки, пожалуйста, обратитесь: http://developer.android.com/tools/device.html#setting-up.

2. Подключение вашего Android-устройства.

Теперь подключите устройство Android к локальной машине разработки с помощью кабеля USB. После того, как вы подключили свое устройство Android, вам необходимо включить веб-отладку по USB на своем телефоне, запустив Chrome на своем Android, затем -> Настройки -> Инструменты разработчика -> Выберите Включить веб-отладку по USB.

При выборе этого параметра, если вам будет предложено подтвердить подключение к машине разработки, выберите ОК.

3. Отладка

После установки расширения ADB вы увидите серый значок Android рядом с меню Chrome. Теперь щелкните значок Android и выберите -> Запустить ADB. Теперь он должен стать зеленым и отобразить количество подключенных устройств в настоящее время. Затем щелкните значок и выберите -> Просмотреть цели проверки. Это должно открыть новую вкладку и показать количество подключенных устройств Android и текущих открытых вкладок на них.

Теперь выберите вкладку из списка, которую вы хотите отладить. Это откроет новое окно с инструментами разработчика.

Теперь проверьте какой-то элемент на странице, и этот элемент будет выделен на мобильном устройстве Chrome в режиме реального времени.

Таким образом, вы можете исправить ошибки, специфичные для устройства, путем отладки с помощью инструментов разработчика. Вы можете выполнять команды из инструментов Dev, которые будут выполняться на мобильном устройстве Chrome. Также просматривайте различные панели, такие как Сеть, Ресурсы, Временная шкала, Профили, Аудиты.

Теперь вы можете исправлять ошибки, специфичные для мобильных устройств, и отлаживать мобильные приложения в режиме реального времени вместо того, чтобы развертывать приложение на сервере, а затем обращаться к нему с телефона и выполнять отладку. Google Chrome Dev предоставляет эти инструменты, которые решают настоящую проблему для разработчиков, создающих приложения, совместимые с устройствами.