Como depurar páginas da Web no Chrome para Android no computador

Como administrador de um blog, eu depuro meu site pessoal usando o Chrome para ver como seriam as alterações no tema e CSS antes de implementá-las permanentemente no servidor. Não fazia muito tempo, nunca paguei atenção às páginas móveis pois poucos visitantes acessaram meu site usando um smartphone. Mas hoje, uma porcentagem significativa de visitantes é composta por smartphones e tablets e, portanto, tornou-se necessário cuidar da aparência e da apresentação também.

Se fosse uma página no computador, uma poderia ter sido facilmente depurada usando a opção do menu de contexto do botão direito do Chrome, mas essa não é a opção com as páginas no celular. Então, hoje vou mostrar como você pode depurar páginas da web para celular em seu computador usando o Chrome para Android e Android SDK.

Depurando a página da web

Passo 1: Baixar e instalar Android SDK no seu computador e execute-o. O instalador pedirá que você baixe o Java se não o tiver instalado.

Pela primeira vez, você executa o Android SDK em seu computador, ele solicitará que você baixe várias APIs e ferramentas. Se o seu único propósito de instalar o Android SDK é depurar as páginas, desmarque tudo, exceto

Ferramentas da plataforma Android SDK e clique no Pacote de instalação botão.

Passo 2: Depois de instalar as ferramentas da plataforma Android, abra o Run Box (Windows + R) e corra % userprofile% \ AppData \ Local \ Android \ android-sdk \ platform-tools para abrir o diretório de ferramentas da plataforma Android.

Etapa 3: Agora segure a tecla Ctrl + Shift e clique com o botão direito na pasta para abrir o prompt de comando lá. Você também pode abrir o prompt de comando usando a caixa Executar e navegar até a pasta manualmente.

Passo 4: Feito isso, abra o Chrome em seu telefone Android, abra Configurações—> Ferramentas do desenvolvedor e marque a opção Enable USB Web debugging.

Etapa 5: Agora, no prompt de comando, execute o comando adb forward tcp: 9222 localabstract: chrome_devtools_remote e abra o navegador Chrome no Windows na execução bem-sucedida.

Etapa 6: Abra a página que deseja depurar no navegador Chrome Android e abra o URL localhost: 9222 no navegador Chrome do seu computador.

Isso é tudo, você verá todas as páginas que estão abertas em seu navegador Android como miniaturas em seu computador. Para abrir a página de depuração, basta clicar na respectiva miniatura do site. Você será capaz de rastrear as alterações de depuração feitas em seu computador diretamente no Android em tempo real.

Conclusão

Tenho certeza de que esse truque ajudará muitos desenvolvedores da web a otimizar suas páginas da web para smartphones. Eu usei o truque para configurar minhas páginas da web e funcionou como um encanto. No entanto, se você souber de uma maneira melhor de depurar páginas da web de smartphones no computador, compartilhe-a conosco.