Depuração remota de WebViews

Depure WebViews nos seus apps Android nativos usando as Ferramentas para desenvolvedores do Chrome.

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

Resumo

  • Ative a depuração de WebView no app Android nativo e depure WebViews no Chrome DevTools.
  • Acesse a lista de WebViews com depuração ativada via chrome://inspect.
  • Depurar WebViews é o mesmo que depurar uma página da Web usando a depuração remota.

Configurar WebViews para depuração

A depuração de WebView precisa ser ativada no aplicativo. Para ativar a depuração de WebView, chame o método estático setWebContentsDebuggingEnabled na classe da WebView.

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

Essa configuração é válida para todas as WebViews do aplicativo.

Dica: a depuração de WebView não é afetada pelo estado da flag debuggable no manifesto do aplicativo. Caso queira ativar a depuração de WebView somente quando debuggable for true, teste a sinalização no momento da execução.

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

Abrir um WebView no DevTools

A página chrome://inspect exibe uma lista de WebViews para depuração no seu dispositivo.

Para iniciar a depuração, clique em inspect abaixo da WebView que você quer depurar. Use o DevTools como faria em uma guia remota do navegador.

Como inspecionar elementos em uma WebView

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

Solução de problemas

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

  • Verifique se a depuração de WebView está ativada para seu aplicativo.
  • No dispositivo, abra o app com a WebView que você quer depurar. Em seguida, atualize a página chrome://inspect.