Отладка по usb chrome
В этой статье рассказывается, как использовать инструменты разработчика Chrome для отладки мобильной веб-страницы Android, основное содержание цитируется изУдаленная отладка Chrome для мобильной веб-разработки и отладки (удаленная отладка)。
Установка Android SDK
Запустим Android Studio и установим Android SDK . Вместе с SDK установится и ADB ( Android Debug Bridge - Отладочный мост Android ), который позволяет управлять устройством на базе Android .
Перейдя в настройки File | Settings | Appearance & Behavior | System Settings | Android SDK , можно посмотреть путь, по которому был установлен SDK . Обычно это %AppData%\..\Local\Android\Sdk\ .
Перейдем в директорию platform-tools с необходимой нам программой: adb . Откроем консоль и запустим сервер:
Шаги отладки
1. Включите режим отладки по USB на мобильном устройстве Android.
Android 3.2+, откройте настройки-приложения-разработка, поставьте галочку «Отладка по USB»
Android 4.0 ~ Android 4.1, открываем настройки-параметры разработчика-вводим и ставим галочку "Отладка по USB"
Android 4.2+, откройте настройки - о телефоне - информация о конфигурации телефона - 7 раз нажмите «номер версии», вернитесь на верхний уровень, вы увидите отображаемые «Параметры разработчика», отметьте «Отладка по USB»
Во-вторых, используйте USB-кабель для передачи данных для подключения устройства.
После того, как драйвер USB установлен и успешно подключен, вы можете увидеть всплывающее окно с запросом на устройстве, разрешить ли этому компьютеру отладку через USB, пожалуйста, проверьте это и нажмите OK.
В-третьих, откройте страницу устройства для проверки хрома (Проверить устройства).
Откройте меню браузера Chrome - Дополнительные инструменты - Проверить устройства (Chromemenu> Дополнительные инструменты> Проверить устройства) или напрямую введите chrome: // inspect или about: inspect в адресной строке браузера.
После открытия DevTools обязательно отметьте Обнаружение USB-устройств.
Если USB-соединение установлено успешно, в это время мы можем увидеть модель мобильного устройства и страницу, работающую на устройстве, а также список WebView, который позволяет отладку. Найдите целевую страницу, которую необходимо отладить, нажмите кнопку «Проверить», чтобы открыть DevTools, нажмите «Перезагрузить», чтобы перезагрузить текущую страницу отладки, нажмите вкладку «Фокус», чтобы поместить вкладку вверху, закрыть, чтобы закрыть текущую страницу, или вы можете открыть новую страницу путем ввода URL-адреса в поле ввода Одна страница.
Кроме того, если после подключения USB-кабеля для передачи данных не отображаются подключенные устройства, выполните следующие действия для устранения неполадок:
Убедитесь, что ваше устройство подключено к USB, проверьте кабель USB для передачи данных
Убедитесь, что ваше устройство указано как доступное, выполнив команды устройства ADB. Если нет, проверьте, включена ли отладка по USB на вашем устройстве.
Откройте браузер Chrome на рабочем столе chrome: // inspect, чтобы проверить, выбрано ли обнаружение USB-устройств.
Убедитесь, что версия настольного браузера выше, чем номер версии Chrome на мобильном устройстве.
Если версия Chrome для Android ниже, проверьте настройки браузера Chrome на своем мобильном устройстве и убедитесь, что в настройках включена отладка по USB. В старшей версии такого пункта настройки нет, настраивать не нужно.
Если он по-прежнему не отображается, попробуйте повторно подключить USB-кабель для передачи данных.
Четыре, отладка
После того, как вы нажмете кнопку проверки, чтобы открыть DevTools, вы можете выбрать элемент DOM на странице, и соответствующий элемент на устройстве также будет выделен. Вы также можете использовать элемент проверки в DevTools, чтобы выбрать целевой элемент, и вы можете взаимодействовать с страница мобильного устройства в режиме реального времени, чтобы легко найти проблему. Отладить код.
Примечание. При использовании Chrome для удаленной отладки причина, по которой вам нужно перевернуть стену, заключается в том, что Chrome необходимо загрузить соответствующие инструменты разработчика, соответствующие версии мобильного браузера. Чтобы уменьшить размер установочного пакета Chrome, эти наборы инструментов разработчика размещаются на сервере (доступны только тогда, когда они находятся за стеной) и загружаются, когда требуется отладка. Когда загрузка будет завершена, они будут сохранены в AppCache, и нет необходимости загружать соответствующую версию в будущем, и их можно использовать в автономном режиме.
Введите новый URL-адрес в поле ввода и нажмите «Открыть», чтобы открыть новую страницу, которую нужно отлаживать.
Из-за разных версий Chrome DevTools также могут несколько отличаться
Используйте сочетание клавиш F5 (CMD + R для Mac), чтобы перезагрузить страницу в окне DevTools.
Используйте панель «Сеть» для наблюдения за загрузкой ресурсов страницы в реальном сетевом окружении мобильного телефона в режиме реального времени.
Панель временной шкалы можно использовать для анализа отрисовки страницы и использования ЦП. Как правило, производительность мобильных устройств ниже, чем у компьютеров.
Выполнение скрипта записывается в консоли DevTools Console, и страницы, проверенные на мобильном устройстве, будут отображаться синхронно.
Если вы хотите отлаживать локально созданную серверную программу, вам необходимо использовать переадресацию портов и сопоставление виртуальных хостов, чтобы устройство могло отображать содержимое страницы в вашей локальной среде.
Отладка приложения Webview
Для отладки WebView требуется, чтобы версия системы Android была Android 4.4+ или выше, и вам необходимо настроить соответствующий код в своем приложении (вызовите статический метод setWebContentsDebuggingEnabled в классе WebView), код выглядит следующим образом:
Вышеупомянутый метод настройки применим ко всем ситуациям WebView в приложениях Android.
Возможность отладки Android WebView не зависит от отлаживаемой переменной флага в манифесте приложения. Если вы хотите разрешить WebView выполнять удаленную отладку только в том случае, если значение debuggable истинно, можно использовать следующий фрагмент кода:
Доступный список WebView выглядит следующим образом:
Перечисленная информация включает заголовок страницы, URL-адрес, размер страницы и ее относительное положение относительно экрана устройства.
Android USB Driver for Windows
Отладка web-приложения
Нажав на inspect , откроется Chrome DevTools с продублированным экраном с устройства.
Таким образом, теперь мы можем точно отлаживать свое web-приложение на подключенном устройстве.
При блокировке подключенного устройства экран отладки будет исчезать, чтобы этого избежать, можно в настройках для разработчика (на устройстве) активировать опцию "Не выключать экран".
Remote debug live content on an Android device from your Windows, Mac, or Linux computer. This tutorial teaches you how to:
- Set up your Android device for remote debugging, and discover it from your development machine.
- Inspect and debug live content on your Android device from your development machine.
- Screencast content from your Android device onto a DevTools instance on your development machine.
Figure 1. Remote Debugging lets you inspect a page running on an Android device from your development machine.
The workflow below works for most users. See Troubleshooting: DevTools is not detecting the Android device for more help.
Open the Developer Options screen on your Android. See Configure On-Device Developer Options.
Select Enable USB Debugging.
On your development machine, open Chrome.
Make sure that the Discover USB devices checkbox is enabled.
Figure 2. The Discover USB Devices checkbox is enabled
Connect your Android device directly to your development machine using a USB cable. Your Android device may ask you to confirm that you trust this computer. The first time you do this, you usually see that DevTools has detected an offline device. If you see the model name of your Android device, then DevTools has successfully established the connection to your device. Continue to Step 2.
Figure 3. The Remote Target has successfully detected an offline device that is pending authorization
If your device is showing up as Offline, accept the Allow USB Debugging permission prompt on your Android device.
Make sure that your hardware is set up correctly:
- If you're using a USB hub, try connecting your Android device directly to your development machine instead.
- Try unplugging the USB cable between your Android device and development machine, and then plugging it back in. Do it while your Android and development machine screens are unlocked.
- Make sure that your USB cable works. You should be able to inspect files on your Android device from your development machine.
Make sure that your software is set up correctly:
- If your development machine is running Windows, try manually installing the USB drivers for your Android device. See Install OEM USB Drivers.
- Some combinations of Windows and Android devices (especially Samsung) require extra set up. See Chrome DevTools Devices does not detect device when plugged in.
If you don't see the Allow USB Debugging prompt on your Android device try:
- Disconnecting and then re-connecting the USB cable while DevTools is in focus on your development machine and your Android homescreen is showing. In other words, sometimes the prompt doesn't show up when your Android or development machine screens are locked.
- Updating the display settings for your Android device and development machine so that they never go to sleep.
- Setting Android's USB mode to PTP. See Galaxy S4 does not show Authorize USB debugging dialog box.
- Select Revoke USB Debugging Authorizations from the Developer Options screen on your Android device to reset it to a fresh state.
If you find a solution that is not mentioned in this section or in Chrome DevTools Devices does not detect device when plugged in, please add an answer to that Stack Overflow question, or open an issue in the webfundamentals repository!
Open Chrome on your Android device.
Figure 4. A connected remote device
In the Open tab with url text box, enter a URL and then click Open. The page opens in a new tab on your Android device.
Click Inspect next to the URL that you just opened. A new DevTools instance opens. The version of Chrome running on your Android device determines the version of DevTools that opens on your development machine. So, if your Android device is running a very old version of Chrome, the DevTools instance may look very different than what you're used to.
Below the URL you can find a menu to pause, focus, reload or close a tab.
Figure 5. The menu for pausing, reloading, focusing, or closing a tab
Go to the Elements panel of your DevTools instance, and hover over an element to highlight it in the viewport of your Android device.
You can also tap an element on your Android device screen to select it in the Elements panel. Click Select Element on your DevTools instance, and then tap the element on your Android device screen. Note that Select Element is disabled after the first touch, so you need to re-enable it every time you want to use this feature.
Click Toggle Screencast to view the content of your Android device in your DevTools instance.
Поскольку под управлением Android работает более 2,5 млрд устройств, разработчики не могут игнорировать оптимизацию веб-страниц для этой операционной системы (ОС). Обычно на устройствах с Android предустановлен браузер Google Chrome, поэтому большинство пользователей, скорее всего, отдадут предпочтение ему. К тому же многие используют его и на компьютере. С появлением технологии прогрессивных веб-приложений (Progressive Web Apps — PWA) пользователи ожидают их высококачественные версии и в браузере, а не только в форме нативных приложений.
Несмотря на возможность изменять размер окна браузера и использовать инструменты разработчика, полностью смоделировать особенности работы приложения на мобильных устройствах не получится. Например, функция выбора элемента работает на экране монитора компьютера, но имеет проблемы на мобильном девайсе. Версии браузеров для настольных компьютеров и мобильных устройств различаются, поскольку некоторые функции зависят от используемой платформы.
Рассмотрим процесс тестирования веб-сайтов на устройствах Android с помощью инструментов удаленной отладки Chrome.
1. Включите в настройках разработчика устройства Android отладку через USB.
2. Подключите смартфон кабелем к порту USB компьютера. Устройство Android может запросить подтверждение на подключение к этому компьютеру.
4. Убедитесь, что у вас установлен флажок “Discover USB devices” (Обнаруживать USB-устройства).
5. Если приложение работает локально, тогда необходимо добавить переадресацию портов. В противном случае Android-устройство не сможет подключиться к приложению! В этом примере я добавил переадресацию для локального внешнего порта 3000 и локального внутреннего порта 5000.
6. Откройте свой сайт, указав в поле ввода URL-адрес.
7. Обязательно включите в меню Screencast, чтобы на экране компьютера сайт отображался так же, как и на вашем устройстве. Теперь можно проверять и отлаживать его с помощью инструментов Chrome DevTools.
На экране выше представлено веб-приложение, работающее на localhost: 3000. Как и на любом другом сайте, здесь можно проверять DOM, изменять стили, отлаживать код JavaScript, моделировать медленную сеть и многое другое.
· Возможность взаимодействовать с сайтом как на компьютере, так и на устройстве Android.
· Chrome DevTools помогает основательно проверить и отладить тестируемый сайт.
· Хорошая производительность для обычных сайтов и приложений. Большинство веб-страниц и даже одностраничные приложения должны отображаться безупречно.
· Выполненные в коде изменения отображаются автоматически (если этого не произошло, перезагрузите страницу или выполните оперативную/горячую перезагрузку модуля).
· Тестирование на реальных устройствах более эффективно в сравнении с переключением на мобильное представления в браузере Chrome.
· Производительность системы может оказаться недостаточной из-за потоковой передачи.
· Поскольку это функциональность Google Chrome, вы не сможете использовать такой же подход и с другими браузерами, например с Mozilla Firefox.
Это краткое введение демонстрирует возможность несложной удаленной отладки отображения сайтов в браузере Chrome на устройствах Android с помощью Chrome DevTools.
Базовые знания
Сфера применения
В настоящее время удаленная отладка Android поддерживает отладку во всех операционных системах (Windows, Mac, Linux и Chrome OS.). Поддерживаемые функции отладки:
Отладка страниц веб-сайта
Отладка WebView в собственном приложении Android
Синхронно отображать изображение экрана устройства Android на машине разработки в режиме реального времени
Реализуйте интерактивную отладку между мобильными устройствами Android и серверами разработки с помощью переадресации портов и сопоставления виртуальных хостов.
Требования к вводу в эксплуатацию
Среда разработки: Chrome32 +
Кабелем USB для передачи данных подключите компьютер и мобильное устройство, установите драйвер USB соответствующей модели (ссылка для скачивания). Если на компьютере установлено программное обеспечение, такое как Baidu Mobile Assistant и 360 Mobile Assistant, соответствующий драйвер USB может быть автоматически установлен после подключения.
Для отладки веб-страниц на мобильном устройстве должен быть установлен Chrome для Android, а система Android должна быть Android 4.0+.
Для отладки APP WebView система должна быть Android 4.4+, а Webview в собственном приложении должен быть настроен с соответствующими операторами отладки (см. Шаги ниже)
Примечание. Для удаленной отладки требуется, чтобы версия браузера Chrome для настольных ПК была выше версии мобильного устройства Android. По возможности лучше всего использовать Chrome Canary Special Edition Chrome Canary (Mac / Windows) или версию Chrome для разработчиков рабочего стола Chrome Dev (Linux).
Базовые знания
Сфера применения
В настоящее время удаленная отладка Android поддерживает отладку во всех операционных системах (Windows, Mac, Linux и Chrome OS.). Поддерживаемые функции отладки:
Отладка страниц веб-сайта
Отладка WebView в собственном приложении Android
Синхронно отображать изображение экрана устройства Android на машине разработки в режиме реального времени
Реализуйте интерактивную отладку между мобильными устройствами Android и серверами разработки с помощью переадресации портов и сопоставления виртуальных хостов.
Требования к вводу в эксплуатацию
Среда разработки: Chrome32 +
Кабелем USB для передачи данных подключите компьютер и мобильное устройство, установите драйвер USB соответствующей модели (ссылка для скачивания). Если на компьютере установлено программное обеспечение, такое как Baidu Mobile Assistant и 360 Mobile Assistant, соответствующий драйвер USB может быть автоматически установлен после подключения.
Для отладки веб-страниц на мобильном устройстве должен быть установлен Chrome для Android, а система Android должна быть Android 4.0+.
Для отладки APP WebView система должна быть Android 4.4+, а Webview в собственном приложении должен быть настроен с соответствующими операторами отладки (см. Шаги ниже)
Примечание. Для удаленной отладки требуется, чтобы версия браузера Chrome для настольных ПК была выше версии мобильного устройства Android. По возможности лучше всего использовать Chrome Canary Special Edition Chrome Canary (Mac / Windows) или версию Chrome для разработчиков рабочего стола Chrome Dev (Linux).
Активация режима отладки
Первым делом необходимо включить поддержку отладки на самом устройстве. Для версии Android 4.2 нужно зайти в настройки устройства, далее открыть информацию о телефоне и перейти к просмотру сведений о ПО. Находим пункт с номером сборки и начинаем кликать по нему: необходимо кликнуть 7 раз, после чего мы перейдем в режим разработчика (после нескольких кликов можно будет увидеть обратный отсчет с оставшимся количеством кликов до активации режима разработки).
После активации режима разработчика необходимо зайти на первый уровень меню настроек и перейти в новый пункт: "Параметры разработчика" (обычно в самом конце списка). В списке открывшихся опций активируем отладку по USB .
Как использовать Chrome DevTools для отладки веб-сайтов на телефонах Android?
[Подготовка]
1. Установите Chrome на свой телефон Android (Chrome for Android )
Вы можете скачать его, обратившись в супермаркет или официальный сайт Google.
Последняя версия Chrome для нормального использования инструментов разработчика.
3. В телефоне Android есть драйвер USB.
【начать】
1. Установите Android SDK.
2. Разрешите телефонам Android включать отладку по USB.
1. Системные настройки Android: «Настройки»> «Параметры разработчика»> «Отладка по USB»;
2. Настройки браузера Chrome на телефоне: откройте браузер Chrome, нажмите кнопку меню в нижнем левом углу, «Настройки»> «Инструменты разработчика»> «Включить отладку веб-страницы через USB».
В-третьих, запустите Android SDK
1. Задайте переменные среды: щелкните правой кнопкой мыши «Мой компьютер»> «Свойства»> «Дополнительно»> «Переменные среды»> Измените значение переменной «ПУТЬ» и добавьте «; D: \ soft \ android \ adt \ sdk \ "в конце платформы-инструменты"
2. Запускаем adb
Откройте cmd и введите следующую команду:
Четыре, отладка
1. Используйте Chrome на телефоне, чтобы открыть веб-сайт, который нужно отладить.
Щелкните веб-сайт для отладки, и появятся знакомые инструменты разработчика, как показано на рисунке:
На этом способ использования Chrome для отладки веб-сайта на телефоне Android подошел к концу.
Перенаправление порта
Ваш мобильный телефон и машина для разработки иногда находятся в двух разных сетях (например, в двух разных сетевых средах, локальном сервере и онлайн-сервере), и содержимое страницы среды разработки может быть недоступно на мобильном телефоне. Более того, иногда ваша среда разработки находится в сети, которая ограничена компанией по соображениям безопасности.
Переадресация портов в Chrome для Android решает эту проблему, и вы можете мгновенно протестировать разработанный веб-сайт на телефоне. Его принцип работы заключается в создании прослушивающего TCP-порта на мобильном устройстве, который сопоставлен с конкретным TCP-портом машины разработки, и два порта обмениваются данными через линию USB, поэтому это соединение не зависит от конфигурации сети. Окружающая среда.
Здесь вы можете просто использовать узел где угодно, чтобы запустить статический сервер для проверки конфигурации переадресации портов. Шаги примерно следующие:
Установите пакет узла, который можно скачать прямо с официального сайта
Установить где угодно статический серверный модуль глобально npm установить где угодно -g
Создать каталог тестового проекта и html файл тестовой страницы
cd в каталог тестового проекта, выполните команду: в любом месте 3000, эта операция возьмет каталог тестового проекта в качестве корневого каталога для создания соответствующего статического сервера узла, порт - 3000
Используйте USB для подключения мобильного устройства, откройте страницу chrome: // inspect, настройте переадресацию портов и сопоставьте порт устройства 8080 с localhost: 3000, затем доступ к localhost: 8080 на мобильном устройстве приведет к доступу к статическому серверу, открытому в любом месте
PS: В процессе разработки вы можете выполнить любую команду в папке dist, упакованной с помощью webpack, а затем использовать перенаправление портов для отладки связанных страниц.
На рисунке ниже я установил два сервера на машине разработки: localhost: 3000 - это интерфейсный сервер разработки webpack, а localhost: 4000 - это внутренний сервер узла graphql. Если телефон и моя машина не находятся в одной сетевой среде, они не могут обмениваться данными. Используя технологию сопоставления портов, в настройке переадресации портов порт 8080 и порт 4000 мобильного телефона соответственно отображаются на машину разработки, поэтому доступ к localhost: 8080 на мобильном телефоне откроет соответствующую страницу интерфейса и отправит запрос на сервер узла.
Отладку web-приложений можно выполнять как в эмуляторе с помощью Chrome DevTools , так и с использованием реального устройства. Использование отладки на реальном устройстве позволяет точно идентифицировать проблему. Рассмотрим шаги по настройке подключения устройства к Chrome DevTools .
Живой скринкастинг
При отладке мобильного устройства неудобно переключать линию обзора между экранами двух устройств. Screencast реализует синхронизацию экрана мобильного устройства и среды разработки DevTools. Вы можете взаимодействовать с контентом на мобильном устройстве через screencast .
Screencast представляет только содержимое страницы и не отображает другие интерфейсы устройства, такие как адресная строка панели инструментов, клавиатура устройства и т. Д. Они отображаются в виде прозрачных частей в Screencase.
Android 4.4 - это операционная система для мобильных телефонов под кодовым названием KitKat, производимая и разрабатываемая Google. Название новой версии Android было объявлено ранним утром 4 сентября 2013 года по пекинскому времени как Android 4.4 (кодовое название KitKat). . Сообщается, что кодовое название происходит от шоколада Nestlé's KitKat.
Для KitKat 4.4.3 скринкаст может быть реализован не только на странице вкладок, но и в WebView.
Щелкните значок Screencast в правом верхнем углу DevTools, чтобы открыть представление Screencast, и экран мобильного устройства будет отображаться на панели Screencast слева в реальном времени.
Читайте также: