Отладка с помощью журналов консоли JavaScript

В этом документе описаны различные методы просмотра журналов консоли JavaScript для отладки контента в WebView.

В консоли JavaScript можно просматривать ошибки, предупреждения и пользовательские сообщения из инструкций console.log() JavaScript, чтобы диагностировать, что происходит внутри WebView. Сообщения консоли JavaScript, созданные вашим компонентом WebView, можно просматривать тремя способами:

  • Инструменты разработчика в Chrome. Подключите WebView к инструментам разработчика в Chrome. Откройте вкладку Console (Консоль), чтобы посмотреть сообщения консоли JavaScript для WebView.

  • Приложение WebView DevTools. Используйте приложение WebView DevTools, чтобы включить параметр webview-log-js-console-messages на устройстве и просматривать журналы консоли в Logcat.

  • Перехват сообщений. Перехватывайте сообщения консоли JavaScript, реализовав onConsoleMessage() в WebChromeClient. Этот подход подробно описан в следующем разделе.

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

Перехват сообщений с помощью onConsoleMessage()

API консоли поддерживаются при отладке WebView. Чтобы сообщения консоли появлялись в Logcat, необходимо предоставить WebChromeClient, который реализует метод onConsoleMessage(). Затем примените WebChromeClient к WebView с помощью setWebChromeClient().

WebChromeClient – вспомогательный класс для WebView. Он обрабатывает события, связанные с интерфейсом, которые происходят в веб-контенте, например показывает оповещения JavaScript, меняет заголовок веб-страницы и обрабатывает сообщения, отправленные в консоль браузера.

В следующем коде настраивается WebChromeClient, чтобы перехватывать выходные данные консоли JavaScript и перенаправлять их в Logcat для упрощения отладки.

Kotlin

val myWebView: WebView = findViewById(R.id.my_webview)
myWebView.webChromeClient = object : WebChromeClient() {
    // Override onConsoleMessage to intercept JavaScript console messages
    override fun onConsoleMessage(message: ConsoleMessage): Boolean {
        // Log JavaScript console messages to Logcat
        Log.d("WebViewConsole", "${message.message()} -- From line ${message.lineNumber()} of ${message.sourceId()}")
        // Return true to indicate that the message has been handled
        return true
    }
}

Java

WebView myWebView = findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
    // Override onConsoleMessage to intercept JavaScript console messages
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        // Log JavaScript console messages to Logcat
        Log.d("MyApplication", consoleMessage.message() + " -- From line " +
        consoleMessage.lineNumber() + " of " + consoleMessage.sourceId());
        // Return true to indicate that the message has been handled
        return true;
    }
});

При использовании onConsoleMessage() ваша собственная логика ведения журналов становится основным обработчиком ошибок JavaScript, заменяя режим работы по умолчанию флага webview-log-js-console-messages и позволяя вам форматировать журналы так, как вы хотите.

Объект ConsoleMessage также содержит объект MessageLevel, который указывает тип сообщения консоли. Вы можете запросить уровень сообщения с помощью messageLevel(), чтобы определить серьезность сообщения, а затем использовать соответствующий метод Log или предпринять другие подходящие действия.

Когда вы выполняете метод консоли на веб-странице, Android вызывает метод onConsoleMessage(ConsoleMessage), чтобы вы могли сообщить об ошибке. Например, в случае с примером кода будет выведено сообщение Logcat, похожее на следующее:

Hello World -- From line 82 of http://www.example.com/hello.html