Удаленная отладка Android-устройств

Кейси Баски
София Емельянова
Sofia Emelianova
GitHub

Удаленная отладка живого контента на устройстве Android с компьютера под управлением Windows, Mac или Linux. Этот урок научит вас, как:

  • Настройте свое устройство Android для удаленной отладки и найдите его на своем компьютере разработки.
  • Проверяйте и отлаживайте контент на вашем Android-устройстве со своей машины разработки.
  • Скриншот содержимого с вашего устройства Android на экземпляр DevTools на вашей машине разработки.

Схема удаленной отладки

Шаг 1. Найдите свое устройство Android

Приведенный ниже рабочий процесс подойдет большинству пользователей. Дополнительные сведения см. в разделе «Устранение неполадок: DevTools не обнаруживает устройство Android» .

  1. Откройте экран «Параметры разработчика» на своем Android. См. раздел Настройка параметров разработчика на устройстве .
  2. Выберите «Включить отладку по USB» .
  3. На вашей машине разработки откройте Chrome.
  4. Перейдите на chrome://inspect#devices .

  5. Убеждаться Флажок. Обнаружение USB-устройств включено.

    Флажок «Обнаружить USB-устройства» установлен.

  6. Подключите устройство Android напрямую к компьютеру для разработки с помощью USB-кабеля.

  7. Если вы подключаете свое устройство впервые, оно будет отображаться как «Не в сети» и ожидает аутентификации.

    Автономное устройство ожидает аутентификации.

    В этом случае примите приглашение на сеанс отладки на экране вашего устройства.

  8. Если вы видите название модели вашего устройства Android, DevTools успешно установил соединение с вашим устройством.

    Успешно подключенное устройство, обозначенное названием модели.

  9. Перейдите к шагу 2 .

Устранение неполадок: DevTools не обнаруживает устройство Android.

Убедитесь, что ваше оборудование настроено правильно:

  • Если вы используете USB-концентратор, попробуйте вместо этого подключить устройство Android напрямую к компьютеру для разработки.
  • Попробуйте отсоединить USB-кабель между устройством Android и компьютером разработки, а затем снова подключить его. Делайте это, пока экраны Android и компьютера разработки разблокированы.
  • Убедитесь, что ваш USB-кабель работает. У вас должна быть возможность проверять файлы на вашем устройстве Android с компьютера, на котором вы разрабатываете.

Убедитесь, что ваше программное обеспечение настроено правильно:

Если вы не видите приглашение «Разрешить отладку по USB» на вашем устройстве Android, попробуйте:

  • Отключение и повторное подключение USB-кабеля, когда DevTools сосредоточен на вашем компьютере для разработки и отображается главный экран Android. Другими словами, иногда подсказка не отображается, когда экраны вашего Android или компьютера для разработки заблокированы.
  • Обновление настроек дисплея вашего Android-устройства и компьютера разработки, чтобы они никогда не переходили в спящий режим.
  • Установка режима USB Android на PTP. См. раздел «Galaxy S4 не отображает диалоговое окно авторизации USB-отладки» .
  • Выберите «Отменить авторизацию отладки по USB» на экране «Параметры разработчика» на вашем устройстве Android, чтобы сбросить его в новое состояние.

Если вы нашли решение, которое не упомянуто в этом разделе, или в Chrome DevTools Devices не обнаруживает устройство при подключении , добавьте ответ на этот вопрос о переполнении стека или откройте проблему в репозитории Developer.chrome.com !

Шаг 2. Отладка содержимого на устройстве Android с компьютера разработки.

  1. Откройте Chrome на своем устройстве Android.

  2. В chrome://inspect/#devices на вашем компьютере разработки вы увидите название модели вашего устройства Android, за которым следует его серийный номер. Ниже вы можете увидеть версию Chrome, работающую на устройстве, с номером версии в скобках.

    Версия Chrome, работающая на устройстве.

  3. На вкладке «Открыть с текстовым полем URL» введите URL-адрес и нажмите «Открыть» . Страница откроется в новой вкладке на вашем Android-устройстве.

    Удаленная вкладка, указанная в разделе.

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

  4. Нажмите «Проверить» рядом с URL-адресом, который вы только что открыли. Откроется новый экземпляр DevTools.

Новый экземпляр DevTools для удаленной вкладки.

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

Дополнительные действия: пауза, фокусировка, перезагрузка или закрытие вкладки.

Под URL-адресом вы можете найти меню для приостановки, фокусировки, перезагрузки или закрытия вкладки.

Меню для паузы, перезагрузки, фокусировки или закрытия вкладки.

Осмотр элементов

Перейдите на панель «Элементы» вашего экземпляра DevTools и наведите указатель мыши на элемент, чтобы выделить его в области просмотра вашего устройства Android.

Вы также можете коснуться элемента на экране устройства Android, чтобы выбрать его на панели «Элементы» . Нажмите «Выбрать элемент». Выберите элемент на экземпляре DevTools, а затем коснитесь элемента на экране устройства Android. Обратите внимание, что «Выбрать элемент» отключается после первого касания, поэтому вам необходимо включать его каждый раз, когда вы хотите использовать эту функцию.

Скриншот экрана Android на машину разработки

Нажмите «Переключить скринкаст». Переключить скринкаст для просмотра содержимого вашего устройства Android в экземпляре DevTools.

Вы можете взаимодействовать со скринкастом несколькими способами:

  • Щелчки преобразуются в нажатия, вызывая на устройстве правильные события касания.
  • Нажатия клавиш вашего компьютера передаются на устройство.
  • Чтобы имитировать жест сжатия, удерживайте клавишу Shift во время перетаскивания.
  • Для прокрутки используйте трекпад или колесико мыши либо перемещайте указатель мыши.

Некоторые примечания к скринкастам:

  • Скринкасты отображают только содержимое страницы. Прозрачные части скринкаста представляют интерфейсы устройств, такие как адресная строка Chrome, строка состояния Android или клавиатура Android.
  • Скринкасты отрицательно влияют на частоту кадров. Отключите скринкастинг при измерении прокрутки или анимации, чтобы получить более точное представление о производительности вашей страницы.
  • Если экран вашего устройства Android заблокируется, содержимое скринкаста исчезнет. Разблокируйте экран устройства Android, чтобы автоматически возобновить скринкаст.

Отладка вручную через Android Debug Bridge (adb)

В некоторых редких случаях может оказаться полезным альтернативный метод удаленной отладки. Например, вы можете подключиться напрямую к протоколу Chrome DevTools (CDP) вашего Chrome на Android.

Для этого вы можете использовать Android Debug Bridge (adb) :

  1. Обязательно включите параметры разработчика и отладку по USB на вашем устройстве Android.
  2. Откройте Chrome на своем устройстве Android.

  3. Подключите устройство Android к машине разработки с помощью:

  4. В командной строке вашего компьютера разработки запустите adb devices -l и проверьте, присутствует ли ваше устройство в списке.

  5. Перенаправьте сокет CDP на устройстве на локальный порт вашего компьютера, например, 9222 . Для этого запустите:

    adb forward tcp:9222 localabstract:chrome_devtools_remote

  6. После успешного подключения вы увидите следующее:

    • http://localhost:9222/json перечисляет цели вашей page .
    • http://localhost:9222/json/version предоставляет целевую конечную точку browser , как указано в документации CDP .
    • chrome://inspect/#devices заполняется, даже если параметр «Обнаружение USB-устройств» не отмечен.

Для устранения неполадок см.: