Depuração remota de WebViews

Depure WebViews nos seus aplicativos Android usando o Chrome Developer Tools.

No Android 4.4 (KitKat) ou posterior, use o DevTools para depurar o conteúdo do WebView em aplicativos nativos do Android.

TL;DR

  • Ative a depuração de WebView no seu aplicativo Android nativo. Depure WebViews no Chrome DevTools.
  • Acesse a lista de WebViews depuráveis via chrome://inspect.
  • Depurar WebViews é a mesma coisa que depurar uma página da Web por depuração remota.

Configurar WebViews para depuração

A depuração por WebView deve ser ativada a partir do aplicativo. Para ativar a depuração de WebView, chame o método estático setWebContentsDebuggingEnabled na classe WebView.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

Esta configuração aplica-se a todas as WebViews do aplicativo.

Dica: A depuração de WebView não é afetada pelo estado do sinalizador debuggable no manifesto do aplicativo. Se quiser ativar a depuração de WebView somente quando debuggable for true, teste o sinalizador em tempo de execução.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
}

Abra uma WebView no DevTools

A página chrome://inspect exibe uma lista de WebViews depuráveis no seu dispositivo.

Para começar a depuração, clique em inspect abaixo da WebView que deseja depurar. Use o DevTools como se fosse uma guia de navegador remota.

Inspeção de elementos em uma WebView

Os gráficos cinza listados com a WebView representam seu tamanho e sua posição em relação à tela do dispositivo. Se suas WebViews tiverem títulos, eles também serão listados.

Solução de problemas

Não consegue ver suas WebViews na página chrome://inspect?

  • Verifique se a depuração de WebView está ativa no aplicativo.
  • No dispositivo, abra o aplicativo com a WebView que deseja depurar. Em seguida, atualize a página chrome://inspect.