Начало работы с удаленной отладкой устройств Android

Это завершение Chrome Dev Summit 2020 ! Смотрите все сеансы на goo.gle/cds20-sessions прямо сейчас!

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

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

Шаг 1. Обнаружьте свое устройство Android

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

  1. Откройте экран Параметры разработчика на вашем Android. См. Раздел Настройка параметров разработчика на устройстве.
  2. Выберите Включить отладку по USB .
  3. На компьютере разработчика откройте Chrome.
  4. Перейдите в chrome://проверьте # устройств .
  5. Убедитесь, что Discover USB флажок устройства установлен.

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

  7. Если ваше устройство отображается как Offline , примите запрос разрешения Разрешить USBDebugging на вашем устройстве Android.

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

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

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

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

  • Если ваша машина для разработки работает под управлением Windows, попробуйте вручную установить драйверы USB для вашего устройства Android. См. Установка OEM-драйверов USB.
  • Некоторые комбинации устройств Windows и Android (особенно Samsung) требуют дополнительной настройки. См. Статью Chrome DevTools. Устройства не обнаруживают устройство при подключении..

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

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

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

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

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

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

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

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

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

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

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

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

Сделайте скринкаст экрана Android на машине разработки

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

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

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

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

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

Отзыв

Была ли эта страница полезной?
Да
Что было лучше всего на этой странице?
Это помогло мне завершить цель (и)
Спасибо за отзыв. Если у вас есть конкретные идеи по улучшению этой страницы, создайте проблему.
Там была вся необходимая мне информация
Спасибо за отзыв. Если у вас есть конкретные идеи по улучшению этой страницы, создайте проблему.
В нем была точная информация
Спасибо за отзыв. Если у вас есть конкретные идеи по улучшению этой страницы, создайте проблему.
Было легко читать
Спасибо за отзыв. Если у вас есть конкретные идеи по улучшению этой страницы, создайте проблему.
Что-то еще
Спасибо за отзыв. Если у вас есть конкретные идеи по улучшению этой страницы, создайте проблему.
Нет
Что было хуже всего на этой странице?
Это не помогло мне достичь моей цели (целей)
Спасибо за отзыв. Если у вас есть конкретные идеи по улучшению этой страницы, создайте проблему.
Отсутствовала нужная мне информация
Спасибо за отзыв. Если у вас есть конкретные идеи, как улучшить эту страницу, создайте проблему.
В нем была неточная информация
Спасибо за отзыв. Если у вас есть конкретные идеи по улучшению этой страницы, создайте проблему.
Было трудно читать
Спасибо за отзыв. Если у вас есть конкретные идеи по улучшению этой страницы, создайте проблему.
Что-то еще
Спасибо за отзыв. Если у вас есть конкретные идеи по улучшению этой страницы, создайте проблему.

[{«type»: «thumb-down», «id»: «missingTheInformationINeed», «label»: «Отсутствует нужная мне информация»}, {«type»: «thumb-down», «id»: «tooComplicatedTooManySteps», «label»: «Слишком сложно/слишком много шагов»}, {«type»: «thumb-down», «id»: «outOfDate», «label»: «Out of date»}, {«type»: «thumb-down», «id»: «samplesCodeIssue», » label «:» Образцы/Проблема кода «}, {» type «:» thumb-down «,» id «:» otherDown «,» label «:» Other «}] [{ «type»: «thumb-up», «id»: «easyToUnderstand», «label»: «Легко понять»}, {«type»: «thumb-up», «id»: «resolMyProblem», «label «:» Моя проблема решена «}, {» type «:» thumb-up «,» id «:» otherUp «,» label «:» Other «}]

Оцените статью
techsly.ru
Добавить комментарий