Отладка USB Chrome

Обновлено: 21.11.2024

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

Отладка Chrome для Android с помощью инструментов разработчика Chrome

Удаленная отладка на Android поддерживает:

Отладка веб-сайтов на вкладках браузера.
Отладка WebView в нативных приложениях для Android.
Прямая трансляция на компьютер для разработки с устройства Android.
Доступ к серверу разработки на Android с помощью переадресации портов и сопоставления виртуальных хостов.

В этом документе мы поговорим об отладке веб-сайта на вкладке браузера Chrome. Чтобы начать удаленную отладку, вам необходимо:

Chrome 32 или более поздней версии, установленной на вашем компьютере для разработки.
USB-кабель для подключения устройства Android.
Для отладки браузера: Android 4.0+ и Chrome для Android.

Примечание. Для удаленной отладки требуется, чтобы версия Chrome для настольных ПК была новее, чем версия Chrome для Android на вашем устройстве. Для достижения наилучших результатов используйте Chrome Canary (Mac/Windows) или выпуск канала Chrome Dev (Linux) на настольном компьютере и Chrome Stable на Android. Это гарантирует, что версия Chrome для ПК будет новее, чем версия Chrome для Android.

Настройка устройства Android

Следуйте этим инструкциям, чтобы настроить устройство Android для удаленной отладки.

Включить отладку по USB

На устройстве Android выберите "Настройки" > "Для разработчиков".

Примечание. В Android 4.2 и более поздних версиях параметры разработчика по умолчанию скрыты. Чтобы включить параметры разработчика, выберите «Настройки» > «О телефоне» и семь раз коснитесь «Номер сборки».

В параметрах разработчика установите флажок Отладка по USB:

Если в предупреждении предлагается разрешить отладку по USB. Нажмите "ОК".

Подключите свое устройство

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

Примечание. Если вы работаете в среде Windows, установите соответствующий USB-драйвер для вашего устройства. См. OEM-драйверы USB на сайте разработчиков Android.

Обнаружение устройств в Chrome

После настройки удаленной отладки на Android найдите свое устройство в Chrome.
В браузере Chrome для настольных ПК перейдите по адресу chrome://inspect. Убедитесь, что установлен флажок Обнаружить USB-устройства.
На вашем устройстве появляется предупреждение с предложением разрешить отладку по USB с вашего компьютера. Нажмите "ОК".
В панели уведомлений устройства отображается сообщение Отладка по USB подключена.

Примечание. Во время удаленной отладки Chrome не позволяет экрану вашего устройства переходить в спящий режим. Эта функция полезна для отладки, но менее безопасна. Так что следите за своим устройством!

На вашем компьютере на странице chrome://inspect отображаются все подключенные устройства, а также открытые вкладки и веб-представления с поддержкой отладки.

Отладка удаленных вкладок браузера

На странице chrome://inspect вы можете запускать DevTools и отлаживать вкладки удаленного браузера.
Чтобы начать отладку, нажмите "Проверить" под вкладкой браузера, которую нужно отладить.
На вашем компьютере запускается новый экземпляр Chrome DevTools. Из этого экземпляра вы можете взаимодействовать с выбранной вкладкой браузера на своем устройстве в режиме реального времени.

Например, вы можете использовать DevTools для проверки элементов веб-страницы на вашем устройстве:

Когда вы наводите указатель мыши на элемент на панели «Элементы», DevTools выделяет этот элемент на вашем устройстве.
Вы также можете щелкнуть значок проверки элемента Inspect Element в DevTools и коснуться экрана своего устройства. DevTools выделяет выбранный элемент на панели «Элементы».

Вот несколько советов, которые помогут вам начать удаленную отладку:

Используйте F5 (или Cmd+r на Mac), чтобы перезагрузить удаленную страницу из окна DevTools.
Держите устройство в сотовой сети. Используйте панель "Сеть" для просмотра водопада сети в реальных мобильных условиях.
Используйте панель «Таймлайн» для анализа рендеринга и загрузки ЦП. Оборудование на мобильных устройствах часто работает намного медленнее, чем на вашем компьютере для разработки.
Если вы используете локальный веб-сервер, используйте переадресацию портов или сопоставление виртуального хоста для доступа к сайту на вашем устройстве.

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

