Depurar usando registros do console JavaScript

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

Ao acessar o console JavaScript, é possível ver erros, avisos e mensagens personalizadas das instruções console.log() JavaScript para diagnosticar o que está acontecendo dentro da WebView. Há três maneiras diferentes de ver as mensagens do console JavaScript geradas pela sua WebView:

  • Chrome DevTools: conecte sua WebView ao Chrome DevTools. Abra a guia Console para ver 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 seu dispositivo e ver registros do console no Logcat.

  • Interceptação de mensagens: intercepte mensagens do console JavaScript implementando onConsoleMessage() no seu 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 da WebView para saber como se conectar a ele em um dispositivo ou emulador.

Interceptar mensagens com onConsoleMessage()

As APIs do console são compatíveis ao depurar um 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 ao WebView com setWebChromeClient().

WebChromeClient é a classe auxiliar do WebView. Ele processa eventos relacionados à interface do usuário que acontecem no conteúdo da Web, como mostrar alertas do 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 as saídas do console JavaScript e redirecioná-las para o Logcat, facilitando 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 geração de registros personalizada se torna o manipulador principal de erros do 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 método onConsoleMessage(ConsoleMessage) para que você possa informar o erro. Por exemplo, com o código de exemplo, uma mensagem do Logcat é impressa, parecida com esta:

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