Удаленная отладка Android WebView
Отладка Android WebView в собственных приложениях Android с помощью средств разработчика Microsoft Edge.
В Android 4.4 (KitKat) или более поздней версии используйте средства разработки для отладки содержимого WebView в собственных приложениях Android.
Android WebView не связан с Microsoft Edge WebView2.
Сводка
- Включите отладку Android WebView в собственном приложении Android; отладка Android WebView в Средствах разработки Microsoft Edge.
- Чтобы отобразить список Android WebViews с включенной отладкой, перейдите по странице edge://inspect .
- Отладка Android WebView аналогично отладке веб-страницы с помощью удаленной отладки.
Настройка Android WebView для отладки
Отладка Android WebView должна быть включена в приложении. Чтобы включить отладку Android WebView, выполните статический метод setWebContentsDebuggingEnabled в WebView классе .
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
Этот параметр применяется ко всем веб-представлениям Android в приложении.
На отладку Android WebView не влияет состояние флага debuggable в манифесте приложения. Если вы хотите включить отладку Android WebView только при наличии флага debuggable true , проверьте флаг во время выполнения.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) < if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) < WebView.setWebContentsDebuggingEnabled(true); >> Открытие Android WebView в средствах разработки
Чтобы отобразить список Android WebViews с включенной отладкой, которые выполняются на вашем устройстве, перейдите на страницу edge://inspect .
Чтобы начать отладку, в разделе Android WebView, который требуется отладить, нажмите кнопку Проверить. Используйте Средства разработки так же, как и удаленную вкладку браузера.
Устранение неполадок
Если веб-представления Android не отображаются на странице: edge://inspect
- Убедитесь, что отладка Android WebView включена для вашего приложения.
- На устройстве откройте приложение с android WebView, который требуется отладить. Затем обновите edge://inspect .
Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Меггин Кирни (Технический писатель).
Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.
Отладка Xamarin Forms WebView в Chrome
Мало кому известна возможность отладки на Android — это то, что вы можете отлаживать WebView внутри Android приложения, в реальном времени. Это можно сделать используя Chrome, установленный на вашем компьютере. Он позволяет изменять HTML и выполнять JavaScript в реальном времени, прямо в WebView вашего Android приложения.
WebView
Вы можете начать с простого WebView, которое показывает главную страницу Google.
Эмулятор
Когда запустится эмулятор, вы увидите главную страницу Google. Далее все что вам нужно, чтобы ваше приложение работало, эмулятор был открыт, пока мы подключаем Chrome к WebView.
Chrome
Откройте Chrome на вашем компьютере и нажмите F12 . Затем нажмите на три вертикальные точки и перейдите в раздел Дополнительные инструменты > Удаленные устройства . Как только вы это сделаете, в нижней части этого столбца появится окно с указанием устройств и настроек.
Выбор устройств
Сначала нажмите “Устройства”, затем выберите свое устройство. После этого вы увидите URL-адрес открытый во WebView и кнопку инспектирования. Нажмите эту кнопку.
Инспектирование
После того, как вы нажали “Инспектировать”, вы увидите окно, которое покажет вам HTML-код WebView и предоставит все элементы управления WebView, которые вам были бы нужны при отладке или проверке веб-страницы в Chrome.
Вы можете делать почти все, чтобы вы бы делали с обычной веб-страницей, в том числе:
- Добавление или удаление HTML-элементов;
- Запуск JavaScript;
- Наведение указателем на элементы, чтобы увидеть их визуальное представление на устройстве / эмуляторе;
- Просмотр визуальных индикаторов для каждого элемента.
Вывод
Это фантастический инструмент для отладки различных проблем в WebView. Это поможет вам сэкономить кучу времени, если вы пытаетесь добиться правильного расположения элементов и правильной работы скриптов, т.к. вам не понадобится после каждого изменения перезапускать приложение, чтобы увидеть результат.
Debug Android WebViews in React Native
I need to inspect the content and network requests of a webview I have running inside my app. With iOS I can open the simulator, open Safari, and am then able to inspect the webview as I would any other website. I am having trouble with Android. I have gone to chrome://inspect, and am able to inspect Chrome on the connected device, however I am unable to inspect a webview. I have tried moving webView.setWebContentsDebuggingEnabled(true); inside ReactWebViewManager.java into the onPageStarted method so that it’s always enabled, but this has had no effect. Thanks
asked Jun 7, 2017 at 14:04
1,997 3 3 gold badges 29 29 silver badges 52 52 bronze badges
I am also having this issue. I must have read everything on the internet in this area but I can’t find anything helpful. Perhaps it isn’t possible?
Jun 8, 2017 at 17:13
@urbananimal I’m fairly sure it is possible, however I still haven’t figured it out. Instead I installed Genymotion and it worked without any extra setup
Jun 9, 2017 at 19:34
I have no problem debugging in the emulator, it’s on an actual physical device I’m having issues. This would be fine if it wasn’t for the fact that the issue I’m trying to debug doesn’t occur in either the standard Android emulator or Genymotion.
Jun 12, 2017 at 12:23
@urbananimal that sounds like a pain. If you figure it out be sure to post it as an answer
Jun 13, 2017 at 22:09
1 Answer 1
OK so we have this working now.
What we did in our app was that we call WebView.setWebContentsDebuggingEnabled(true); inside the onCreate method of our MainActivity.java (found at android/app/src/main/java/com/[appname]).
I’m not sure it has an onCreate method out of the box so you may have to add one or try it elsewhere — we must have read the same article as I had previously done as you had and moved the call into the onPageStarted method of ReactWebViewManager.java but that didn’t work for me either.
setWebContentsDebuggingEnabled is a static method of android.webkit.WebView so just make sure you have that import.
Hope this helps you.
answered Jun 15, 2017 at 12:10
urbananimal urbananimal
495 3 3 silver badges 9 9 bronze badges
Don’t forget to import android.webkit.WebView; in your MainActivity.java. The method setWebContentsDebuggingEnabled is static.
Отладка приложений
Всякий раз, когда ваше приложение Electron не ведет себя так, как вы этого хотели, массив средств отладки может помочь вам найти ошибки в кодировании, узкие места производительности или возможности оптимизации.
Процесс визуализации
Наиболее полным инструментом для отладки отдельных процессов рендеринга является набор инструментов разработчика Chromium. Он доступен для всех процессов рендеринга, включая экземпляры таких объектов как BrowserWindow , BrowserView , и WebView . Вы можете открыть их программно, вызывая API openDevTools() в webContents экземпляра:
const BrowserWindow > = require('electron') const win = new BrowserWindow() win.webContents.openDevTools() Google предлагает отличную документацию для своих инструментов разработчика. Мы рекомендуем вам ознакомиться с ними — они, как правило, являются одними из самых мощных утилит в инструментальном окружении для разработчиков Electron.
Основной процесс
Отладка основного процесса немного сложнее, поскольку вы не можете открыть для них инструменты для разработчиков. Инструменты Chromium Developer Tools могут использоваться для отладки основного процесса Electron благодаря более тесному сотрудничеству между Google / Chrome и Node.js, но вы можете столкнуться с такими странностями, которые вам не нужны в консоли.
Для получения дополнительной информации см. Документацию Отладка основной процедуры.
V8 Crashes
Если context V8 вылетает, инструменты разработчика покажут это сообщение.
DevTools был отключен от страницы. После перезагрузки страницы DevTools автоматически подключится.
Логи Chromium могут быть включены через переменную среды ELECTRON_ENABLE_LOGGING . Для получения дополнительной информации обратитесь к документации по переменным окружения.
В качестве альтернативы, можно передать аргумент командной строки —enable-logging . Дополнительная информация доступна в switches документации командной строки.