Что за программа webview devtools

WebView — это представление, отображающее веб-страницы внутри вашего приложения. При этом вы можете добавить свой собственный URL.

замечания

Не забудьте добавить разрешение в файл манифеста Android

Диалоги оповещений JavaScript в WebView — как заставить их работать

По умолчанию WebView не реализует диалоговые окна предупреждения JavaScript, то есть. alert() ничего не сделает. Чтобы вам было нужно сначала включить JavaScript (очевидно ..), а затем установить WebChromeClient для обработки запросов на диалоговые окна предупреждений со страницы:

Здесь мы переопределяем onJsAlert , а затем onJsAlert к супер-реализации, которая дает нам стандартный диалог Android. Вы также можете использовать сообщение и URL-адрес самостоятельно, например, если вы хотите создать пользовательское диалоговое окно стиля или если вы хотите их зарегистрировать.

Общение с Javascript на Java (Android)

Активность Android

Обработчик Java Javascript

Веб-страница, вызов Javascript

Алишер Толебердыев, «Webview — сомнительно? Работает!»

. Android.jsCallback(); . Android.jsCallback(‘hello test’); .

Дополнительный совет

При переходе в сложную структуру данных возможным решением является использование JSON.

Android.jsCallback(‘< «fake-var» : «fake-value», «fake-array» : [0,1,2] >’);

На стороне Android используйте свой любимый парсер JSON, то есть: JSONObject

Общение с Java на Javascript

Основной пример

Пример открытого набора

Если веб-страница a содержит номер телефона, вы можете позвонить, используя дозвон вашего телефона. Этот код проверяет URL-адрес, который начинается с tel: затем сделайте намерение открыть дозвонщик, и вы можете позвонить по нажатому номеру телефона:

public boolean shouldOverrideUrlLoading(WebView view, String url) < if (url.startsWith(«tel:»)) < Intent intent = new Intent(Intent.ACTION_DIAL, Uri.parse(url)); startActivity(intent); >else if(url.startsWith(«http:») || url.startsWith(«https:»)) < view.loadUrl(url); >return true; >

Устранение неполадок WebView путем печати сообщений консоли или удаленной отладки

Печать сообщений консоли webview для logcat

Чтобы обрабатывать console сообщения с веб-страницы, вы можете переопределить onConsoleMessage в WebChromeClient :

И установите его в своей деятельности или фрагменте:

webView.setWebChromeClient(new ChromeClient());

Итак, эта примерная страница:

console.log(‘test message’);

будет записывать журнал «тестовое сообщение» на logcat:

WebView: тестовое сообщение sample.html: 4

console.info() , console.warn() и console.error() также поддерживаются хром-клиентом.

Удаленное отладочное устройство Android с Chrome

Ваш удаленный отлаживающий веб-приложение на основе вашего браузера Chrome.

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

На устройстве Android откройте «Настройки», найдите раздел «Параметры разработчика» и включите USB-отладку.

Как Google Убили Android: Опасное обновление Android WebView. Вылетают приложения. Как исправить?

Подключайтесь и обнаруживайте Android-устройство

Открыть страницу в хроме на следующей странице: chrome: // проверка / # устройств

В диалоговом окне «Inspect Devices» выберите ваше устройство и нажмите « проверить» . На вашем компьютере разработки открывается новый экземпляр DevTools от Chrome.

Более подробное руководство и описание DevTools можно найти на developers.google.com.

Открыть локальный файл / создать динамический контент в Webview

Загрузка данных в WebViewToDisplay

WebView webViewDisplay; StringBuffer LoadWEb1; webViewDisplay = (WebView) findViewById(R.id.WebViewToDisplay); LoadWEb1 = new StringBuffer(); LoadWEb1.append(«

My First Heading

My first paragraph.

«); //Sample code to read parameters at run time String strName = «Test Paragraph»; LoadWEb1.append(«

«+strName+»

«); String result = LoadWEb1.append(«»).toString(); WebSettings webSettings = webViewDisplay.getSettings(); webSettings.setJavaScriptEnabled(true); webViewDisplay.getSettings().setBuiltInZoomControls(true); if (android.os.Build.VERSION.SDK_INT >= 11) < webViewDisplay.setLayerType(View.LAYER_TYPE_SOFTWARE, null); webViewDisplay.getSettings().setDisplayZoomControls(false); >webViewDisplay.loadDataWithBaseURL(null, result, «text/html», «utf-8», null); //To load local file directly from assets folder use below code //webViewDisplay.loadUrl(«file:///android_asset/aboutapp.html»);
Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow

Источник: learntutorials.net

Использование протокола Chrome DevTools в приложениях WebView2

Протокол Chrome DevTools предоставляет API-интерфейсы для инструментирования, проверки, отладки и профилирования Chromium браузеров. Протокол Chrome DevTools является основой для Microsoft Edge DevTools. Используйте протокол Chrome DevTools для функций, которые не реализованы на платформе WebView2.

Чтобы использовать API протокола Chrome DevTools в приложении WebView2, выполните одно из следующих действий:

• Установите и используйте пакет NuGet Microsoft.Web.WebView2.DevToolsProtocolExtension (предварительная версия).
• Или выполните один из следующих методов:

• .NET: CallDevToolsProtocolAsync, GetDevToolsProtocolEventReceiver
• Win32 C/C++: CallDevToolsProtocolMethod, ICoreWebView2DevToolsProtocolEventReceiver

Использование DevToolsProtocolHelper