Начиная с KitKat 4.4.3, скринкаст доступен как для вкладок браузера, так и для Android WebView.

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

Screencast отображает только содержимое страницы. Прозрачные части скринкаста закрыты омнибоксом, клавиатурой устройства и другими интерфейсами устройства.

Примечание. Поскольку скринкаст непрерывно записывает кадры, это приводит к снижению производительности. Если ваши тесты чувствительны к частоте кадров, отключите скринкаст.

Когда вы взаимодействуете со скринкастом, клики преобразуются в касания, запуская соответствующие сенсорные события на устройстве. Нажатия клавиш вашего компьютера передаются на устройство, поэтому вы можете не печатать большими пальцами.

Другие DevTools также работают со скринкастом. Например, чтобы проверить элемент, щелкните значок проверки элемента «Проверить элемент», а затем щелкните внутри скринкаста.

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

Переадресация портов в Chrome для Android упрощает тестирование сайта разработки на мобильных устройствах. Он работает путем создания TCP-порта для прослушивания на вашем мобильном устройстве, который сопоставляется с определенным TCP-портом на вашем компьютере для разработки. Трафик между этими портами проходит через USB, поэтому подключение не зависит от конфигурации вашей сети.

Чтобы включить переадресацию портов:

Откройте chrome://inspect на своем компьютере для разработки.
Нажмите «Переадресация портов». Отобразятся настройки переадресации портов.
В поле Порт устройства введите номер порта, который будет прослушиваться вашим устройством Android. (Порт по умолчанию — 8080.)
В поле Хост введите IP-адрес (или имя хоста) и номер порта, на котором работает ваше веб-приложение.
Этот адрес может быть любым локальным местоположением, доступным с вашего компьютера для разработки. В настоящее время номера портов должны находиться в диапазоне от 1024 до 32767 (включительно).
Установите флажок Включить переадресацию портов.
Нажмите "Готово".
Индикаторы состояния порта на chrome://inspect становятся зелеными, когда переадресация портов выполнена успешно.

Теперь вы можете открыть новую вкладку Chrome для Android и просмотреть содержимое локального сервера на своем устройстве.

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

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

Рис. 1. Удаленная отладка позволяет проверять страницу, работающую на устройстве Android, с компьютера, на котором ведется разработка.

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

Откройте экран параметров разработчика на Android. См. раздел Настройка параметров разработчика на устройстве.

Выберите «Включить отладку по USB».

На компьютере для разработки откройте Chrome.

Убедитесь, что установлен флажок Обнаруживать USB-устройства.

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

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

Рис. 3. Удаленная цель успешно обнаружила автономное устройство, ожидающее авторизации

Если ваше устройство отображается как «Не в сети», примите запрос разрешения «Разрешить отладку по USB» на своем устройстве 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 не обнаруживает устройство при подключении, добавьте ответ на этот вопрос о переполнении стека или откройте проблему в репозитории webfundamentals!

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

Рис. 4. Подключенное удаленное устройство

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

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

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

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

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

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

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

Тестирование и отладка веб-сайтов и веб-приложений на мобильных устройствах может быть сложной задачей. Браузеры на телефонах и планшетах часто не имеют встроенных отладчиков, а эмуляция мобильных устройств никогда не бывает такой точной, как хотелось бы. Для отладки мобильных веб-сайтов на Android настольная версия Chrome предоставляет решение с удаленной отладкой.

В этой статье показано, как использовать удаленную отладку Chrome с вашего компьютера. Вы можете использовать одну из распространенных операционных систем для настольных компьютеров, например Windows, macOS или Linux.

Как отлаживать Android Chrome

Если вы считаете, что у вас может быть ошибка на мобильном веб-сайте или в нативном приложении для Android, но вы не можете точно определить ее, Raygun поддерживает отчеты о сбоях JavaScript, а также отчеты о сбоях Android. Вы можете воспользоваться бесплатной 14-дневной пробной версией здесь.

