Depurar dispositivos Android remotamente

Kayce Basques

Sofia Emelianova

Depure remotamente conteúdo ativo em um dispositivo Android no seu computador Windows, Mac ou Linux. Neste tutorial, você vai aprender a:

• Configure seu dispositivo Android para depuração remota e descubra-o na sua máquina de desenvolvimento.
• Inspecione e depure conteúdo ativo no seu dispositivo Android pela máquina de desenvolvimento.
• Transmita conteúdo do seu dispositivo Android para uma instância do DevTools na sua máquina de desenvolvimento.

Etapa 1: descobrir seu dispositivo Android

O fluxo de trabalho abaixo funciona para a maioria dos usuários. Consulte Solução de problemas: o DevTools não está detectando o dispositivo Android para mais ajuda.

1. Abra a tela Opções do desenvolvedor no Android. Consulte Configurar opções do desenvolvedor no dispositivo.
2. Selecione Ativar depuração USB.
3. Na máquina de desenvolvimento, abra o Chrome.
4. Acesse chrome://inspect#devices.

5. Verifique se a opção Descobrir dispositivos USB está ativada.

   

6. Conecte o dispositivo Android diretamente à máquina de desenvolvimento usando um cabo USB.

7. Se você estiver conectando o dispositivo pela primeira vez, ele vai aparecer como "Off-line" e com autenticação pendente.

   

   Nesse caso, aceite a solicitação de sessão de depuração na tela do dispositivo.

8. Se o nome do modelo do seu dispositivo Android aparecer, as DevTools estabeleceram a conexão com ele.

   

9. Continue para a etapa 2.

Solução de problemas: o DevTools não está detectando o dispositivo Android

Verifique se o hardware está configurado corretamente:

• Se você estiver usando um hub USB, tente conectar o dispositivo Android diretamente à máquina de desenvolvimento.
• Tente desconectar e reconectar o cabo USB entre o dispositivo Android e a máquina de desenvolvimento. Faça isso enquanto as telas do Android e da máquina de desenvolvimento estiverem desbloqueadas.
• Verifique se o cabo USB funciona. Você poderá inspecionar arquivos no dispositivo Android na sua máquina de desenvolvimento.

Verifique se o software está configurado corretamente:

• Se a máquina de desenvolvimento estiver executando o Windows, tente instalar manualmente os drivers USB do seu dispositivo Android. Consulte Instalar drivers USB OEM.
• Algumas combinações de dispositivos Windows e Android (principalmente Samsung) exigem configuração extra. Consulte O Chrome DevTools Devices não detecta o dispositivo quando ele está conectado.

Se o comando Permitir depuração USB não aparecer no dispositivo Android, tente:

• Desconecte e reconecte o cabo USB enquanto o DevTools está em foco na sua máquina de desenvolvimento e a tela inicial do Android está sendo mostrada. Em outras palavras, às vezes, a solicitação não aparece quando as telas do seu Android ou da máquina de desenvolvimento estão bloqueadas.
• Atualizar as configurações de tela do dispositivo Android e da máquina de desenvolvimento para que eles nunca entrem em modo de espera.
• Definir o modo USB do Android como PTP. Consulte A caixa de diálogo "Autorizar depuração USB" não aparece no Galaxy S4.
• Selecione Revogar autorizações de depuração USB na tela Opções do desenvolvedor do seu dispositivo Android para redefinir o estado dele.

Se você encontrar uma solução que não esteja mencionada nesta seção ou em O Chrome DevTools Devices não detecta o dispositivo quando ele está conectado, adicione uma resposta a essa pergunta do Stack Overflow ou abra um problema no repositório developer.chrome.com.

Etapa 2: depurar conteúdo no dispositivo Android na máquina de desenvolvimento

1. Abra o Chrome no dispositivo Android.

2. Em chrome://inspect/#devices na máquina de desenvolvimento, você vê o nome do modelo do dispositivo Android, seguido pelo número de série. Abaixo disso, você pode conferir a versão do Chrome em execução no dispositivo, com o número da versão entre parênteses.

   

