Depure remotamente conteúdo ativo de um dispositivo Android em um computador Windows, Mac ou Linux. Este tutorial ensina a:
- Configure o dispositivo Android para depuração remota e faça a descoberta dele 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 seu dispositivo Android para uma instância do DevTools na máquina de desenvolvimento.
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.
- 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 autenticação pendente.
Nesse caso, aceite a solicitação da sessão de depuração na tela do dispositivo.
Se o nome do modelo do dispositivo Android aparecer, isso significa que o DevTools estabeleceu a conexão com ele.
Prossiga 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 ligá-lo novamente. Faça isso enquanto as telas do Android e da máquina de desenvolvimento estiverem desbloqueadas.
- Verifique se o cabo USB funciona. Você vai poder inspecionar arquivos no seu dispositivo Android usando sua máquina de desenvolvimento.
Verifique se o software está configurado corretamente:
- Se sua máquina de desenvolvimento estiver executando o Windows, tente instalar manualmente os drivers USB do dispositivo Android. Consulte Instalar drivers USB OEM.
- Algumas combinações de dispositivos Windows e Android (especialmente Samsung) exigem configurações extras. Consulte Dispositivos Chrome DevTools não detectam o dispositivo quando conectado.
Se o prompt Permitir a depuração USB não aparecer 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 a solicitação 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 eles nunca entrem em suspensão.
- Definindo o modo USB do Android para PTP. Consulte O Galaxy S4 não mostra a caixa de diálogo "Autorizar a depuração USB".
- Selecione Revogar autorizações de depuração USB na tela Opções do desenvolvedor no dispositivo Android para redefini-lo para um novo estado.
Se você encontrar uma solução que não seja mencionada 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 usando sua máquina de desenvolvimento
- Abra o Chrome no seu dispositivo Android.
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, está a versão do Chrome que está sendo executada no dispositivo, com o número de versão entre parênteses.Na caixa de texto Abrir guia com URL, insira um URL e clique em Abrir. A página abre em uma nova guia no dispositivo Android.
Cada guia remota do Chrome tem a própria seção em
chrome://inspect/#devices
. Você pode interagir com essa guia nessa seção. Se houver algum app usando o 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.
A versão do Chrome em execução no dispositivo Android determina a versão do DevTools 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á ser muito diferente da que você está acostumado.
Mais ações: pausar, focar, atualizar ou fechar uma guia
Abaixo do URL, há um menu para pausar, focar, atualizar ou fechar uma guia.
Inspecionar elementos
Acesse o painel Elementos da instância do DevTools e passe o cursor sobre um elemento para destacá-lo na janela de visualização do dispositivo Android.
Você também pode tocar em um elemento na tela do dispositivo Android para que ele seja selecionado no painel Elementos. Clique em Select Element 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 para visualizar o conteúdo do dispositivo Android na instância do DevTools.
Você pode interagir com o screencast de várias maneiras:
- Os cliques são convertidos em toques, acionando eventos de toque adequados no dispositivo.
- Quando o usuário pressiona de teclas no computador, ele é enviado ao dispositivo.
- Para simular um gesto de pinça, mantenha a tecla Shift pressionada enquanto arrasta.
- Para rolar, use o trackpad, a roda do mouse ou navegue com o ponteiro do mouse.
Algumas observações sobre screencasts:
- Os screencasts exibem somente o conteúdo da página. As 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.
- Os screencasts afetam negativamente as taxas de frames. Desative o screencasting ao medir as rolagens ou animações para ter uma imagem 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 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 protocolo do Chrome DevTools (CDP) do seu 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 dispositivo Android.
Conecte o dispositivo Android à sua máquina de desenvolvimento usando:
- Um cabo USB (simples).
- Alternativamente, 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 do CDP no dispositivo para a porta local do computador, por exemplo,
9222
. Para fazer isso, execute:adb forward tcp:9222 localabstract:chrome_devtools_remote
Após a conexão, confira o seguinte:
http://localhost:9222/json
lista suas metas depage
.http://localhost:9222/json/version
expõe o endpoint de destinobrowser
, conforme indicado pela documentação do CPS.chrome://inspect/#devices
é preenchido, mesmo sem a configuração Descobrir dispositivos USB marcada.
Para solucionar problemas, consulte:
- Documentação de
adb
Se quiser, leia os guias mais antigos: