Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

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?