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 as alterações no tema e CSS seriam antes de implementá-las permanentemente no servidor. Não fui há muito tempo quando nunca prestei atenção às páginas para dispositivos móveis, pois poucos visitantes visitaram meu site usando um smartphone. Mas hoje em dia, uma porcentagem significativa de visitantes é composta de 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, alguém poderia facilmente depurar usando a opção do menu de contexto do botão direito do mouse, mas essa não é a opção das páginas no celular. Por isso, hoje mostrarei como você pode depurar páginas da Web para dispositivos móveis no seu computador usando o Google Chrome para Android e o Android SDK.

Depurando a página da Web

Etapa 1: faça o download e instale o Android SDK no seu computador e execute-o. O instalador pedirá que você baixe o Java se você não o tiver instalado.

Pela primeira vez que você executar o Android SDK no seu computador, ele solicitará que você baixe várias APIs e ferramentas. Se o seu único objetivo de instalar o SDK do Android for depurar as páginas, desmarque tudo, exceto as ferramentas da plataforma Android SDK e clique no botão Instalar pacote.

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

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

Etapa 4: depois de fazer isso, abra o Chrome no seu telefone Android, abra Configurações-> Ferramentas do desenvolvedor e marque a opção Ativar a depuração da Web via USB.

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

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

Isso é tudo, você verá todas as páginas que estão abertas no seu navegador Android como miniaturas no seu computador. Para abrir a página de depuração, basta clicar na miniatura do respectivo site. Você poderá acompanhar 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 charme. No entanto, se você souber de uma maneira melhor de depurar as páginas da Web do smartphone no computador, compartilhe-a conosco.