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

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

Удалённая отладка контента в реальном времени на устройстве Android с компьютера под управлением Windows, Mac или Linux. В этом руководстве вы узнаете, как:

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

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

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

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

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

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

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

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

  7. При первом подключении устройство будет отображаться как "Офлайн" и ожидать аутентификации.

    Устройство отключено от сети, ожидается аутентификация.

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

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

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

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

Устранение неполадок: Инструменты разработчика не распознают устройство Android.

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

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

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

Если на вашем устройстве Android не отображается запрос на разрешение отладки по USB, попробуйте следующее:

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

Если вы найдете решение, не упомянутое в этом разделе или в статье «Устройства Chrome не обнаруживают устройство при подключении» , пожалуйста, добавьте ответ на этот вопрос на Stack Overflow или создайте заявку в репозитории 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.

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

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

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

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

Проверьте элементы

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

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

Транслируйте экран вашего Android-устройства на компьютер разработчика.

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

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

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

Несколько замечаний по поводу записи экрана:

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

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

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

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

  1. Убедитесь, что на вашем устройстве Android включены параметры разработчика и отладка по USB .
  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-устройства» не отмечен.

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