Debug remoto de um APP Híbrido com o Apache Cordova | Morettic

Debug remoto de um APP Híbrido com o Apache Cordova

porLuis Augusto Moretto

Debug remoto de um APP Híbrido com o Apache Cordova

Você sabe como fazer o Debug remoto de um APP Híbrido desenvolvido com Apache Cordova no Chrome Webview?

Cordova Remote Debug Hybrid APP

Introdução

A importância para fazer debug cordova é que, o seu aplicativo híbrido terá algumas diferenças visuais entre a versão Web e seu dispositivo Android.

Esses tipos de erros visuais são bastante difíceis de consertar, pois você deve recompilar seu aplicativo e copiá-lo em seu device toda vez que você realizar uma alteração.

Mas há uma solução para este problema: a incrível ferramenta de depuração do Chrome Webview! E isso não é tudo, pessoal. Você também pode usar essa ferramenta para depurar remotamente seu código JavaScript passo a passo!

fazendo o debug cordova remoto no android

requisitos

Esta opção de debug é nova e requer a versão do Cordova 3.3  ou superior. O dispositivo mobile deve rodar o Android 4.4 ou superior e você deve ter  o Chrome 30+.

Para poder depurar o seu dispositivo Android com o seu computador, primeiro você deve ativar a opção Depuração USB nos parâmetros do seu dispositivo. Esta opção está nas opções do desenvolvedor, que está oculto por padrão.

Além disso o DRIVER ADB de seu dispositivo deve estar instalando

acessando o dispositivo remoto no chrome webview

Para acessar o console de debug remoto no Chrome Webview é simples. Verifique se você já configurou seu dispositivo no modo Desenvolvedor, instalou o driver ADB corretamente e atende aos requisitos de versão;

Além disso conecte diretamente o dispositivo Android à máquina de desenvolvimento usando um cabo USB.

Se esta for a primeira vez que o dispositivo Android é conectado a essa máquina de desenvolvimento, o dispositivo será exibido em Unknown, com o texto Pending Authorization abaixo dele.

Caso os passos estejam corretos digite a  URL abaixo em seu Chrome. Uma janela do navegador com o dispositivo conectado será aberta.

    
    chrome://inspect/#devices

Cordova Remote Debug Hybrid APP
Devices conectados na USB

Clicando na opção inspect, você irá abrir uma janela do Chrome. Nesta janela será apresentada uma miniatura do seu APP e o código fonte dele para debug. 

Agora basta colocar o Breakpoint e iniciar o debug de seu APP Híbrido.

Cordova Remote Debug Hybrid APP
Interface de depuração do Chrome Webview com breakpoints

Happy Coding! 😀