Depurar dispositivos Android remotamente

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Depure remotamente conteúdo ativo de um dispositivo Android em um computador Windows, Mac ou Linux. Este tutorial ensina a:

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

Diagrama de depuração remota

Etapa 1: descobrir o 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 a depuração USB.
  3. Na máquina de desenvolvimento, abra o Chrome.
  4. Acesse chrome://inspect#devices.
  5. Verifique se a opção Caixa de seleção. Discover USB devices está ativada.

    A caixa de seleção "Discover USB Devices" 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.

    Autenticação pendente do dispositivo off-line.

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

  8. Se você encontrar o nome do modelo do dispositivo Android, o DevTools terá estabelecido a conexão com o dispositivo.

    Um dispositivo conectado com sucesso e designado com um nome de modelo.

  9. Siga 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 o cabo USB entre o dispositivo Android e a máquina de desenvolvimento e conecte-o novamente. Faça isso enquanto as telas do Android e da máquina de desenvolvimento estiverem desbloqueadas.
  • Confira se o cabo USB funciona. Deve ser possível inspecionar arquivos no seu dispositivo Android na máquina de desenvolvimento.

Verifique se o software está configurado corretamente:

Se você não encontrar o prompt Allow USB Debugging no dispositivo Android, tente:

  • Desconecte e reconecte o cabo USB enquanto o DevTools está em foco na máquina de desenvolvimento e a tela inicial do Android está aparecendo. Em outras palavras, às vezes o comando não aparece quando as telas do 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 elas nunca fiquem suspensas.
  • Configurar o modo USB do Android para PTP. Consulte O Galaxy S4 não mostra a caixa de diálogo Autorizar depuração USB.
  • Selecione Revoke USB Debugging Authorizations na tela Developer Options no dispositivo Android para redefinir para um novo estado.

Se você encontrar uma solução que não se encontre nesta seção ou em Dispositivos Chrome DevTools não detectam o dispositivo quando conectado, adicione uma resposta à pergunta do Stack Overflow ou abra um problema no repositório developer.chrome.com.

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

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

    A versão do Chrome que é executada no dispositivo.

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

    Uma guia remota listada em uma seção.

    Cada guia remota do Chrome tem a própria seção em chrome://inspect/#devices. Você pode interagir com essa guia nesta seção. Se um aplicativo estiver usando o WebView, você também vai encontrar uma seção para cada um desses apps. 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 será aberta.

Uma nova instância do DevTools para a guia remota.

A versão do Chrome executada no dispositivo Android determina a versão do DevTools aberta na máquina de desenvolvimento. Portanto, se a versão do Chrome em execução no dispositivo Android for muito antiga, a instância do DevTools poderá ser bem diferente da habitual.

Mais ações: pausar, atribuir foco, atualizar ou fechar uma guia

Abaixo do URL, há um menu para pausar, dar foco, atualizar ou fechar uma guia.

O menu para pausar, recarregar, atribuir foco ou fechar uma guia.

Inspecionar elementos

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

Também é possível tocar em um elemento na tela do dispositivo Android para selecioná-lo no painel Elements. Clique em Select Element Selecionar elemento na instância do DevTools e toque no elemento na tela do dispositivo Android. A opção Selecionar elemento é desativada após o primeiro toque. Portanto, é necessário reativá-la sempre que você quiser usar esse recurso.

Transmitir a tela do Android para a máquina de desenvolvimento

Clique em Toggle Screencast Alternar screencast para conferir o conteúdo do dispositivo Android na instância do DevTools.

Você pode interagir com o screencast de diversas maneiras:

  • Os cliques são convertidos em toques, acionando eventos de toque corretos no dispositivo.
  • O comando das teclas pressionadas no computador é enviado ao dispositivo.
  • Para simular um gesto de pinça, pressione Shift enquanto arrasta.
  • Para rolar, use o trackpad, a barra de roda do mouse ou navegue com o cursor do mouse.

Algumas observações sobre screencasts:

  • Os screencasts exibem somente o conteúdo da página. As partes transparentes da transmissão da tela representam interfaces do dispositivo, como a barra de endereço do Chrome, a barra de status do Android ou o teclado do Android.
  • Os screencasts afetam negativamente as taxas de frames. Desative a transmissão de tela durante a medição de rolagens ou animações para ter uma noção mais precisa do desempenho da página.
  • Se a tela do dispositivo Android bloquear, o conteúdo do screencast vai desaparecer. Desbloqueie a tela do dispositivo Android para retomar automaticamente o screencast.

Depurar manualmente pelo Android Debug Bridge (adb)

Em alguns casos raros, um método alternativo de depuração remota pode ser útil. Por exemplo, você pode 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 seu dispositivo Android.
  3. Conecte o dispositivo Android à máquina de desenvolvimento usando:

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

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

    adb forward tcp:9222 localabstract:chrome_devtools_remote
    
  6. Depois de conectar, confira se:

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

Para resolver problemas, consulte: