Como visualizar páginas da web como em um celular com o Google Chrome

O mercado de smartphones não para de crescer. Até mesmo o Google recompensa todas as páginas “amigáveis ​​à web” nos resultados de suas pesquisas. Por isso, cada vez mais sites são otimizados para abrir corretamente em todos os tipos de dispositivos móveis, mesmo deixando de lado as versões para desktop, ou limitando algumas funções ou algum conteúdo dentro deles. Navegadores da web, como Google cromo , detecte de onde estamos carregando um site (um PC, um celular, tablet, etc.) e solicite a versão correspondente do servidor. Mas, felizmente, é muito fácil enganar o servidor.

Quando usamos o navegador da web, costumamos estar acostumados a digitar uma URL nele, ou fazer uma consulta diretamente no mecanismo de busca, e aguardar os resultados. Mas nós realmente sabemos tudo o que acontece por baixo quando fazemos isso?

visualizar páginas da web como em um celular com o Google Chrome

O Chrome Developer Console

Todos os navegadores da web, especialmente o Chrome, têm todos os tipos de funções e ferramentas para todos os usuários. Um deles é o console de desenvolvimento . Como o próprio nome sugere, este é um console projetado para que os web designers possam ver como seu site funciona, saber em detalhes tudo o que acontece no frontend e testar diferentes alterações e ajustes na página “em tempo real”.

Podemos abrir este console a qualquer momento, simplesmente pressionando o Tecla F12 em nosso teclado. Também podemos abrir esse console clicando com o botão direito em qualquer lugar da página e escolhendo o ” Inspecionar ”Opção, ou com o atalho de teclado Controle + Deslocamento + I. Isso abrirá (por padrão, embora possamos alterá-lo) na parte direita da janela, e a partir daí poderemos ver um grande número de opções.

Google Chrome - Web como en el móvil 1

Nós vamos ser capaz de ver o HTML completo da página que abrimos, todos os elementos que a constituem, cada uma das ligações que se fazem com o servidor, o desempenho da página, a memória que consome… Absolutamente tudo o que se relaciona com a web.

Nós podemos adicionar elementos ao código , modifique qualquer ponto da página, elimine conteúdos que não nos interessem, veja erros, detecte possíveis gargalos ou problemas que possam afetar negativamente o SEO da web… as possibilidades são infinitas. Podemos até injetar código diretamente na página de seu console para ver como ele responde.

Claro, devemos ter em mente que as alterações que fazemos neste console são locais. Não estamos hackeando o site em questão, nem salvando nenhuma alteração. Para recarregar a página novamente, basta pressionar F5 para atualizá-la e ela retornará ao seu estado original.

Para fechar o console, podemos usar a tecla F12 novamente, ou simplesmente clicar no botão Fechar que encontramos na parte superior direita deste console de desenvolvimento.

Alterar o tipo de exibição de um site

Uma das ferramentas mais interessantes que podemos encontrar neste console de desenvolvimento é a possibilidade de alterar o tipo de dispositivo que simula o carregamento da página. Por padrão, o Chrome usará as propriedades do nosso PC (ou seja, indicar ao servidor que somos um computador e, dependendo da resolução e proporção da tela, mostrará a página correspondente) para exibir a página. Mas, se a web for responsiva, isso pode mudar.

Para fazer isso, o que faremos é abrir as ferramentas de desenvolvimento que acabamos de ver no ponto anterior, e veremos um pequeno ícone que aparece na parte superior esquerda dessa seção.

Google Chrome - Web como en el móvil 2

Este ícone nos permitirá alterar rapidamente o tipo de visualização do navegador da web. Assim que clicarmos nele poderemos ver como o tamanho da página muda , e a maneira como os elementos são carregados. Do contrário, talvez seja necessário pressionar F5 para recarregar.

Google Chrome - Web como en el móvil 3

No topo, podemos ver uma barra a partir da qual podemos alterar vários aspectos desta visualização móvel. Por exemplo, podemos simular como a web ficaria em um dispositivo específico ou ajuste os níveis de zoom. Também podemos especificar manualmente as dimensões da tela, em pixels, se nenhuma das opções que vêm por padrão se adaptar ao que estamos procurando.

Google Chrome - Web como en el móvil 4

Um botão muito interessante que também podemos encontrar é o que nos permite girar a tela do computador. Assim, podemos ver como a web ficaria quando os usuários a jogassem no modo paisagem.

Google Chrome - Web como en el móvil 5

Quando tivermos feito os testes que queremos, podemos simplesmente sair desse modo fechando o console do desenvolvedor. Novamente, podemos precisar atualizar a página para que ela seja exibida corretamente novamente.

Extensões do Chrome

Além de usar o console do desenvolvedor, também poderemos fazer isso usando algumas extensões que podemos encontrar totalmente gratuitas na Chrome Store. Alguns dos melhores são os seguintes:

Comutador de visualização móvel

Esta extensão nos permite alternar entre a visualização normal e a visualização móvel com um clique. Ao instalá-lo, ele cria um ícone na barra de ferramentas, que atua como um switch dependendo se queremos ativá-lo ou desativá-lo. Por padrão, ele simula um iOS 14 sistema, mas podemos modificá-lo e ajustar a extensão ao nosso gosto.


Visualizador responsivo

Outra ferramenta muito útil para os desenvolvedores verificarem o funcionamento de seus sites responsivos. Isso nos permite ver várias telas, de tamanhos diferentes, ao mesmo tempo. Desta forma podemos ter várias configurações em vista e verificar se tudo parece correto e não dá problemas em nenhum tipo de dispositivo.


Simulador de celular para Chrome

Esta ferramenta nos permite simular um grande número de dispositivos reais (5 Android modelos, 15 Apple, 4 tablets e 4 dispositivos especiais) para poder ver como as páginas aparecem dependendo do CSS que está sendo solicitado de acordo com o tamanho da tela de cada um.


Testador de Web Design Responsivo

Finalmente, esta extensão, embora menos conhecida, nos permite testar exaustivamente como as visualizações responsivas de um site funcionam com base em vários parâmetros diferentes. Ele nos permite testar vários celulares, incluindo por padrão as resoluções e proporções mais comuns. Além disso, esta extensão envia o Agente do Usuário apropriado para o servidor para que os resultados sejam mais precisos. Funciona até offline, algo que nem todas as extensões fazem.