3. Na caixa de texto Abrir guia com URL, insira um URL e clique em Abrir. A página vai abrir em uma nova guia no seu dispositivo Android.

   

   Cada guia remota do Chrome tem uma seção própria em chrome://inspect/#devices. Você pode interagir com essa guia nesta seção. Se houver apps usando WebView, uma seção para cada um deles também vai aparecer. Neste exemplo, há apenas uma guia aberta.

4. Clique em Inspecionar ao lado do URL que você acabou de abrir. Uma nova instância do DevTools é aberta.

A versão do Chrome em execução no dispositivo Android determina a versão do DevTools que é aberta na máquina de desenvolvimento. Portanto, se o dispositivo Android estiver executando uma versão muito antiga do Chrome, a instância do DevTools poderá parecer muito diferente do que você está acostumado.

Mais ações: pausar, focar, recarregar ou fechar uma guia

Abaixo do URL, você encontra um menu para pausar, focar, recarregar ou fechar uma guia.

Inspecionar elementos

Acesse o painel Elementos da sua instância do DevTools e passe o cursor sobre um elemento para destacá-lo na janela de visualização do seu dispositivo Android.

Você também pode tocar em um elemento na tela do dispositivo Android para selecioná-lo no painel Elementos. Clique em Selecionar elemento na sua instância do DevTools e toque no elemento na tela do dispositivo Android. O Selecionar elemento é desativado após o primeiro toque. Por isso, é necessário reativar o recurso sempre que quiser usá-lo.

Fazer screencast da tela do Android para a máquina de desenvolvimento

Clique em Alternar screencast para ver o conteúdo do seu dispositivo Android na instância do DevTools.

É possível interagir com o screencast de várias maneiras:

• Os cliques são traduzidos em toques, acionando os eventos de toque adequados no dispositivo.
• As teclas pressionadas no computador são enviadas para o dispositivo.
• Para simular um gesto de pinça, mantenha a tecla Shift pressionada enquanto arrasta.
• Para rolar, use o trackpad ou a roda do mouse ou deslize rapidamente com o ponteiro do mouse.

Algumas observações sobre screencasts:

• Os screencasts mostram apenas o conteúdo da página. As partes transparentes da screencast representam interfaces de dispositivos, como a barra de endereço do Chrome, a barra de status do Android ou o teclado Android.
• Os screencasts afetam negativamente as taxas de frames. Desative a gravação de tela ao medir rolagens ou animações para ter uma visão mais precisa da performance da página.
• Se a tela do dispositivo Android for bloqueada, o conteúdo da screencast vai desaparecer. Desbloqueie a tela do dispositivo Android para retomar a transmissão de tela automaticamente.

Depurar manualmente usando o Android Debug Bridge (adb)

Em alguns casos raros, um método alternativo de depuração remota pode ser útil. Por exemplo, talvez você queira se conectar diretamente ao Chrome DevTools Protocol (CDP) do Chrome no Android.

Para fazer isso, use o Android Debug Bridge (adb):

1. Ative as Opções do desenvolvedor e a depuração USB no dispositivo Android.
2. Abra o Chrome no dispositivo Android.

3. Conecte o dispositivo Android à máquina de desenvolvimento usando:

   • Um cabo USB (simples).
   • Ou conexão Wi-Fi do adb.

4. Na linha de comando da máquina de desenvolvimento, execute adb devices -l e verifique se o dispositivo está na lista.

5. Encaminhe o soquete do CDP no dispositivo para a porta local da sua máquina, por exemplo, 9222. Para fazer isso, execute:

   adb forward tcp:9222 localabstract:chrome_devtools_remote
   

6. Depois de se conectar, confira se:

   • http://localhost:9222/json lista seus page destinos.
   • http://localhost:9222/json/version expõe o endpoint de destino browser, conforme indicado na documentação do CDP.
   • O chrome://inspect/#devices é preenchido, mesmo sem a configuração Descobrir dispositivos USB marcada.

Para resolver problemas, consulte:

• Documentação do adb (link em inglês)

• Se quiser, leia os guias mais antigos:

  • remote-debugging-legacy
  • remote-debugging
  • girish.in/…how