Depurar usando o Chrome DevTools

Você pode usar o DevTools integrado ao navegador Chrome na sua máquina de desenvolvimento para inspecionar e depurar remotamente as WebViews em execução no seu app. Para um guia detalhado sobre a depuração remota de WebViews, consulte Depuração remota de WebViews.

Para saber mais sobre o DevTools, consulte Visão geral do Chrome DevTools.

Ativar a conexão do Chrome DevTools

Por padrão, a WebView do app não ativa conexões do Chrome DevTools. Você precisa ativar a depuração do WebView no código do aplicativo.

1. Confira se você está configurado para executar o app em um dispositivo de hardware ou virtual.
2. Ative a depuração do WebView no código do aplicativo chamando setWebContentsDebuggingEnabled. Isso geralmente é feito na classe Activity ou Application, em que a WebView é inicializada.

Recomendamos envolver setWebContentsDebuggingEnabled em uma verificação condicional para que a depuração seja ativada apenas em builds de desenvolvimento, não em produção. Essa configuração se aplica a todas as WebViews no seu app.

A depuração do WebView não é afetada pelo estado da flag debuggable no manifesto do aplicativo. Se você quiser ativar a depuração do WebView apenas quando a flag debuggable estiver definida como true, teste essa flag no tempo de execução, conforme mostrado no exemplo a seguir:

if (applicationInfo.flags and ApplicationInfo.FLAG_DEBUGGABLE != 0) {
     WebView.setWebContentsDebuggingEnabled(true)
}

if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) {
     WebView.setWebContentsDebuggingEnabled(true);
}

Começar a depurar sua WebView

Depois de ativar a depuração do WebView no código do aplicativo e o app estar em execução em um dispositivo físico ou no Android Emulator, conecte o Chrome DevTools ao WebView:

1. Abra o Chrome na sua máquina de desenvolvimento.
2. Acesse chrome://inspect.

3. Na página chrome://inspect, verifique se a opção Descobrir dispositivos USB está marcada. Encontre seu dispositivo na seção Destino remoto.

   

4. Abaixo do nome do dispositivo, o Chrome lista todas as WebViews ativadas para depuração em execução nesse dispositivo, geralmente identificadas por WebView em seguido pelo nome do pacote do app. Encontre a WebView que você quer depurar e clique no link inspect.

Uma nova instância do DevTools será aberta para você inspecionar sua WebView.

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 no seu dispositivo ou emulador. Para resolver problemas, consulte Depurar remotamente dispositivos Android e Depuração remota de WebViews.