Testing and debugging websites and web apps on mobile devices can be challenging. Navegadores em telefones e tablets muitas vezes não têm depuradores embutidos, e emular dispositivos móveis nunca é tão preciso quanto você gostaria. Para depurar sites móveis no Android, a versão desktop do Chrome oferece uma solução com depuração remota.,este artigo irá mostrar-lhe como usar a depuração remota com o Chrome do seu computador. Você pode usar um dos sistemas operacionais de desktop comuns como Windows, macOS ou Linux.
Como depurar o Android do google Chrome
Se você acha que você pode ter um bug em um site móvel ou um aplicativo nativo no Android, mas não pode afixá-lo para baixo, demo e site template para suporta JavaScript de relatório de falhas, bem como Android relatório de falhas. Pode fazer um julgamento grátis de 14 dias aqui.
configurar
Antes de fazer qualquer depuração remota, você precisa configurar o seu computador para ser capaz de reconhecer o seu dispositivo Android., Isto significa permitir que o depurador do Chrome reconheça e anexe ao telefone. Você vai começar por definir algumas opções no telefone.
configuração do telefone
abra a aplicação de configuração do seu telemóvel. Terá de activar as opções de desenvolvimento se ainda não o fez. Para fazer isso, vá para o menu “Sobre telefone”, que está localizado dentro do menu do sistema em dispositivos Android modernos. Uma vez que você está lá, role para o fundo e toque em “Build Number” sete vezes. Agora, volte para o ecrã anterior ou para o menu “Sistema” na aplicação de configuração., Lá, você vai agora encontrar um novo item de menu chamado “Opções de desenvolvedor” perto do fundo.
Uma vez que esteja dentro das opções de Desenvolvimento, Active-as no seu telemóvel, Carregando na comutação no topo da página. Quando a opção diz “On”, role um pouco para baixo e Active” USB debugging ” também. Isto permitir-lhe-á depurar o seu dispositivo através de uma ligação de cabo USB.
configuração do Computador (usando o Android USB depuração)
instalação do Driver
isso é tudo o que podemos fazer no telefone, por agora, então, vamos começar o nosso computador pronto., Os passos a serem dados são ligeiramente diferentes em cada um dos grandes sistemas operacionais.
Se estiver a usar o Windows, a primeira coisa que terá de fazer é instalar os drivers USB do seu dispositivo. O site Android Studio tem uma lista de lugares para encontrar os drivers, juntamente com algumas instruções sobre como instalar os drivers em seu computador. Alguns fabricantes fornecem links para um arquivo do driver. Outros apenas levá-lo a um site de suporte, em que caso você vai precisar fazer um pouco de pesquisa para encontrar os drivers para o seu dispositivo.,
no caso do seu computador executar macOS ou Linux, você não precisará instalar drivers. Os usuários do Mac estão de fato prontos para ir. Se a sua máquina executa o Linux, são necessários mais alguns passos de configuração. Você precisa ter certeza de que sua conta de usuário pertence a um determinado grupo e você vai precisar instalar um pacote com as chamadas “regras udev”. São configurações que tornam certos dispositivos USB conhecidos pelo seu computador Linux. Se você está interessado em mais detalhes, eu escrevi um artigo dedicado sobre a configuração Linux para ADB há um tempo atrás.,
Instale Android Debug Bridge (ADB)
Uma vez que você tenha os drivers ou regras udev instalados, Você também vai precisar de ADB, que fornece uma interface para falar com o seu dispositivo móvel. ADB e outras ferramentas de plataforma Android vêm com o Android Studio, mas você também pode baixá-los separadamente.
ou usando Android Studio SDK incorporado ou o pacote de ferramentas de plataforma oficial do Google são as maneiras preferidas de ir. Os pacotes de ferramentas de plataforma são justos .zip-files contendo uma pasta platform-tools., Depois de extrair os arquivos você vai encontrar binários como adb.exe (Windows) ou adb (macOS e Linux) lá. Você pode então executá-los conforme necessário a partir de uma janela de shell ou terminal de sua escolha.
Se estiver no Windows e quiser a versão mais mínima do ADB sem qualquer fluff, dê uma olhada nos Fóruns do XDA; desloque-se para o cabeçalho de Downloads e carregue no primeiro link dessa secção.
Depois de Transferido, execute-o para instalar o ADB., Uma vez instalado, terá de navegar para a pasta onde foi instalado (C:\Program Files(x86)\Minimal ADB and Fastboot por omissão) e fazer duplo-click cmd-here.exe. Isto irá abrir uma janela de pedido de comandos nessa pasta.
usando qualquer uma das técnicas, em sua janela de shell, digite em adb start-server para iniciar o servidor ADB.
Nota: O servidor ADB terá de estar a correr sempre que desejar depurar. Se reiniciar o seu computador, o servidor não estará a correr automaticamente. Não é recomendado executar o ADB como um serviço de Fundo Permanente.,
a última coisa que precisamos fazer para configurar o computador é activar a depuração remota nas Ferramentas de desenvolvimento do Chrome. Para fazer isso, abra o Chrome no seu computador e vá para o DevTools configurações de chrome://inspect/#devices
Para depurar sites no Android a partir daqui, certifique-se de que “Descobrir dispositivos USB” está marcada. Eu também sugiro que mantenha esta seção das ferramentas de desenvolvimento aberto em uma conta, porque vamos precisar dela novamente em breve.
fazendo a conexão
é o mais longe que você pode chegar com qualquer um dos dispositivos por si só., Para depurar sites no Android no dispositivo, precisamos conectá-los juntos. Se ainda não o fez, ligue o seu telemóvel ao seu computador via USB. Se você não fez isso como parte da instalação do driver, você pode ver uma notificação na sua barra de Tarefas, informando que seu computador está configurando seu novo dispositivo. Certifica-te que o teu telemóvel está ligado e destrancado. Se for e o servidor de ADB estiver em execução, deverá ver um popup intitulado ” permitir a depuração USB?”.
Se não aparecer, procure na sua área de notificação no seu dispositivo Android., Se ele diz “conectado como um dispositivo de mídia”, algo assim, ou algo sobre” MTP”, clique sobre ele. Isso deve levá-lo a uma tela que lhe permite escolher um tipo de conexão diferente. Para o nosso propósito, “Câmara (PTP)” é o tipo de ligação apropriado. Uma vez selecionado PTP, o “permitir depuração USB?”o popup deve subir.
para evitar ter que lidar com este popup toda vez que você conectar o seu dispositivo, verifique a opção “Sempre permitir a partir deste computador”. De qualquer forma, você vai querer clicar em “OK”, que permitirá que o seu dispositivo móvel seja visível para o seu computador para depuração., Neste momento, volte para a aba DevTools que vimos antes. Se tudo correu bem, devias ver o teu telemóvel e todas as suas páginas cromadas listadas agora.
depurar as páginas web em execução no Chrome no seu dispositivo
Agora é hora de parar de configurar e iniciar a depuração! Finalmente! O Chrome no seu computador deverá mostrar-lhe uma lista de páginas abertas no navegador Chrome no seu dispositivo remoto. Se a página que deseja depurar não for a página activa, poderá carregar na “página de foco” para a tornar a página activa no dispositivo. Em seguida, clique no link “inspecionar”.,
Isto irá trazer o inspector para essa página. A partir daqui, você pode usar as ferramentas de desenvolvimento do Chrome praticamente como você faria se você estivesse depurando uma página web no seu navegador de desktop. Você até é capaz de ver a tela do seu dispositivo dentro das ferramentas de desenvolvimento. Se não estiver já a mostrar, ou se quiser desligá-lo, carregue no ícone à direita ao lado do ícone inspector no canto superior esquerdo das ferramentas de desenvolvimento.
dicas de depuração
Pode também controlar o seu dispositivo a partir das suas ferramentas de desenvolvimento., Use o cursor do rato no ecrã como se o cursor fosse um dedo no próprio dispositivo.
- Clique para toque
- Clique e arraste para mover
- Use o roda de rolagem para rolar
- Segure
Shiftenquanto arrasta para cima para ampliar - Segure
Shiftenquanto arrasta para baixo para diminuir o zoom
Você pode notar que existem alguns transparente manchas na tela do elenco. Estes são elementos UI da aplicação Chrome ou da UI do sistema do seu dispositivo., Eles estão escondidos porque o protocolo de depuração remota só lhe permite interagir com a página web em si.
em dispositivos mais antigos e menos potentes, o elenco de tela usa muito do poder de processamento do seu dispositivo móvel. Você pode notar que o desempenho parece lento enquanto você é elenco de tela. Assim, se você está tentando medir o desempenho, desativar o elenco de tela e interagir diretamente com o dispositivo móvel.
finalmente, se você encontrar problemas em que nada acontece quando você interage com o seu dispositivo, tente fechar o aplicativo Chrome e reabri-lo., Terá de se ligar novamente ao dispositivo remoto através do ecrã DevTools nas Ferramentas de desenvolvimento. Se isso não ajudar, passe por esta lista de verificação rápida:
- desligue o dispositivo e ligue-o de volta para
- tranque o seu telemóvel e acorde-o de volta para
- feche a janela de ferramentas de desenvolvimento e reabra-a de novo.
Conclusion
Debugging mobile websites in Android Chrome doesn’t have to be difficult. Pode demorar um pouco mais do que a maioria de nós gostaria. Mas, uma vez que isso é resolvido, depurar uma página web móvel no dispositivo torna-se muito mais simples., Você pode agora depurar sites móveis Android em um dispositivo físico real.você passou muito tempo descobrindo seu bug em primeiro lugar? Raygun ajuda você a detectar, diagnosticar e destruir erros em seu código JavaScript ou Android. Alertas inteligentes e agrupamento de erros significa que nunca mais perde um erro na sua aplicação. Leia mais sobre o relatório de erros do Android e o relatório de erros do JavaScript.
mais sobre a depuração do Android
como arquitectar os seus erros para uma melhor comunicação de erros
comece com a depuração remota no Android