Depurando WebView no Android

Coisas que eu quero fazer

Este comando depura uma WebView (HTML, JavaScript) exibida no Android.

Para sermos mais precisos, faremos o seguinte:

• Depurando a página web otimizada para dispositivos móveis que você criou.
• Depurar páginas web criadas ou modificadas dentro do aplicativo.

depurar

Preparar

Preparação lateral do Android

Ative as opções de desenvolvedor. (Veja abaixo as instruções de como ativar as opções de desenvolvedor.)

Androidで開発者向けオプションの表示方法まとめ

やりたいことAndroidで開発者向けオプションを表示します。機種ごとに複数のページを作成したのでまとめます。開発者向けオプションを表示

blog.marunokan.com

2023.05.02

Ative a depuração USB nas opções do desenvolvedor.

Configurações do Windows

Instale o adb (Android Studio).

(Não tenho um PC com o adb instalado, então não sei se é necessário, mas a documentação oficial menciona que é feito via adb.)

Instale o Chrome.

Modificação de código

Vou modificar o código do aplicativo para Android.

No entanto, isso é desnecessário se você quiser apenas visualizar os registros. Você também pode verificar os registros do Chrome no Android.

Insira o seguinte código. Se for apenas um código experimental, você pode colocá-lo no método OnCreate da MainActivity.

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

Estamos realizando uma verificação de versão, mas se o ambiente a ser usado já foi definido…

A verificação de versão não é necessária.

execução

Exiba a página da web que deseja depurar no seu dispositivo Android.

Digite o seguinte URL na barra de endereços do Chrome no Windows.

chrome://inspect/

Uma caixa de diálogo aparecerá no seu dispositivo Android solicitando que você permita a depuração USB. Clique em Permitir. (Essa caixa pode aparecer várias vezes, mas basta clicar em Permitir em cada uma delas.)

Os dispositivos Android e aplicativos com WebView conectados serão listados conforme mostrado abaixo.

Localize a página que deseja depurar e clique em ‘Inspecionar’ .

Se o DevTools for exibido conforme mostrado abaixo, a operação foi bem-sucedida.

Se você chamar `WebView.setWebContentsDebuggingEnabled(true);` dentro do seu aplicativo, a mesma tela que no Android será exibida à esquerda, e você poderá manipular os elementos. Por outro lado, se você não chamar `WebView.setWebContentsDebuggingEnabled(true);`, a tela não será exibida e você não poderá manipular os elementos. (Os registros ainda estarão visíveis.)

Resultado

Agora é possível depurar aplicativos exibidos no Android.