Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Primeiros passos com a depuração remota de dispositivos Android

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

  • configurar seu dispositivo Android para a depuração remota e descobri-lo usando sua máquina de desenvolvimento;
  • inspecionar e depurar conteúdo ativo no seu dispositivo Android usando sua máquina de desenvolvimento;
  • fazer screencast do conteúdo de um dispositivo Android para uma instância do DevTools em sua máquina de desenvolvimento.
A depuração remota permite inspecionar uma página em execução em um dispositivo Android
            de sua máquina de desenvolvimento.
Imagem 1. A depuração remota permite inspecionar uma página em execução em um dispositivo Android da sua máquina de desenvolvimento.

Etapa 1: descobrir o dispositivo Android

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

  1. Abra a tela Developer Options no Android. Veja Configurar as Opções do desenvolvedor no dispositivo.
  2. Selecione Enable USB Debugging.
  3. Na máquina de desenvolvimento, abra o Chrome.
  4. Abra o DevTools.
  5. No DevTools, clique em Main Menu Menu principal e selecione More tools > Remote devices.

    Abrir a guia Remote Devices por meio do Main Menu.
    Imagem 2. Abrir a guia Remote Devices por meio do Main Menu

  6. No DevTools, abra a guia Settings.

  7. Verifique se a caixa de seleção Discover USB devices está ativada.

    A caixa de seleção Discover USB Devices está
       ativada.
    Imagem 3. A caixa de seleção Discover USB Devices está ativada

  8. Conecte diretamente o dispositivo Android à máquina de desenvolvimento usando um cabo USB. A primeira vez que você faz isso, você geralmente percebe que o DevTools detectou um dispositivo desconhecido. Se você ver um ponto verde e o texto Connected abaixo do nome do modelo do seu dispositivo Android, o DevTools estabeleceu a conexão para o dispositivo. Continuar para a Etapa 2

    A guia Remote Devices detectou
       um dispositivo desconhecido que aguarda autorização.
    Imagem 4. A guia Remote Devices detectou um dispositivo desconhecido que aguarda autorização

  9. Se o seu dispositivo estiver aparecendo como Unknown, aceite a solicitação de permissão Allow USB Debugging em seu dispositivo Android.

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

Certifique-se de que seu hardware esteja configurado corretamente:

  • Se você estiver usando um hub USB, tente conectar seu dispositivo Android diretamente à sua máquina de desenvolvimento.
  • Tente desconectar o cabo USB entre o dispositivo Android e a máquina de desenvolvimento e conectá-lo novamente. Faça isso enquanto as telas de seu Android e da máquina de desenvolvimento estiverem desbloqueadas.
  • Certifique-se de que o seu cabo USB funciona. Deve ser possível inspecionar arquivos em seu dispositivo Android de sua máquina de desenvolvimento.

Certifique-se de que seu software esteja configurado corretamente:

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

  • desconectar e reconectar o cabo USB enquanto o DevTools está em foco na sua máquina de desenvolvimento e a tela inicial do Android está aparecendo. Em outras palavras, às vezes o prompt não aparece quando as telas do Android ou da sua 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 fiquem suspensos;
  • configurar o modo USB do Android para PTP. Veja a caixa de diálogo O Galaxy S4 não mostra a autorização para depuração USB;
  • selecionar Revoke USB Debugging Authorizations na tela Developer Options no dispositivo Android para redefini-lo 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 dispositivo quando conectado no, adicione uma resposta a essa pergunta do Stack Overflow ou abra um problema no repositório do webfundamentals!

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

  1. Abra o Chrome em seu dispositivo Android.
  2. Em Remote Devices, clique na guia que corresponde ao nome do modelo do seu dispositivo Android. Na parte superior da página, você verá o nome do modelo do dispositivo Android, seguido pelo número de série. Abaixo, você verá a versão do Chrome executado no dispositivo, com o número de versão entre parênteses. Cada guia aberta do Chrome tem a própria seção. Você pode interagir com essa guia nessa seção. Se um aplicativo estiver usando o WebView, você também verá uma seção para cada um desses aplicativos. Na Imagem 5 não há guias nem WebViews abertos.

    Um dispositivo remoto conectado.
    Imagem 5. Um dispositivo remoto conectado

  3. Na caixa de texto New tab, insira um URL e clique em Open. A página abre em uma nova guia no seu dispositivo Android.

  4. Clique em Inspect ao lado do URL que acabou de abrir. Será aberta uma nova instância do DevTools. 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: atualizar, atribuir foco ou fechar uma guia

Clique em More Options Mais opções ao lado da guia que você quer atualizar, atribuir foco ou fechar.

O menu para recarregar, atribuir foco ou fechar uma guia.
Imagem 6. O menu para 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 o elemento na tela do dispositivo Android. Observe que Select Element é desativado após o primeiro toque. Portanto, é necessário reativá-lo 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 ver 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, mantenha Shift pressionado 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 do screencast representam interfaces do dispositivo, como a barra de endereço do Chrome, a barra de status ou o teclado do Android.
  • Os screencasts afetam negativamente as taxas de frames. Desative screencasts 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 desaparecerá. Desbloqueie a tela do dispositivo Android para retomar automaticamente o screencast.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.