Como visualizar seu site em diferentes dispositivos usando o Google Chrome

Quando você cria um site, deseja que ele seja responsivo e se adapte a diferentes tamanhos de tela. Uma maneira de testar isso é usando as ferramentas de desenvolvedor integradas do Google Chrome.

O DevTools do Chrome permite depurar diferentes aspectos do seu site. Isso inclui alterar e visualizar o código-fonte HTML e CSS. Ele também permite que você depure o código JavaScript do lado do cliente e visualize o tráfego de rede.

O DevTools também tem a opção de visualizar seu site em diferentes dispositivos. Isso inclui diferentes tipos de dispositivos móveis, iPads, tablets e muito mais.

Para abrir a barra de ferramentas do dispositivo no Google Chrome, você precisa abrir o Janela das Ferramentas do desenvolvedor do Chrome:

1. Abra um site.
2. Clique com o botão direito do mouse na página e clique em Inspecionar.
3. A janela Chrome DevTools será aberta. Ele pode abrir na lateral ou na parte inferior do seu navegador, ou como uma nova janela.
4. No canto superior esquerdo da janela, há dois ícones. Clique no ícone que mostra vários dispositivos de tamanhos diferentes.
instagram viewer
5. A tela mudará para mostrar a aparência do site em um dispositivo móvel.

Como alternar entre dispositivos diferentes

Use o menu suspenso na parte superior da barra de ferramentas do dispositivo para alternar entre diferentes dispositivos.

1. A parte superior da barra de ferramentas exibirá o tipo de dispositivo em que você está visualizando seu site. Clique no menu suspenso para escolher outro dispositivo da lista.
2. Em vez de escolher um dispositivo existente, você pode optar por visualizar o site no modo responsivo. Clique no menu suspenso e selecione o Responsivo opção.
3. Ao lado da lista suspensa, você também pode optar por inserir uma largura e altura personalizadas de um dispositivo.
4. Em vez de digitar uma largura e uma altura, você também pode clicar e arrastar os cantos da janela para ajustar o tamanho.

Como adicionar um dispositivo personalizado

Se desejar salvar uma largura e altura personalizadas, você pode adicionar um dispositivo personalizado. A barra de ferramentas do dispositivo exibirá seu novo dispositivo na lista suspensa de dispositivos.

1. Clique no menu suspenso que lista todos os dispositivos.
2. Clique em Editar.
3. Na barra lateral Configurações, verifique se você tem o Dispositivos guia selecionada. Aqui, você também pode ver uma lista de mais dispositivos que você pode escolher.
4. Clique em Adicionar dispositivo personalizado.
5. Insira um nome, largura e altura para o dispositivo. Certifique-se de selecionar também o tipo de dispositivo, como se é um dispositivo móvel ou desktop. Se você expandir o Dicas do cliente do agente do usuário opção, você pode adicionar outros detalhes, como modelo, marca ou versão do dispositivo.
6. Clique em Adicionar.
7. Volte para o menu suspenso que lista todos os dispositivos. Você verá seu novo dispositivo personalizado na lista.
8. Você pode editar esses detalhes novamente mais tarde, voltando para a página do dispositivo personalizado. Clique no editar botão ao lado do nome do seu dispositivo para começar a editar.

É muito útil poder visualizar seu site em diferentes dispositivos e tamanhos de tela, por vários motivos.

Em primeiro lugar, você pode testar o desempenho do seu site em diferentes dispositivos. Alguns celulares podem ter velocidades de rede mais rápidas ou aceleração da CPU do que outros.

A barra de ferramentas do dispositivo permite alternar entre diferentes opções de velocidade de rede. Isso permite que você teste a velocidade de qualquer chamada para um servidor ou teste o carregamento e a renderização de dados em seu site.

Além disso, você também pode visualizar a aparência do design em um dispositivo específico, do ponto de vista da interface do usuário. Se você estiver usando consultas de mídia CSS, você pode usar essa ferramenta para verificar se eles estão funcionando conforme o esperado.

Você pode usar a janela DevTools do Google Chrome para testar como seu site se adapta a diferentes tamanhos de tela e garantir que seu site seja responsivo. Você também pode usá-lo para testar o desempenho do seu site e se suas consultas de mídia estão funcionando conforme o esperado.

Você também pode usar o DevTools do Google Chrome para outros fins. Você pode usá-lo para depurar quaisquer problemas de CSS alterando o CSS na guia Estilos da janela Elemento. Isso permite que você visualize todas as alterações de CSS imediatamente, o que pode acelerar seu fluxo de trabalho de codificação.

Como usar o Google Chrome para depurar CSS

Leia a seguir