Como depurar remotamente aplicativos da Web para Android e sites no Linux

Depurar sites e aplicativos da web destinados a dispositivos móveis pode ajudar a corrigir problemas e melhorar a experiência do usuário em dispositivos portáteis. Este artigo explicará como depurar qualquer site em execução em um navegador baseado em Chrome / Chromium ou webview em um dispositivo Android. Observe que o Firefox também suporta depuração remota de dispositivos Android. No entanto, não consegui fazê-lo funcionar em meu sistema Linux, então o artigo abordará apenas as instruções para depurar sites / aplicativos da web renderizados no navegador Chrome ou visualizações da web baseadas em Chrome / Chromium em um dispositivo Android.

Para depurar qualquer página da web atualmente visível no navegador Chrome ou webview em um dispositivo Android, você precisará ativar a depuração USB e conectar seu dispositivo Android a um PC Linux por meio de um cabo USB.

Habilitando a depuração USB em um dispositivo Android

O botão de depuração USB pode ser encontrado no menu oculto "Opções do desenvolvedor" em dispositivos Android. Para habilitar a visualização das opções do desenvolvedor, você deve tocar na entrada “Build Number” 7 vezes nas configurações do sistema. Como existem vários dispositivos Android com diferentes interfaces de usuário e versões, não há uma forma padrão definida para encontrar o número da compilação. Você pode usar a barra de pesquisa nas configurações do sistema Android para localizar e ir diretamente para a opção de número de compilação ou navegar manualmente pelas configurações do sistema para encontrá-la. Normalmente, está no mesmo menu que mostra a versão do kernel Linux em um dispositivo Android.

Depois de habilitar as opções do desenvolvedor, alterne o botão para depuração USB. Tenha cuidado para não tocar em outras configurações nas opções do desenvolvedor, pois a configuração incorreta pode levar à quebra do sistema. Para referência, aqui está a aparência da opção de depuração USB em meu dispositivo Samsung Android:

Instalando Android Debug Bridge (ADB) no Linux

ADB é uma ferramenta de depuração oficial fornecida pelo Google para depurar o sistema operacional Android e dispositivos Android. Facilita o compartilhamento de dados e a comunicação entre um PC e um dispositivo Android. ADB é necessário para depuração remota de uma página da web atualmente ativa em um dispositivo Android. Ele também é usado para autenticar e verificar a conexão do seu dispositivo Android com o seu PC Linux.

Para instalar o ADB no Ubuntu, execute o comando abaixo:

$ sudo apt install adb

Os pacotes ADB estão disponíveis por padrão em quase todas as principais distribuições Linux. Se você estiver usando uma distribuição Linux diferente do Ubuntu, pesquise o termo “ADB” no gerenciador de pacotes e instale-o a partir daí.

Agora conecte seu dispositivo Android ao sistema Linux por meio de um cabo USB. Caso você esteja conectando seu dispositivo Android com depuração USB pela primeira vez, receberá um aviso de autorização em seu dispositivo Android. Você deve aceitá-lo para prosseguir. Execute o comando abaixo após aceitar o prompt para verificar a conexão bem-sucedida e o status de autenticação:

dispositivos $ adb

A imagem abaixo mostra a saída do comando. Se você puder ver um número de série sob o título "Lista de dispositivos conectados", uma conexão bem-sucedida foi feita. Se houver uma palavra-chave “não autorizada” ao lado do número de série, desconecte o dispositivo, reconecte-o e aceite o prompt de autorização novamente (você pode ter perdido o prompt ou fechou-o acidentalmente).

Depuração remota de uma página da web móvel no navegador Chrome para desktop

Digite o URL “chrome: // inspect / # devices” na barra de endereço do Chrome e pressione a tecla Enter. Marque a caixa de seleção “Descobrir dispositivos USB”. Agora você poderá ver uma lista de todos os sites / aplicativos da web abertos no Chrome, Chromium ou qualquer navegador ou visualização da web com base em Chrome / Chromium em seu dispositivo Android.

Basta clicar no link “inspecionar” para iniciar a depuração. Você obterá o mesmo conjunto completo de ferramentas de desenvolvedor que está disponível para depurar sites em um PC desktop.

Observe que o site ou aplicativo da web de depuração deve estar visível e ativo em seu dispositivo Android. Se você alternar aplicativos, guias ou desligar a tela, a área de visualização pode ficar esmaecida.

Conclusão

Conectar seu dispositivo Android a um PC Linux para sites de depuração remota é bastante simples e requer algumas etapas. Embora você possa depurar layouts responsivos e simular visualizações móveis na própria área de trabalho, a depuração remota é especialmente útil se você estiver desenvolvendo aplicativos híbridos para Android ou usando visualizações da web.