O que poucos usuários sabem é que atualmente existe a possibilidade de acessar sites no formato tela de celular no computador usando o navegador Chrome. O recurso é bastante interessante para quem precisa visualizar como fica uma página no computador ou usar alguma função exclusiva.

O Olhar Digital trouxe informações relevantes sobre o assunto e um passo a passo de como usar o modo celular no PC.

Leia mais:

Chrome e o recurso de teste

O navegador do Google conta com esse recurso para desenvolvedores permitindo emular a resolução e identificação (User Agent) dos principais dispositivos móveis do mercado.

Como acessar o modo celular no PC usando o Chrome

Tempo necessário: 2 minutos

A seguir, veja como acessar o modo celular no PC pelo Google Chrome:

Iniciando o processo
A princípio o usuário deve acessar o menu do Chrome. Em seguida precisa clicar em ‘Mais ferramentas’ e em segundo lugar clicar em ‘Ferramentas do desenvolvedor’. Vale ressaltar que existem também a possibilidade de usar o atalho ‘Ctrl + Shift + i’;
Acessando as funções
Assim sendo, após seguir os passos logo acima, o usuário precisa clicar acessar o painel à direita, e depois clicar sobre o ícone do celular também à direita da lupa. Em seguida é possível selecionar a tecla ‘F12’ para acessar essa função de forma mais ágil;

Em suma, após seguir esses passos o usuário poderá experimentar diversos modelos de tela disponíveis para verificar no caso de ser um profissional da programação como um site se comporta quanto a sua usabilidade.

Casos de uso do modo desenvolvedor

As ferramentas para desenvolvedores do Google Chrome permitem ao usuário analisar de forma ágil o conteúdo ou recurso de uma página da Web.

Guia elements:

Nessa ferramenta, o navegador exibe o HTML processado da página, que difere do código-fonte da página. Assim sendo, se elementos HTML forem criados ou alterados como JavaScript conforme a página for carregada, essas mudanças serão refletidas no HTML processado, enquanto o código-fonte da página exibirá o código sem alterações.

Guia de Resources:

Essa função possibilita a inspeção de uma tabela de diferentes recursos que foram carregados juntamente com a página inspecionada. Isso inclui imagens, documentos HTML, arquivos JavaScript e muito mais.

Guia de Rede:

Por meio dessa guia é possível que usuário monitore o tráfego de HTTP da página, conforme o carregamento e depois que ele ocorre.

Guia Cronograma:

Com ela o usuário pode acompanhar o tráfego HTTP e o uso de memória ao longo do tempo. De modo semelhante à de rede, pode ser útil para identificar fontes de latência.

Guia perfis:

É uma ferramenta que os desenvolvedores de Web podem usar para otimizar o uso de CPU em aplicações para Web.

Guia auditorias:

Nessa guia o usuário pode analisar uma página enquanto ela carrega e exibi sugestões e otimizações para a diminuição do tempo de carregamento da página, aumentando a percepção de resposta e a resposta real.

Guia console:

Por meio dessa ferramenta o usuário consegue detectar erros no código da página de forma automática.

Já assistiu aos novos vídeos no YouTube do Olhar Digital? Inscreva-se no canal!