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.

Primeiramente deve-se ter instalado, em seu computador, o Mozilla Firefox versão desenvolvedora:

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:

Primeiramente instale o aplicativo do Mozilla em seu Smartphone, conforme o link fornecido anteriormente.

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].

Caso já não tenha o Android SDK, deve-se baixar o arquivo .zip do Android SDK, conforme link fornecido anteriormente. Após o download, descompacte-o e execute o arquivo [sdk-tools-windows-4333796\tools\bin\sdkmanager.bat]. Depois instale p SDK Manager, conforme link fornecido e execute-o. Será aberto uma janela, marca-se a opção [Android SDK Platform-tools] e desmarque todas as demais e clica-se em [Instalar]. Aguarde até o término da instalação.

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.

Após isso, abra-se o browser Mozilla Firefox for Developer, vá nas opções do navegador e seleciona-se a opção [Web Developer], logo em seguida [Depuração Remota] e, por fim, [Habilitar Dispositivos USB].

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

Assim, nota-se a grande facilidade que é em analisar e depurar o que está havendo em uma aplicação web sendo executada em um dispositivo móvel. Isso elimina o desenvolvimento e correção de bugs “às cegas”.

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store