Настройка

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

Настройки телефона

Откройте приложение "Настройки" на телефоне. Вам нужно включить параметры разработчика, если вы еще этого не сделали. Для этого зайдите в меню «О телефоне», которое находится внутри меню «Система» на современных Android-устройствах.Как только вы окажетесь там, прокрутите вниз и нажмите «Номер сборки» семь раз. Теперь вернитесь к предыдущему экрану или в меню «Система» в приложении «Настройки». Внизу вы найдете новый пункт меню «Параметры разработчика».

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

Настройка компьютера (с использованием USB-отладки Android)

Установка драйвера

На данный момент это все, что мы можем сделать на телефоне, так что давайте подготовим наш компьютер. Шаги, которые нужно предпринять, немного отличаются в каждой из крупных операционных систем.

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

Если на вашем компьютере установлена macOS или Linux, вам не нужно устанавливать драйверы. Пользователи Mac фактически готовы к работе. Если на вашем компьютере работает Linux, необходимо выполнить еще несколько шагов по настройке. Вам нужно убедиться, что ваша учетная запись пользователя принадлежит к определенной группе, и вам нужно будет установить пакет с так называемыми «правилами udev». Это конфигурации, которые делают определенные USB-устройства известными вашему компьютеру с Linux. Если вам интересно узнать больше, я недавно написал специальную статью о настройке Linux для ADB.

Установить Android Debug Bridge (ADB)

После того как вы установили драйверы или правила udev, вам также понадобится ADB, который предоставляет интерфейс для связи с вашим мобильным устройством. ADB и другие инструменты платформы Android поставляются вместе с Android Studio, но их также можно загрузить отдельно.

Предпочтительнее использовать встроенный Android SDK Android Studio или официальный пакет инструментов платформы от Google. Пакеты инструментов платформы — это просто .zip-файлы, содержащие папку platform-tools. После извлечения файлов вы найдете там двоичные файлы, такие как adb.exe (Windows) или adb (macOS и Linux). Затем вы можете выполнить их по мере необходимости из оболочки или окна терминала по вашему выбору.

Если вы работаете в Windows и хотите получить самую минимальную версию ADB без лишних хлопот, загляните на форумы XDA; прокрутите вниз до заголовка «Загрузки» и щелкните первую ссылку в этом разделе.

После загрузки запустите его, чтобы установить ADB. После его установки вам нужно будет перейти в папку, в которую он был установлен (по умолчанию C:\Program Files(x86)\Minimal ADB и Fastboot) и дважды щелкнуть cmd-here.exe . Это откроет окно командной строки в этой папке.

Используя любой из методов, введите в окне оболочки adb start-server, чтобы запустить сервер ADB.

Примечание. Сервер ADB должен быть запущен в любое время, когда вы хотите выполнить отладку. Если вы перезагрузите компьютер, сервер не будет работать автоматически. Не рекомендуется запускать ADB в качестве постоянной фоновой службы.

Чтобы отлаживать веб-сайты на Android отсюда, убедитесь, что установлен флажок "Обнаруживать USB-устройства". Я также предлагаю оставить этот раздел инструментов разработчика открытым на вкладке, потому что он нам скоро понадобится снова.

Установление связи

Это все, что вы можете сделать с любым устройством по отдельности. Чтобы отлаживать веб-сайты в Android на устройстве, нам нужно соединить их вместе. Если вы еще этого не сделали, подключите телефон к компьютеру через USB. Если вы не сделали этого во время установки драйвера, вы можете увидеть на панели задач уведомление о том, что ваш компьютер настраивает новое устройство. Убедитесь, что ваш телефон включен и разблокирован. Если это так и сервер ADB запущен, вы должны увидеть всплывающее окно под названием «Разрешить отладку по USB?».

Если он не отображается, посмотрите в области уведомлений на устройстве Android. Если там написано «Подключено как медиа-устройство», что-то в этом роде или что-то про «MTP», нажмите на него. Это должно привести вас к экрану, который позволяет выбрать другой тип подключения. Для нашей цели «Камера (PTP)» является подходящим типом подключения. После того, как вы выбрали PTP, сообщение «Разрешить отладку по USB?должно появиться всплывающее окно.

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