Microsoft.Web.WebView2.DevToolsProtocolExtension (предварительная версия) — это пакет NuGet, созданный командой WebView2, который обеспечивает простой доступ к функциям протокола Chrome DevTools. В следующих примерах описывается использование функции геолокации в протоколе Chrome DevTools в элементе управления WebView2. Чтобы использовать другие функции протокола Chrome DevTools, можно следовать аналогичному шаблону.

Не используйте пакет предварительной версии в рабочих приложениях

Пакет NuGet Microsoft.Web.WebView2.DevToolsProtocolExtension в настоящее время находится в технической предварительной версии. В режиме предварительной версии воздерживайтесь от использования этого пакета NuGet в рабочих приложениях.

Шаг 1. Создание веб-страницы для поиска географического расположения

Чтобы создать объект HTML file для поиска географического расположения, выполните следующие действия.

1. Откройте Visual Studio Code (или IDE по своему выбору).
2. Создайте новый .html файл.
3. Вставьте следующий код в новый .html файл:

Geolocation Finder const btn = document.getElementById(‘display’); // Find the user location. btn.addEventListener(‘click’, function () < navigator.geolocation.getCurrentPosition(onSuccess, onError); >); // Update message to display the latitude and longitude coordinates. function onSuccess(position) < const = position.coords; message.textContent = `Your location: ($,$)`; > function onError()

Сохраните .html файл с именем geolocation.html .

Откройте Microsoft Edge.

Откройте . geolocation.html

Чтобы отобразить координаты широты и долготы, нажмите кнопку Показать расположение . Чтобы проверить и сравнить географическое положение, скопируйте и вставьте координаты в https://www.bing.com/maps.

Шаг 2. Отображение geolocation.html в WebView2

1. Чтобы создать приложение WebView2, используйте руководство по началу работы или примеры WebView2:
2. Начало работы с WebView2
3. Репозиторий WebView2Samples
4. Задайте для начальной навигации элемента управления WebView2 значение geolocation.html :

Убедитесь, geolocation.html что файл отображается в приложении элемента управления WebView2:

Шаг 3. Установка пакета NuGet DevToolsProtocolHelper

Используйте NuGet для скачивания Microsoft.Web.WebView2.DevToolsProtocolExtension .

Чтобы установить пакет, выполните следующие действия:

1. Выберите Управление проектами>Управление пакетами> NuGetОбзор.
2. Введите Microsoft.Web.WebView2.DevToolsProtocolExtension и выберите Microsoft.Web.WebView2.DevToolsProtocolExtension>Install.
3. Убедитесь, что Microsoft.Web.WebView2.DevToolsProtocolExtension отображается в диспетчере пакетов NuGet Visual Studio:

Шаг 4. Использование вспомогательного средства по протоколу DevTools

1. Добавьте пространство имен в DevToolsProtocolExtension проект:

using Microsoft.Web.WebView2.Core; using Microsoft.Web.WebView2.Core.DevToolsProtocolExtension;
async void InitializeAsync() < await webView.EnsureCoreWebView2Async(null); DevToolsProtocolHelper helper = webview.CoreWebView2.GetDevToolsProtocolHelper(); // Latitude and longitude for Paris, France. double latitude = 48.857024082572565; double longitude = 2.3161581601457386; double accuracy = 1; await helper.Emulation.setGeolocationOverrideAsync(latitude, longitude, accuracy); >

Дополнительные сведения см. в разделе setGeolocationOverride.

Запустите приложение.

Чтобы отобразить координаты Парижа, Франция, нажмите кнопку Показать расположение :

Отправить запрос на ошибку или функцию для протокола Chrome DevTools

Чтобы запросить функцию платформы WebView2, введите новую проблему в репозитории WebView2Feedback.

Чтобы сообщить об ошибке о протоколе Chrome DevTools, отправьте отчет об ошибке в базу данных об ошибках Chromium.

Протокол Chrome DevTools поддерживается проектом открытый код Chromium, а не командой Microsoft Edge WebView2.

См. также

• Общие сведения о протоколе Microsoft Edge DevTools
• Репозиторий WebView2Samples

Источник: learn.microsoft.com

Русские Блоги

Разработчики Android должны время от времени взаимодействовать с H5. В настоящее время, если нет инструмента отладки, эффективность чрезвычайно низкая. В нашем проекте есть активная страница, которая должна взаимодействовать с H5. В то время я не знаю, что был такой инструмент отладки, и я мог использовать только alert () (Ключ в том, что с этой проблемой все в порядке, когда она запускается локально, и есть проблема на сервере. Эту проблему найти труднее всего. такой инструмент, это просто так просто). Когда я чувствую, что эффективность настолько низкая, мне интересно, должны ли быть инструменты отладки? (Потому что в IOS есть)
Итак, я просто проверяю документ Google напрямую, это официальный документ.

setWebContentsDebuggingEnabled Enables debugging of web contents (HTML / CSS / JavaScript) loaded into any WebViews of this application. This flag can be enabled in order to facilitate debugging of web layouts and JavaScript code running inside WebViews. Please refer to WebView documentation for the debugging guide. The default is false.

Включите отладку веб-содержимого (HTML / CSS / JavaScript), загруженного в любой WebView этого приложения. Этот флаг можно включить для облегчения отладки веб-макета и кода JavaScript, выполняемого в WebViews. За инструкциями по отладке обращайтесь к документации WebView. Значение по умолчанию неверно.