Подключение смартфона Android для отладки web-приложений в Chrome на Win10

Table of contents

• Introduction

• Активация режима отладки

• Android USB Driver for Windows

• Установка Android SDK

• Отладка web-приложения

Introduction

Отладку web-приложений можно выполнять как в эмуляторе с помощью Chrome DevTools, так и с использованием реального устройства. Использование отладки на реальном устройстве позволяет точно идентифицировать проблему. Рассмотрим шаги по настройке подключения устройства к Chrome DevTools.

Активация режима отладки

Первым делом необходимо включить поддержку отладки на самом устройстве. Для версии Android 4.2 нужно зайти в настройки устройства, далее открыть информацию о телефоне и перейти к просмотру сведений о ПО. Находим пункт с номером сборки и начинаем кликать по нему: необходимо кликнуть 7 раз, после чего мы перейдем в режим разработчика (после нескольких кликов можно будет увидеть обратный отсчет с оставшимся количеством кликов до активации режима разработки).

После активации режима разработчика необходимо зайти на первый уровень меню настроек и перейти в новый пункт: "Параметры разработчика" (обычно в самом конце списка). В списке открывшихся опций активируем отладку по USB.

Больше информации по режиму разработчика можно найти в разделе справки: https://developer.android.com/studio/debug/dev-options.

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

Android USB Driver for Windows

Установим драйвер с официального сайта: https://developer.samsung.com/mobile/android-usb-driver.html.

Установка Android SDK

После установки драйверов мы перейдем к установке Android SDK. Сделать это можно, установив Android Studio через JetBrains Toolbox App или же с официального сайта: https://developer.android.com/studio.

Запустим Android Studio и установим Android SDK. Вместе с SDK установится и ADB (Android Debug Bridge - Отладочный мост Android), который позволяет управлять устройством на базе Android.

Перейдя в настройки File | Settings | Appearance & Behavior | System Settings | Android SDK, можно посмотреть путь, по которому был установлен SDK. Обычно это %AppData%\..\Local\Android\Sdk\.

Перейдем в директорию platform-tools с необходимой нам программой: adb. Откроем консоль и запустим сервер:

./adb start-server

После этого обновим chrome://inspect/#devices, затем Chrome должен будет показать подключенные устройства. Если этого не произошло, то необходимо переподключить устройство к USB и разрешить отладку во всплывающем окне.

Отладка web-приложения

После того, как на странице chrome://inspect/#devices появились подключенные устройства, необходимо запустить Chrome на устройстве и открыть страницу для отладки, после чего обновить chrome://inspect/#devices.

Нажав на inspect, откроется Chrome DevTools с продублированным экраном с устройства.

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

При блокировке подключенного устройства экран отладки будет исчезать, чтобы этого избежать, можно в настройках для разработчика (на устройстве) активировать опцию "Не выключать экран".