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

Кейс Баскс
Kayce Basques
X GitHub
Софья Емельянова
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-устройстве с вашей машины для разработки.

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

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

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

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

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

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

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

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

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

Осмотреть элементы

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

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

Транслируйте экран 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-устройства» .

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