Как выполнить отладку с помощью приложения WebView DevTools

Приложение WebView DevTools – это утилита на устройстве, которая позволяет управлять системным компонентом WebView и выполнять его отладку. Они отличаются от инструментов разработчика Chrome, которые запускаются на компьютере для разработки и позволяют удаленно отлаживать веб-контент (HTML, CSS и JavaScript), выполняемый в экземпляре WebView.

Инструменты разработчика WebView – это сопутствующее приложение, которое автоматически устанавливается на устройство вместе с системным компонентом WebView. Приложение разделено на четыре области:

  • Главная. Просмотр информации о версии и переключение WebView по умолчанию на версию канала предварительного выпуска.
  • Сбои. Просмотр и загрузка отчетов о сбоях WebView.
  • Пометки. Установите пометки разработчика, чтобы изменить поведение WebView.
  • Сетевые журналы. Просмотр и отправка сетевых журналов WebView низкого уровня.

Как запустить инструменты разработчика WebView

На устройствах с Android 16 или более поздней версией, на которых включен режим разработчика, вы можете запустить WebView DevTools, выбрав Настройки > Система > Для разработчиков > WebView DevTools.

Во всех последних версиях Android вы можете запустить WebView DevTools с помощью команды adb:

adb shell am start -a "com.android.webview.SHOW_DEV_UI"

Если вы установите предварительную версию WebView, например Beta, Dev или Canary, то сможете использовать значок приложения WebView DevTools.

Значок инструментов разработчика WebView.
Рисунок 1. Значок WebView DevTools для приложения, установленного на устройстве.

При первом запуске WebView DevTools запросит разрешение на уведомления, чтобы показывать постоянное уведомление со списком включенных вами флагов разработчика.

Как перейти на канал предварительного выпуска

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

  1. Установите бета-версию, версию для разработчиков или версию Canary компонента WebView в зависимости от того, что для вас важнее – стабильность или доступ к последним изменениям.
  2. Откройте приложение WebView DevTools и нажмите Change Provider (Изменить поставщика).
  3. Если вы не видите этот вариант, нажмите на значок с тремя точками в правом верхнем углу и выберите Изменить поставщика WebView.

Подробнее о том, как попробовать бета-версию, версию для разработчиков или версию Canary компонента WebView…

Каналы WebView

Каналы WebView основаны на каналах обновления Chrome. Каждый канал представляет собой отдельный уровень стабильности и актуальности кода. Ниже приведены краткие рекомендации по использованию каждого канала WebView.

  • Canary. Обновляется ежедневно. В нем доступны самые последние изменения, включая новые функции и исправления ошибок, как только они добавляются в базу кода Chromium. Используйте его, если хотите проверить, как ваше веб-приложение работает в WebView с недавно добавленным изменением. Однако помните, что этот канал может быть нестабильным или содержать ошибки.

  • Dev. Обновляется один или два раза в неделю. Эта версия стабильнее, чем Canary, но все равно содержит самые новые изменения. Она подходит разработчикам, которые хотят тестировать новые функции, но с меньшим риском столкнуться с ошибками, не связанными с этими функциями, чем в версии Canary.

  • Бета-версия. Обновляется примерно раз в неделю. Крупные изменения появляются каждые четыре недели. В бета-версии новые функции WebView доступны за 4–6 недель до выхода стабильной версии. Это позволит вам проверить совместимость вашего веб-приложения с предстоящим выпуском WebView.

  • Стабильная версия. Обновления с незначительными изменениями публикуются для этой версии каждые две-три недели для срочного исправления ошибок, а полноценные новые версии ПО появляются каждые четыре недели. Это рабочая версия WebView, доступная всем пользователям. Это самый стабильный канал, поскольку версии на нем уже прошли тестирование на других каналах. Используйте этот вариант, если хотите посмотреть, как ваше веб-приложение выглядит в WebView у большинства пользователей прямо сейчас, например чтобы воспроизвести ошибку, о которой они сообщили.

Интерфейс для сообщений о ДТП

Если во время разработки приложения у вас возникают сбои WebView, вы можете просматривать, загружать и отправлять отчеты об ошибках с помощью WebView DevTools.

  1. После сбоя перезапустите приложение, чтобы убедиться, что отчет о сбое создан.
  2. Откройте приложение WebView DevTools и нажмите Crashes (Сбои).

Подробную информацию вы найдете в документации по интерфейсу Crash.

Интерфейс для жалоб

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

  • highlight-all-webviews – выделять компоненты WebView желтым цветом.
  • net-log – включить низкоуровневое ведение журнала сетевой активности WebView.
  • webview-log-js-console-messages – журналы консоли JavaScript будут появляться в Logcat.
Интерфейс Flags в приложении WebView DevTools.
Рисунок 2. Интерфейс Flags в приложении WebView DevTools.

Подробную информацию вы найдете в документации по интерфейсу для пометки контента.

Сетевые журналы

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

  1. Включите отладку WebView в коде приложения.
  2. В WebView DevTools откройте Flags (Параметры), найдите net-log и включите его. Чтобы параметр вступил в силу, перезапустите приложение.
  3. Выполните действия, которые вызывают сетевое поведение, которое вы хотите отладить. После того как вы воспроизвели проблему, закройте приложение.
  4. Откройте раздел Net Logs (Сетевые журналы) в WebView DevTools, чтобы найти файл сетевого журнала и поделиться им.
  5. Файл журнала в формате JSON можно загрузить в Netlog Viewer – онлайн-инструмент для визуализации сетевых журналов, который позволяет изучать низкоуровневые сетевые события, информацию о сокетах и сведения о времени.

Подробнее об отладке сети в WebView…