Debugando uma Aplicação Web acessada por um Smartphone Android

Atualmente, diversas aplicações web são desenvolvidas de maneira responsivas, com objetivo de executar, também, em browsers de smartphone, mantendo uma ótima experiência para o usuário. Por esse motivo, alguns bugs podem surgir de forma atípica, pode ocorrer apenas quando alguma aplicação é acessada através de um celular. Com isso, surge a necessidade de poder ver, analisar o que ocorre na aplicação ao ser executada em tal cenário e, mais importante ainda, debugar a mesma nestas condições.

Para solucionar tal desafio, nota-se a grande vantagem em utilizar o Mozilla Firefox para o desenvolvimento de sistemas web.

Ferramentas necessárias

Instala-se, também, o Android SDK:

Além disso, deve-se instalar uma outra ferramenta chamada ADB (Android Debug Bridge), o qual faz uma integração entre um computador e um smartphone via terminal.

E, também, deve-se ter instalado em seu smartphone o aplicativo do Mozilla Firefox:

Configuração no Smartphone

Após a instalação, deve-se habilitar a opção de permitir Debugar remotamente através da conexão via USB no aplicativo do Mozilla Firefox.

Passos:

  1. Abre-se o [aplicativo/browser]
  2. Clica-se nos [3 pontinhos] para abrir as opções que o browser oferece
  3. Clica-se em [Configurações]
  4. Seleciona-se a opção [Avançado]
  5. Habilita a opção [Debugar remotamente via USB]
Habilitar debug remotamente via USB

6. Por fim, basta conectar o Smartphone no Computador via USB

Além disso, é preciso habilitar o celular o Debug via USB. Para isso vá nas configurações de seu Smartphone, acesse as informações do sistema, nesta área irá ter uma outra opção para visualizar as opções de desenvolvedor. Acesse tal opção e habilita-se o [Debug via USB].
Obs.: Para determinados smartphones essa operação pode ser diferente. Alguns precisa-se habilitar a visualização de [Opções do Desenvolvedor].

Configuração no Computador

Com o Android SDK já instalado, baixa-se o arquivo .zip referente ao ADB, conforme link fornecido anteriormente. Após o download, descompacte o arquivo em algum local do computador vá até o diretório onde o arquivo [platform-tools_r29.0.1-windows\adb\adb.exe] está localizado e abre-se o Prompt de Comando neste local.

Com o Smartphone conectado, via USB, no computador, executa-se o seguinte comando no terminal:

  • adb devices

Irá listar os dispositivos móveis conectados no computador e irá solicitar permissão, de conexão, em seu smartphone. Permita tal conexão. Com isso, já há uma conexão enter celular e computador para realizar depurações necessários.

Configuração no Mozilla Firefox for Developer

Disitivos conectados

Com isso, será listados os dispositivos conectados, seleciona-se um e clica-se em [Conectar]. No celular, será solicitado tal conexão, conforme a imagem abaixo. Permita tal conexão, novamente.

Solicitação de permissão para conectar no dispositivo

Após conectar, pode-se acessar o browser do dispositivo clicando no ícone do mesmo:

Dispositivo a ser selecionado

Com isso, você poderá ver tudo que há no browser do dispositivo, conforme imagem abaixo:

Informações e recursos que estão no browser do dispositivo móvel

Como pode-se notar, na seção [Tabs] irá mostrar todas as abas abertas no browser do smartphone, para inspecionar alguma basta clicar em [Inspect] que uma nova aba será aberta com todas as ferramentas de desenvolvedor do mozilla voltadas para o browser do celular, inclusive a função de debugar.

Ferramentas de desenvolvimento do Mozilla apontada para o browser do smartphone

Conclusão

Bachelor in Computer Science, MBA in Software Architecture and .NET Developer.

Bachelor in Computer Science, MBA in Software Architecture and .NET Developer.