Tableless

Busca Menu

Debug Remoto com Chrome no Android

Seja o primeiro a comentar por

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:

$  sudo apt-get -y install mtp-tools mtpfs gmtp

Para instalar o Chromium Browser – a versão open source do Google Chrome:

$  sudo apt-get install chromium-browser

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

tableless-adb-plugin-menu

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.

tableless-adb-plugin-menu-active

3 – Conecte seu celular

Conecte seu dispositivo a maquina de desenvolvimento via cabo USB. Qdo você plugar o cabo a seguinte mensagem será exibida:

usb-debugging-dialog

Após apertar em OK vá para página about:inspect

devices-list

Nessa tela, basta clicar no link “inspect” e você verá a seguinte tela:

inspect-1

Clicando no botão screencast0 você verá:

inspect2

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

Publicado no dia