Depurar usando registros do Console JavaScript

Este documento descreve diferentes métodos para visualizar registros do console JavaScript para depurar conteúdo em uma WebView.

Ao acessar o console JavaScript, você pode visualizar erros, avisos e mensagens personalizadas das instruções `console.log()` do JavaScript para diagnosticar o que está acontecendo dentro da WebView.console.log() Há três maneiras diferentes de visualizar mensagens do console JavaScript geradas pela WebView:

  • Chrome DevTools: conecte a WebView ao Chrome DevTools. Abra a guia Console para conferir as mensagens do console JavaScript da WebView.

  • App WebView DevTools: use o app WebView DevTools para ativar a flag webview-log-js-console-messages no dispositivo e visualizar os registros do console no Logcat.

  • Interceptação de mensagens: intercepte mensagens do console JavaScript implementando onConsoleMessage() no WebChromeClient. Essa abordagem é detalhada na seção a seguir.

Se você estiver veiculando conteúdo de um servidor da Web local na sua máquina de desenvolvimento, consulte Acessar um servidor de desenvolvimento local na WebView para saber como se conectar a ele em um dispositivo ou emulador.

Interceptar mensagens com onConsoleMessage()

As APIs Console são compatíveis ao depurar uma WebView. Você precisa fornecer um WebChromeClient que implemente o método onConsoleMessage() para que as mensagens do console apareçam no Logcat. Em seguida, aplique o WebChromeClient à WebView com setWebChromeClient().

WebChromeClient é a classe auxiliar da WebView. Ela processa eventos relacionados à interface que acontecem no conteúdo da Web, como mostrar alertas JavaScript, mudar o título da página da Web e processar mensagens enviadas ao console do navegador.

O código a seguir configura um WebChromeClient para interceptar saídas do console JavaScript e redirecioná-las ao Logcat para facilitar a depuração.

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;
    }
});

Ao usar onConsoleMessage(), sua lógica de registro personalizada se torna o handler principal para erros JavaScript, substituindo o comportamento padrão da flag webview-log-js-console-messages e permitindo que você formate os registros da maneira que quiser.

O ConsoleMessage também inclui um objeto MessageLevel para indicar o tipo de mensagem do console que está sendo entregue. Você pode consultar o nível da mensagem com messageLevel() para determinar a gravidade dela. Depois disso, use o método Log apropriado ou tome outras medidas adequadas.

Quando você executa um método de console na sua página da Web, o Android chama o onConsoleMessage(ConsoleMessage) método para que você informe o erro. Por exemplo, com o código de exemplo, uma mensagem do Logcat é impressa como a seguinte:

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