Aug 6, 2019
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
Primeiramente deve-se ter instalado, em seu computador, o Mozilla Firefox versão desenvolvedora:
Instala-se, também, o Android SDK:
- Android SDK para Windows
- SDK Manager
Obs.: nas versões mais recentes do Android SDK, não vem o SDK Manager, tendo que instalá-lo separadamente.
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
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:
- Abre-se o [aplicativo/browser]
- Clica-se nos [3 pontinhos] para abrir as opções que o browser oferece
- Clica-se em [Configurações]
- Seleciona-se a opção [Avançado]
- Habilita a opção [Debugar 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
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.
Configuração no Mozilla Firefox for Developer
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].
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.
Após conectar, pode-se acessar o browser do dispositivo clicando no ícone do mesmo:
Com isso, você poderá ver tudo que há no browser do dispositivo, conforme imagem abaixo:
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.
Conclusão
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”.