Отладка веб-сайтов, работающих в Chrome на вашем устройстве

Пришло время прекратить настройку и приступить к отладке! Ну наконец то! Chrome на вашем компьютере должен показать вам список вкладок, открытых в браузере Chrome на вашем удаленном устройстве. Если вкладка, которую вы хотите отлаживать, не является активной вкладкой, вы можете щелкнуть вкладку «фокус», чтобы сделать ее активной вкладкой на устройстве. Затем нажмите ссылку «проверить».

Откроется инспектор для этой вкладки. Отсюда вы можете использовать инструменты разработчика Chrome почти так же, как если бы вы отлаживали веб-страницу в браузере настольного компьютера. Вы даже можете видеть экран своего устройства в инструментах разработчика. Если он еще не отображается или вы хотите отключить его, щелкните значок рядом со значком инспектора в левом верхнем углу инструментов разработчика.

Советы по отладке

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

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

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

На старых и менее мощных устройствах трансляция экрана использует большую часть вычислительной мощности вашего мобильного устройства. Вы можете заметить, что производительность кажется низкой во время трансляции экрана. Таким образом, если вы пытаетесь измерить производительность, отключите трансляцию экрана и взаимодействуйте напрямую с мобильным устройством.

Наконец, если вы столкнулись с проблемами, из-за которых при взаимодействии с устройством ничего не происходит, попробуйте закрыть приложение Chrome и снова открыть его. Вам нужно будет повторно подключиться к удаленному устройству через экран DevTools в инструментах разработчика. Если это не поможет, воспользуйтесь этим кратким контрольным списком:

Отключите устройство и снова подключите его.
Заблокируйте телефон и снова включите его.
Закройте окно инструментов разработчика и снова откройте его.

Заключение

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

Не слишком ли много времени вы потратили на обнаружение ошибки? Raygun помогает обнаруживать, диагностировать и устранять ошибки в коде JavaScript или Android. Интеллектуальные оповещения и группировка ошибок означают, что вы больше никогда не пропустите ошибку в своем приложении. Подробнее об отчетах о сбоях Android и JavaScript.

Подробнее об отладке Android

Производительность имеет значение

Лучшие статьи о производительности программного обеспечения со всего Интернета, доставляемые вам каждую неделю.

Ваша информация в безопасности с нами. Ознакомьтесь с нашей политикой конфиденциальности.

Дополнительная литература

Отладка JavaScript в инструментах разработчика Google Chrome за 7 простых шагов

Объявление: аналитика на уровне кода с помощью Azure Repos

Оповещение поступило: никогда больше не пропустите критически важную проблему

Время имеет решающее значение при выявлении и устранении проблем с вашим программным обеспечением. Чем дольше это займет…

Проверьте устройство с помощью браузера Chrome, если вы обнаружите проблему с вашим сайтом на устройстве Android 4+.

Если вам нужно выполнить отладку на устаревшем устройстве Android, в стандартном браузере Android или на другом устройстве, следуйте руководству по отладке на устаревшем Android с помощью стандартного браузера (и на других устройствах).

1. Включить меню параметров разработчика Android

На устройстве Android 4+ перейдите в меню "Настройки".

Выберите вариант "Об устройстве" (или "О телефоне").

Нажмите "Номер сборки" 7 раз.

2. Включить отладку по USB на устройстве Android

<р>1. На устройстве Android вернитесь в меню "Настройки".

<р>2. Включите переключатель "Параметры разработчика".

На некоторых устройствах "Параметры разработчика" – это еще один пункт меню.

<р>3.В меню "Параметры разработчика" включите "Отладка по USB".

Это включает режим отладки при подключении USB-кабеля.

3. Включить обнаружение USB в Chrome

<р>1. На компьютере откройте Chrome и перейдите на страницу chrome://inspect .

Страница "Параметры разработчика" загружается по умолчанию.

<р>2. Под заголовком "Устройства" установите флажок "Обнаружение USB-устройств".

