Сегодня Интернет чаще просматривается на мобильных телефонах, чем на настольных компьютерах. Поскольку устройства стали действительно портативными, а размеры экранов меньше. Поэтому, если вы разрабатываете веб-приложение, вы просто не можете избежать поддержки мобильных телефонов (Android или iOS). Неработающие или некачественно выглядящие сайты на мобильных экранах действительно могут нанести ущерб вашей репутации в Интернете. Пользовательский интерфейс на телефонах полностью отличается от настольных. Поэтому разработчикам приходится специально разрабатывать приложения для адаптации к экрану мобильных устройств.
Google Chrome Dev предоставляет инструменты, которые позволяют вам проверять, отлаживать и анализировать работу на устройстве, и вы можете использовать инструменты Chrome Dev на локальном компьютере для отладки приложения на мобильном устройстве. В этом руководстве мы узнаем, как настроить локальную машину разработки для удаленной отладки на Android. Мы будем выполнять отладку через USB-соединение между вашим мобильным устройством и вашей локальной машиной разработки.
Для продолжения удаленной отладки вам потребуется следующее:
- Мобильный телефон или планшет Android с установленным Chrome для Android 28 (его можно установить с здесь).
- USB-кабель для подключения устройства Android к локальной машине разработки. Также убедитесь, что у вас установлены необходимые диски для подключения мобильного Android-устройства к компьютеру.
- Проверить Список OEM-драйверов USB и подберите для себя подходящие драйверы.
- Chrome 28+ установлен на вашем локальном компьютере для разработки.
- Убедитесь, что на вашем локальном компьютере для разработки установлено расширение 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 предоставляет эти инструменты, которые решают настоящую проблему для разработчиков, создающих приложения, совместимые с устройствами.
Приятно знать о Chrome Dev. Предложение платформы разработчикам как для браузеров, так и для мобильных устройств (iOS и Android) увеличивается день ото дня. Спасибо за все подробные фотографии процесса отладки.
Это действительно потрясающий и полезный пост. Отсюда мы можем понять четкие процедуры удаленной отладки веб-приложений на Android. Также изображения ясно и легко объясняют процедуру работы с Chrome Dev.
Вау! Android - это круто!
Не знал, возможно ли это вообще
Думаю, это действительно полезный пост для всех пользователей Android. особенно в те времена много приложений для браузеров и обычно сбивают с толку пользователей.
Все фотографии очень подробны, и их легко отслеживать на всех этапах.
Спасибо за ваш обмен.
Стефан Ву
На самом деле этот пост очень полезен для отладки веб-приложений на Android. Не думал об этом.
Это очень информативный пост. Теперь мы можем удаленно отлаживать веб-приложения на Android.
Очень хорошо представленный, информативный пост. Мне всегда было интересно, как удаленно отлаживать веб-приложения, но другие блоги, которые я читал в прошлом, были не очень простыми. Спасибо за ясное изложение тем из нас, кто изо всех сил пытается следовать технологическому языку.
По словам Стефана, изображения очень подробны, что упрощает выполнение инструкций.
Я искал способ отладить свой Samsung Galaxy S3. Думаю, я попал в нужное место, потому что ваше руководство действительно помогло, и мне удалось успешно отладить свое устройство. Большое спасибо за помощь.
Вау! Я не знал, что вы можете сделать это с моим телефоном Android.
Благодаря!
Действительно потрясающе, я никогда не думал, что отладку можно выполнять удаленно, особенно для приложений Android ...
Здравствуйте,
Спасибо, наконец-то я выполнил отладку удаленно, очень полезно.