Отладка с помощью консоли JavaScript. Логи.

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

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

  • Инструменты разработчика Chrome : Подключите ваш WebView к инструментам разработчика Chrome . Откройте вкладку «Консоль» , чтобы увидеть сообщения консоли 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 для упрощения отладки.

Котлин 

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