4. Подключите Android-устройство к компьютеру

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

На устройстве Android разрешите отладку по USB, если вы видите запрос на разрешение.

Чтобы предотвратить появление предупреждений в будущем, включите переключатель "Всегда разрешать с этого компьютера" и нажмите "ОК".

5. Откройте страницу для отладки

На устройстве Android 4+, подключенном к компьютеру, откройте Chrome.

Заполните поля формы информацией о вашем сайте.

Нажмите "Предварительный просмотр".

Перейдите на свою страницу для отладки.

6. Осмотрите страницу

На компьютере откройте Chrome и перейдите на страницу chrome://inspect .

На боковой панели меню нажмите ссылку "Страницы".

Под заголовком "Страницы" найдите страницу, которую нужно отладить.

Нажмите "Проверить" под заголовком страницы.

Переадресация сетевых портов Включите переадресацию сетевых портов, если у вас возникли проблемы с портами.

Используйте инструменты разработчика Chrome для отладки страницы на устройстве Android 4+.

Используйте Chrome Remote Debugger для отладки приложения Cast.

Запустите Chrome Remote Debugger для определенного устройства Google Cast следующим образом:

Информацию об отладке приложений Cast на устройстве Android TV см. в разделе Android TV: отладка.

Чтобы отладить приложение Web Receiver на устройствах Google Cast, выполните следующие действия:

Для выполнения отладки необходимо зарегистрировать и приложение, и устройство.

Запустите приложение sender и выполните трансляцию на устройство Google Cast, чтобы загрузить приложение Web Receiver для отладки. Убедитесь, что отправитель и веб-приемник подключены к одной и той же сети. Важно! Отладка не будет работать, если этот шаг пропущен.

Есть два способа подключения к устройству для удаленной отладки:

В браузере Chrome введите в поле адреса следующее, чтобы перейти к инспектору Chrome:

Появится список устройств с поддержкой Cast в этой сети.

Выберите устройство для приложения Web Receiver, которое вы хотите отладить, нажав его ссылку «Проверить».

Должно открыться окно инспектора, позволяющее удаленно отлаживать приложение Web Receiver.

Напрямую к порту 9222 устройства

В браузере Chrome введите следующее в поле адреса, чтобы напрямую перейти к отлаживаемому устройству. Это может быть быстрее, чем Chrome Inspector, если в вашей сети много устройств:

IP-адрес устройства можно узнать, выбрав устройство в приложении Google Home, перейдя в настройки и заглянув в раздел «Информация».

Выберите сеанс, который вы хотите отладить, щелкнув его ссылку Удаленная отладка.

Если Chrome Remote Debugger не заполняется, нажмите значок слева от адресной строки и выберите настройки сайта . Прокрутите настройки до конца и измените параметр Небезопасное содержимое на Разрешить .

В консоли Chrome Remote Debugger включите ведение журнала отладки, введя следующее:

Поддерживается полное манипулирование DOM, а также полный Chrome JavaScript REPL (консоль), что позволит вам возиться с работающим приложением Web Receiver.

Когда ваш веб-приемник сломается (жизненный цикл завершится), отладчик станет неактивным с предупреждающим сообщением вверху. На этом этапе вы больше не можете взаимодействовать с отладчиком. Чтобы возобновить отладку, необходимо перезапустить приложение Web Receiver, а затем перезагрузить инспектор.

Точки останова

Вы можете добавить в код точки останова вручную с помощью отладчика; в вашем коде веб-приемника.

Локальное кэширование

Используйте window.location.reload(true); выполнить принудительную перезагрузку, которая очищает кеш приложения Web Receiver.

Сохранение журналов между сеансами

Вы можете сохранить журналы между сеансами, щелкнув значок шестеренки в отладчике и установив флажок "Сохранить журнал при навигации".

Если не указано иное, содержимое этой страницы предоставляется по лицензии Creative Commons Attribution 4.0, а образцы кода — по лицензии Apache 2.0. Подробнее см. в Правилах сайта Google Developers. Java является зарегистрированным товарным знаком Oracle и/или ее дочерних компаний.

Читайте также: