Esta página foi traduzida pela API Cloud Translation.

Depurar dispositivos Android remotamente

Kayce Basques

Sofia Emelianova

Depurar conteúdo ao vivo remotamente em um dispositivo Android usando um computador Windows, Mac ou Linux. Neste tutorial, você vai aprender a:

Configure o dispositivo Android para depuração remota e o descubra na máquina de desenvolvimento.
Inspecione e depure conteúdo ao vivo no seu dispositivo Android usando a máquina de desenvolvimento.
Transmita o conteúdo da tela 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: as Ferramentas do desenvolvedor não estão detectando o dispositivo Android para mais ajuda.

Abra a tela Opções do desenvolvedor no Android. Consulte Configurar opções do desenvolvedor no dispositivo.
Selecione Ativar a depuração USB.
Na máquina de desenvolvimento, abra o Chrome.
Acesse chrome://inspect#devices.
Verifique se a opção Descobrir dispositivos USB está ativada.
Conecte o dispositivo Android diretamente à máquina de desenvolvimento usando um cabo USB.
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.
Se você encontrar o nome do modelo do dispositivo Android, o DevTools terá estabelecido a conexão com o dispositivo.
Siga para a etapa 2.

Solução de problemas: as Ferramentas do desenvolvedor não estão 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 está funcionando. Você poderá inspecionar arquivos no seu dispositivo Android na máquina de desenvolvimento.

Verifique se o software está configurado corretamente:

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

Se você não encontrar a solicitação Permitir a depuração USB no dispositivo Android, tente o seguinte:

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

Se você encontrar uma solução que não foi mencionada nesta seção ou em O Chrome DevTools não detecta o dispositivo quando ele está 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 usando a máquina de desenvolvimento

Abra o Chrome no seu dispositivo Android.
Em chrome://inspect/#devices na máquina de desenvolvimento, você encontra o nome do modelo do dispositivo Android, seguido pelo número de série. Abaixo, você pode conferir a versão do Chrome em execução no dispositivo, com o número da versão entre parênteses.
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.

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 que usam a WebView, você também verá uma seção para cada um deles. Neste exemplo, há apenas uma guia aberta.
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 em execução no dispositivo Android determina a versão das Ferramentas do desenvolvedor que será 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 pode 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 Elements da sua instância do DevTools e passe o cursor sobre um elemento para destacá-lo na viewport do 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 instância do DevTools e toque no elemento na tela do dispositivo Android. A opção Selecionar elemento é desativada após o primeiro toque. Por isso, é 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 para conferir o conteúdo do seu dispositivo Android na sua instância do DevTools.

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

Os cliques são convertidos em toques, disparando eventos de toque adequados no dispositivo.
Os pressionamentos de tecla no computador são enviados ao dispositivo.
Para simular um gesto de pinça, pressione Shift enquanto arrasta.
Para rolar, use o trackpad ou a roda do mouse ou deslize o ponteiro do mouse.

Algumas observações sobre screencasts:

Os screencasts só mostram o conteúdo da página. Partes transparentes do screencast representam interfaces do dispositivo, como a barra de endereço do Chrome, a barra de status do Android ou o teclado do Android.
Screencasts afetam negativamente as taxas de frames. Desative a transmissão de tela ao medir rolagens ou animações para ter uma imagem mais precisa da performance da página.
Se a tela do dispositivo Android for bloqueada, 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):

Ative as Opções do desenvolvedor e a Depuração USB no dispositivo Android.
Abra o Chrome no seu dispositivo Android.
Conecte o dispositivo Android à máquina de desenvolvimento usando:
- Um cabo USB (simples).
- Como alternativa, use a conexão Wi-Fi do adb.
Na linha de comando da máquina de desenvolvimento, execute adb devices -l e verifique se o dispositivo está na lista.
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
```
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:

Documentação do adb (link em inglês)
Também é possível ler guias mais antigos: