Depuração remota em dispositivos Android
Saiba como fazer depuração remota de aplicações e páginas web do seu dispositivo Android em seu computador
Introdução
A ferramenta de inspeção é uma boa prática utilizada para visualização de elementos da página, ou debug. Ela é utilizada para entender o comportamento de uma página em um sentido amplo e é reconhecida como uma ferramenta de desenvolvimento web. Ao inspecionar, temos acesso aos seguintes recursos:
- Aos elementos DOM (Document Object Model)
- O Console, para vermos as respostas e comportamentos do sistema
- Às APIs trabalhadas na página
- À conexão e suas devidas simulações de velocidade alta, baixa e offline
- Ao visualizador de cache do sistema e armazenamento de dados
- E muitos outros…
Afinal, como podemos inspecionar uma página?
Para atingirmos camadas mais profundas ao testar nossas aplicações web e páginas web realizamos a inspeção da página. Para isso acontecer, devemos realizar uma das seguintes ações:
- Clicar com o botão direito do mouse na página e selecionar ‘Inspecionar’
- Apertar o botão F12 de seu teclado
- Realizar o comando ‘Ctrl + Shift + I’
- Na tela do navegador, clicar nos três pontos em coluna no canto superior direito de sua tela > Mais ferramentas > Ferramentas do desenvolvedor.
Teremos então um ambiente com a semelhança da imagem a seguir:
No Dev Tools conseguimos ainda simular, deixando em um modo responsivo, como ficaria o Front da página em um dispositivo móvel. Para isso realizamos os seguintes passos:
- Clicamos no botão ‘Toogle Device Toolbar’ destacado em vermelho na imagem abaixo:
2. Será apresentada a página com um menu superior. Podemos simular vários dispositivos, aumentar ou diminuir zoom, simular dispositivos com processamentos simples e intermediários, conexão offline e botão de rotação de tela. Ao clicarmos nos três pontos em vertical à direita podemos incluir o frame do dispositivo, como na imagem a seguir:
Que beleza. Então testando dessa forma eu já tenho os mesmos resultados em um dispositivo mobile?
Não, muito longe disso.
Sobre as fazendas de testes mobile…
As fazendas (ou device farms) nos dão um maior alcance de dispositivos e versões. Logo, conseguimos verificar a funcionalidade de uma aplicação ou página web e temos como exemplo o BrowserStack, Kobiton, Sauce Labs e outros. A maioria delas nos dá um tempo de uso grátis para conhecer, se ambientar e até mesmo utilizar alguns poucos dispositivos liberados, mas são pagas.
Beleza, mas será que também conseguimos testar com nossos dispositivos, ou seja, ter a mesma sensação de uso que nosso cliente?
A resposta é sim!
Exemplo de uso de Depuração Remota de dispositivos móveis
Tentando simular ao máximo o ambiente de nossos usuários em uma aplicação ou página web chegamos agora na inspeção de um dispositivo móvel, sendo mais uma ferramenta para testes funcionais e não funcionais. Aqui analisaremos o navegador Android do dispositivo.
Para realização deste artigo o seguinte cenário foi utilizado:
- Sistema operacional Windows 10
- Navegador Google Chrome versão 91.0
- Dispositivo móvel Xiaomi Redmi 8
- Android versão 9
E como fazer isso? Confira os passos a seguir:
Passo 1 — Em seu dispositivo móvel, liberar a opção de desenvolvedor
Para liberarmos a opção de desenvolvedor no dispositivo Android devemos acessar ‘Configurar’ > ‘Sobre o dispositivo’ e na versão do dispositivo. Toque 7 vezes em cima do número da versão.
Após realizar essa operação no dispositivo citado foi apresentado ao final de ‘Configurações adicionais’ o acesso a ‘Opções do desenvolvedor’:
Ao acessar a opção “Depuração”, ativar ‘Depuração USB’ como na imagem a seguir:
Dica importante:
Cada modelo pode ter um jeito diferente de habilitar a opção de desenvolvedor. Logo, realize uma pesquisa voltada para seu dispositivo.
Passo 2 — Conecte o dispositivo em seu computador
Para conectar o dispositivo ao computador, devemos ter um conector do dispositivo com saída USB. Ao conectar, será apresentada a informação de ‘Depuração USB conectada’ e não use o USB para transferência de dados.
Passo 3 — Abra a aplicação web ou página a ser acessada no dispositivo móvel
Em seu dispositivo abra o seu navegador mobile, sendo no cenário apresentado o Chrome. Vamos acessar a página principal do Google.
Passo 4 — Encontrar a página de inspeção no seu navegador
Como utilizamos o navegador Chrome no dispositivo devemos também utilizar o Chrome em nosso computador. Ao abrirmos o navegador digitamos ‘chrome://inspect/#devices’ na barra de navegação, na qual nos apresentará na aba ‘Devices’ o devido dispositivo com o serial e, abaixo, a devida página acessada.
Para realizarmos a depuração, selecionamos a página e clicamos em ‘inspect’ como identificado na imagem a seguir:
Uma nova aba será aberta e, então, poderemos realizar a inspeção da aplicação ou página web. Ao manusearmos a página, seja trocando de página e realizando ações no dispositivo, teremos o resultado imediato sendo apresentado. Poderemos realizar ações tanto no dispositivo quanto na tela.
Dúvida: Mas isso só funciona no Chrome?
Não, e que bom que não!
Funcionamento em outros navegadores
Para o acesso à depuração remota Mobile no Edge ou no Brave:
- Acessar uma devida página pelo Edge ou Brave no dispositivo Android;
- Em sua máquina, no mesmo navegador de acesso, digitar na barra de navegação ‘navegador://inspect/#devices’, trocando a palavra navegador por ‘edge’ ou ‘brave’;
- A usabilidade é muito parecida com a do Chrome, com diferenças mínimas. Em ambos casos será apresentado como no dispositivo, podendo ser manuseado pelo computador.
Para o acesso à depuração remota Mobile do Mozilla Firefox:
- Acessar uma devida página no Firefox no dispositivo Android;
- Em sua máquina, no mesmo navegador de acesso, podemos ou digitar na barra de navegação ‘about:debugging’ ou também acessar o menu do navegador e acessar Mais Ferramentas > Depuração Remota;
- À esquerda da tela teremos o seu dispositivo conectado, então clicaremos no botão ‘conectar’ e depois no dispositivo.
- Teremos a versão de seu navegador, todas as abas abertas e algumas extensões utilizadas. Para Inspecionar uma aba clique em ‘Inspecionar’ ao lado da aba desejada.
Observação:
No Mozilla não será apresentada a tela do dispositivo, sendo essa a única diferença do Firefox para outros navegadores.
Conclusão
Concluímos que a depuração de aplicações e páginas web pode ser uma ferramenta a mais trazendo uma série de benefícios como:
- Testar com nosso próprio dispositivo ou outros dispositivos acessíveis, desde que sejam Android;
- Aumentar nosso range de testes exploratórios baseados em hipóteses, dado que estamos mais próximos de como nosso cliente usará seu dispositivo;
- Aumentar a gama de testes não funcionais, testando uma aplicação ou página web em diferentes navegadores, com muitos aplicativos abertos, grande quantidade de cache, tempo de resposta dada a conexão, rotação de tela e outros;
- Teremos todo o aparato de inspeção como informada no início desse artigo para diferentes navegadores, identificando diferentes comportamentos.
- Possibilidade de encontrarmos falta de suporte dos diferentes navegadores, dada diferentes versões de navegadores, em uma novidade ou descontinuidade na linguagem de programação utilizada, afetando assim no funcionamento da aplicação ou página web. Exemplo, em um dado projeto utilizarmos um componente do EcmaScript mais recente, sendo que o Chrome tem suporte e no Edge não.
E lembrando que é possível utilizarmos heurísticas, como a ALTER FACE, de Júlio de Lima, e a T-PAIN, de Rafael Bandeira, para nos auxiliar a ter melhores resultados!
Fontes bibliográficas:
- Luana Sa, Inspecionar elemento: Aprenda a utilizar a ferramenta: https://www.hostgator.com.br/blog/como-utilizar-o-inspecionar-elemento/
- Kayce Basques, Remote Debug Android Devices: https://developer.chrome.com/docs/devtools/remote-debugging/
- Webplatform, Mobile web debugging: https://webplatform.github.io/docs/concepts/mobile_web/mobile_debugging/
- Mozilla, Page Inspector: https://developer.mozilla.org/pt-BR/docs/Tools/Page_Inspector
- Mozilla, About Debugging: https://developer.mozilla.org/en-US/docs/Tools/about:debugging
- Microsoft, Devtools Guide Chromium — Remote Debugging: https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/remote-debugging/
- Microsoft, Devtools Guide Chromium — Device Mode: https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/device-mode/
Gostaria de agradecer a todos os amigos e familiares, a todos que trabalham comigo e também a Cristhiane Jacques, Gabriel Santos e Tainara Reis pela contribuição no artigo!
