Vasculhando a web me deparei com uma coisa muito interessante: a Google criou uma forma de nós, desenvolvedores, usarmos nossas máquinas e o Google Chrome DevTools para inspecionar, debugar e analizar páginas em nossos dispositivos móveis.
Como isso funciona? O “RemoteDebugging” ocorre pela porta USB, a partir do momento que você conecta seu celular no computador, você pode inspecionar páginas html, css, javascript, rodar scripts no console, visualizar o comportamento de uma página nem precisar realizar deploy, testar web apps, outra coisa interessante é que você pode até inspecionar Webviews.
Para iniciar debug remoto você precisará de:
- Um celular ou tablet Android com Chrome for Android na versão 31 ou maior instalado via Google Play. (O Chrome for Android beta já esta na versão 32 – é uma boa opção para sempre testar as novidades – requer ADB-free para conectar)
- Um cabo usb para plugar o seu dispositivo. (Para usuários windows instalar um driver USB apropriado)
- Google Chrome na versão 31 ou maior em sua máquina
Vamos agora às configurações:
1 – Configurando seus dispositivos
Configurando o Android
Caso as opções de desenvolvedor não estejam habilitadas, será necessário fazê-las. A partir da versão 4.2 do Android essa funcionalidade vem escondida por default. Para desabilita-la vá até Configurações > Sobre o telefone e aperte 7 vezes a opção Build number. No Android 4.0 e 4.1 é só ir em Configurações > Opções de Desenvolvedor. Em opções do desenvolvedor basta habilitar a opção Debug USB.
Configurando o Computador
Caso tenha um linux será necessário instalar alguns programas para que o celular ou tablet seja reconhecido pelo computador.
Utiliza os seguintes comandos:
Para instalar os drivers para reconhecimento do dispositivo:
Para instalar o Chromium Browser – a versão open source do Google Chrome:
Caso esteja em Windows será necessário ir no site do android e instalar o driver usb do fabricante apropriado.
As versões 32 do Chrome (as versões beta) tem suporte nativo para Debug Remoto, basta a acessar about:inspect e ver a lista de dispositivos.
Para versões m31 e anteriores é necessário instalar a extensão do chrome ADB Chrome extension. Essa extenção inclui o Android Debug Bridge(ADB) e seguintes benefícios:
- Inclui ADB se não tiver instalado o pacote total do sdk android.
- Fornece uma interface de usuário para facilmente ligar e desligar o ADB e listar dispositivos conectados.
Quando a ADB Chrome extension tiver sido instalada um ícone cinza do android aparecerá ao lado do menu do Chrome
1 – Clique no ícone do android e depois em Start ADB
Após iniciado o ícone do android ficará verde e o número de dispositivos ativos será exibido.
2 – Clique em View Inspection Targets para abrir a página about:inspect.
3 – Conecte seu celular
Conecte seu dispositivo a maquina de desenvolvimento via cabo USB. Qdo você plugar o cabo a seguinte mensagem será exibida:
Após apertar em OK vá para página about:inspect
Nessa tela, basta clicar no link “inspect” e você verá a seguinte tela:
Com o screencast você pode interagir com a tela do seu device como se fosse um site, usar todas as ferramentas de desenvolvedor do chrome e tudo que é feito no device é repetido no seu pc e vice-versa, veja abaixo um video no youtube demonstrando a interação.
Fonte e mais informações: https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=pt-BR