Return to site

Depuração Android via Chrome

Você já precisou debugar um código JS direto no browser do celular? Sabemos que o próprio inspector do Chrome possui um recurso que permite ao programador ajustar a tela de acordo com o dispositivo. Porém, existem celulares que possuem comportamentos diferentes uns dos outros. Como resolver um problema deste tipo?

História Stoom

Tínhamos uma máscara Javascript em um projeto nosso que sempre funcionou normalmente. Um certo dia, descobrimos que em alguns celulares está regra não funcionava. Daí veio a dúvida: Como descobrir o erro que acontece em um celular e não acontece em outro pelo inspector padrão do Chrome?

Não seria possível fazer do jeito que estávamos acostumados, precisaríamos inspecionar tanto o celular que possuía esse problema, quanto o que não possuía.

A solução foi um recurso do Chrome onde conectando seu celular via USB, você consegue depurar celulares distintos. Dessa forma, pudemos notar que o celular que não aceitava o recurso da máscara não caia naquele evento Javascript específico. Após descobrir isso, pudemos fazer as modificações necessárias para que a máscara voltasse a funcionar.

A seguir mostramos o passa a passo para utilizar essa ferramenta.

Requisitos:

  • Chrome 32 (ou versões mais atualizadas) instalado no seu computador
  • Cabo USB para conectar seu dispositivo Android
  • Android 4.0+ e aplicativo do Chrome para Android
No seu sistema Android, selecione Configurar > Programador
Obs: Versões superiores ao Android 4.2, a guia “Programador” fica oculta por padrão. Para habilitar essa opção, selecione Configurar > Sobre o telefone e pressione sete vezes a guia Número da versão

Na opção Programador, selecione Depuração USB

Um alerta será disparado para confirmar a Depuração USB. Pressione OK

Conectando seu dispositivo Android

Agora que você selecionou a opção de Depuração USB e conectou seu dispositivo, você precisa encontrá-lo no Chrome.

No navegador de seu computador, utilize a url: chrome://inspect. Confirme se a opção “Discover USB devices” está selecionada

Em seu dispositivo Android aparecerá um alerta para permitir a depuração USB pelo seu computador, pressione OK

Obs.: Durante a depuração, o Chrome impede que a tela do seu dispositivo hiberne. Este recurso é útil para a depuração, mas é menos seguro. Então não se esqueça de ficar de olho em seu dispositivo.

Em seu computador, o chrome://inspect mostra todos os dispositivos conectados.

Para começar, click em Inspect na página que você queira debugar

Uma nova instância do DevTools Chrome abrirá em seu computador. A partir deste momento, você poderá interagir com a aba do navegador e seu dispositivo Android em tempo real. 

Importante: este recurso não funciona em aba anônima

Agora é só aproveitar seu novo poder Jedi!

Saudações dos Stoomtroopers,

Fonte: https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly