Depurar usando o app WebView DevTools

O app WebView DevTools é um utilitário no dispositivo para gerenciar e depurar o componente WebView do sistema. Ele é separado do Chrome DevTools, que é executado na sua máquina de desenvolvimento e permite depurar remotamente o conteúdo da Web ativo (HTML, CSS e JavaScript) em uma instância do WebView.

O WebView DevTools é um app complementar que é instalado automaticamente no seu dispositivo junto com o componente do sistema WebView. O app é dividido em quatro áreas:

• Início: veja informações da versão e mude o WebView padrão para uma versão de canal de pré-lançamento.
• Erros: liste e faça upload de relatórios de erros do WebView.
• Flags: defina flags de desenvolvedor para mudar o comportamento da WebView.
• Registros de rede: lista e compartilhamento de registros de rede de baixo nível do WebView.

Executar o WebView DevTools

Em dispositivos com Android 16 ou mais recente que têm o modo de desenvolvedor ativado, é possível iniciar o WebView DevTools acessando Configurações > Sistema > Opções do desenvolvedor > WebView DevTools.

Em todas as versões recentes do Android, é possível iniciar o WebView DevTools usando um comando adb:

adb shell am start -a "com.android.webview.SHOW_DEV_UI"

Como alternativa, se você instalar um canal de pré-lançamento do WebView, como Beta, Dev ou Canary, use o ícone do iniciador do WebView DevTools.

Na primeira vez que você executar o WebView DevTools, ele vai solicitar permissão de notificação para mostrar uma notificação persistente listando as flags de desenvolvedor que você ativar.

Mudar para um canal de pré-lançamento

Os recursos e as correções de bugs mais recentes da WebView são disponibilizados primeiro em canais de pré-lançamento. Para testar seu app com essas mudanças, troque o provedor WebView do dispositivo usando o WebView DevTools. Testar em canais de pré-lançamento ajuda a garantir que seu app seja compatível com as próximas versões do WebView antes do lançamento para os usuários.

1. Instale a versão Beta, Dev ou Canary do WebView, dependendo da sua preferência entre estabilidade e acesso às mudanças mais recentes.
2. Abra o app WebView DevTools e toque em Mudar provedor.
3. Se essa opção não aparecer, toque nos três pontos no canto superior direito e selecione Mudar provedor do WebView.

Para mais informações, consulte Testar o WebView Beta, Dev ou Canary.

Canais do WebView

Os canais do WebView são baseados nos canais de lançamento do Chrome. Cada canal representa um nível diferente de estabilidade e atualização do código. Confira um resumo rápido de quando usar cada canal da WebView:

• Canary: atualizado diariamente. Esse canal tem as mudanças mais recentes, incluindo novos recursos e correções de bugs assim que são incorporados à base de código do Chromium. Use essa opção se quiser testar como seu web app é executado em uma WebView com uma mudança mesclada recentemente, mas saiba que esse canal pode ser instável ou conter bugs.

• Dev: atualizado uma ou duas vezes por semana. Esse canal é mais estável do que o Canary, mas ainda contém mudanças de ponta. É melhor para desenvolvedores que querem testar novos recursos, mas com menos risco de bugs não relacionados do que o Canary.

• Beta: atualizado aproximadamente toda semana, com uma atualização importante a cada quatro semanas. Esse canal oferece uma prévia dos recursos na próxima versão estável do WebView cerca de 4 a 6 semanas antes do lançamento estável. Use isso para testar seu web app com a próxima versão do WebView e verificar a compatibilidade.

• Canal estável: atualizado a cada quatro semanas para lançamentos importantes e a cada duas ou três semanas para lançamentos menores com correções de bugs urgentes. Esse é o canal de produção da WebView, lançado para todos os usuários. É o canal mais estável, já que passou por testes em outros canais. Use isso se quiser testar seu app da Web em uma WebView da maneira como a maioria dos usuários faz agora, talvez para reproduzir um bug que eles relataram.

Interface de falha

Se você tiver falhas do WebView ao desenvolver seu app, poderá listar, fazer upload e registrar relatórios de bugs contra eles usando o WebView DevTools.

1. Depois que o app falhar, reinicie-o para garantir que o relatório de falhas seja gerado.
2. Abra o app WebView DevTools e toque em Falhas.

Para mais informações, consulte a documentação da interface do usuário de falhas.

Interface de denúncia

O app WebView DevTools permite definir várias flags úteis para mudar o comportamento de todas as WebViews no dispositivo. A maioria das flags é usada apenas para o desenvolvimento da própria WebView, mas algumas são úteis para desenvolvedores de apps Android.

• highlight-all-webviews: identifica WebViews adicionando uma tonalidade amarela sobre elas.
• net-log: ativa o registro de baixo nível da atividade de rede da WebView.
• webview-log-js-console-messages: faz com que os registros do console JavaScript apareçam no Logcat.

Para mais informações, consulte a documentação da interface de flags.

Registros de rede

Se não for possível resolver problemas de conexão do servidor no WebView usando o Chrome DevTools, use o WebView DevTools para capturar registros de rede de baixo nível.

1. Ative a depuração da WebView no código do app.
2. No WebView DevTools, abra Flags, encontre net-log e ative a opção. Reinicie o app para que a flag entre em vigor.
3. Realize ações que acionem o comportamento de rede que você quer depurar. Depois de reproduzir o problema, feche o app.
4. Abra a seção "Registros de rede" do WebView DevTools para localizar e compartilhar o arquivo de registro de rede.
5. É possível carregar o arquivo de registro JSON no Netlog Viewer, uma ferramenta on-line para visualizar registros de rede, inspecionar eventos de rede de baixo nível, informações de soquete e detalhes de tempo.

Para mais informações, consulte Depuração de rede no WebView.