Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

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.