Simular dispositivos móveis com o modo dispositivo

Use o modo de dispositivo para aproximar a aparência e o desempenho da sua página em um dispositivo móvel.

Visão geral

O modo dispositivo é o nome de um conjunto de recursos no Chrome DevTools que ajudam a simular dispositivos móveis. Confira os recursos:

• Simular uma janela de visualização para dispositivos móveis
• Limitação da CPU
• Otimização da rede
• Além disso, no painel Sensores:
  • Simulação de geolocalização
  • Definir orientação

Limitações

Pense no modo dispositivo como uma aproximação de primeira ordem de como sua página aparece e funciona em um dispositivo móvel. No modo dispositivo, você não executa o código em um dispositivo móvel. Você simula a experiência do usuário em dispositivos móveis no seu laptop ou computador.

Há alguns aspectos dos dispositivos móveis que o DevTools nunca poderá simular. Por exemplo, a arquitetura das CPUs de dispositivos móveis é muito diferente da arquitetura das CPUs de laptops ou computadores. Em caso de dúvida, a melhor opção é executar a página em um dispositivo móvel. Use a depuração remota para ver, mudar, depurar e criar um perfil do código de uma página no seu laptop ou computador enquanto ele é executado em um dispositivo móvel.

Abrir a barra de ferramentas do dispositivo

Para abrir a barra de ferramentas do dispositivo, siga estas etapas:

1. Abra o DevTools.
2. Clique em dispositivos Alternar barra de ferramentas do dispositivo, localizada na barra de ações na parte de cima.

Simular uma janela de visualização para dispositivos móveis

Por padrão, a barra de ferramentas do dispositivo é aberta na janela de visualização com Dimensões definido como Responsivo. Usando o menu suspenso Dimensões, você pode simular as dimensões de um dispositivo móvel específico.

Modo de janela de visualização responsiva

Arraste as alças para redimensionar a janela de visualização para as dimensões necessárias. Ou insira valores específicos nas caixas de largura e altura. Neste exemplo, a largura está definida como 480 e a altura como 415.

Como alternativa, use a barra de predefinições de largura para definir a largura com um clique em uma das seguintes opções:

Dispositivo móvel P	Dispositivo móvel M	Dispositivo móvel G	Tablet	Laptop	Laptop G	4K
320px	375px	425px	768px	1024px	1440px	2560px

Mostrar consultas de mídia

Para mostrar os pontos de interrupção de consultas de mídia acima da sua janela de visualização, clique em Mais opções > Mostrar consultas de mídia.

Agora, o DevTools mostra duas barras adicionais acima da janela de visualização:

• A barra azul com max-width pontos de interrupção.
• A barra laranja com min-width pontos de interrupção.

Clique entre os pontos de interrupção para mudar a largura da janela de visualização e acionar o ponto de interrupção.

Para encontrar a declaração @media correspondente, clique com o botão direito do mouse entre os pontos de interrupção e selecione Mostrar no código-fonte. O DevTools abre o painel Fontes na linha correspondente do Editor.

Definir proporção de pixels do dispositivo

A proporção de pixels do dispositivo (DPR) é a proporção entre pixels físicos na tela do hardware e pixels lógicos (CSS). Em outras palavras, o DPR informa ao Chrome quantos pixels da tela usar para desenhar um pixel CSS. O Chrome usa o valor de DPR ao desenhar em telas HiDPI (alta resolução).

Para definir um valor de DPR:

1. Clique em Mais opções > Adicionar proporção de pixels do dispositivo.

   

2. Na barra de ações na parte de cima da janela de visualização, selecione um valor de DPR no novo menu suspenso DPR.

   

Definir o tipo de dispositivo

Use a lista Tipo de dispositivo para simular um dispositivo móvel ou um computador.

Se a lista não aparecer na barra de ações na parte de cima, selecione Mais opções > Adicionar tipo de dispositivo.

A próxima tabela descreve as diferenças entre as opções. O método de renderização se refere a se o Chrome renderiza a página como uma janela de visualização para dispositivos móveis ou computadores. O ícone do cursor se refere ao tipo de cursor que aparece quando você passa o mouse sobre a página. Eventos acionados se refere a se a página aciona eventos touch ou click quando você interage com ela.

Opção	Método de renderização	Ícone de cursor	Eventos acionados
Dispositivo móvel	Dispositivo móvel	Círculo	tocar
Dispositivo móvel (sem toque)	Dispositivo móvel	Normal	clique
Computador	Computador	Normal	clique
Computador (touch)	Computador	Círculo	tocar

Modo específico do dispositivo

Para simular as dimensões de um dispositivo móvel específico, selecione o dispositivo na lista Dimensões.

Para mais informações, consulte Adicionar um dispositivo móvel personalizado.

Gire a janela de visualização para a orientação paisagem

Clique em screen_rotation Girar para girar a janela de visualização para a orientação paisagem.

O botão Girar desaparece se a barra de ferramentas do dispositivo estiver estreita.

Consulte também Definir orientação.

Alternar para o modo Dual Screen

Alguns dispositivos, como o Surface Duo, têm duas telas e duas maneiras de usá-las: com uma ou as duas telas ativas.

Para alternar entre tela única e dupla, clique em devices_fold Alternar para o modo de tela dupla na barra de ferramentas.

Definir posição do dispositivo

Alguns dispositivos, como o Asus Zenbook Fold, têm telas dobráveis. Essas telas têm uma postura: contínua ou dobrada. A postura contínua se refere a uma posição "plana", e a dobrada forma um ângulo entre as seções da tela.

Para definir a postura do dispositivo, selecione Contínua ou Dobrada no menu suspenso correspondente na barra de ferramentas.

Mostrar frame do dispositivo

Ao simular as dimensões de um dispositivo físico específico, como um Nest Hub, selecione Mais opções > Mostrar frame do dispositivo para mostrar o frame físico do dispositivo ao redor da janela de visualização.

Neste exemplo, o DevTools mostra o frame do Nest Hub.

Adicionar um dispositivo móvel personalizado

Para adicionar um dispositivo personalizado:

1. Clique na lista Dispositivo e selecione Editar.

   

2. Na guia Configurações configurações > Dispositivos, escolha um dispositivo na lista de compatíveis ou clique em Adicionar dispositivo personalizado para adicionar o seu.

3. Se você estiver adicionando um dispositivo próprio, insira um nome, uma largura e uma altura para ele e clique em Adicionar.

   

   Os campos proporção de pixels do dispositivo, string do user agent e tipo de dispositivo são opcionais. O campo "Tipo de dispositivo" é a lista definida como Dispositivo móvel por padrão.

4. De volta à janela de visualização, selecione o dispositivo recém-adicionado na lista Dimensões.

Exibir regras

Clique em Mais opções > Mostrar réguas. A unidade de dimensionamento das réguas é pixels.

As DevTools mostram réguas na parte de cima e à esquerda da janela de visualização.

Clique nas réguas em marcações específicas para definir a largura e a altura da janela de visualização.

Ampliar a janela de visualização

Use a lista Zoom para aumentar ou diminuir o zoom.

Fazer uma captura de tela

Para capturar uma captura de tela do que você vê na janela de visualização, clique em Mais opções > Capturar tela.

Para capturar uma captura de tela da página inteira, incluindo o conteúdo que não está visível na janela de visualização, selecione Fazer uma captura de tela da página inteira no mesmo menu.

Para incluir um frame de dispositivo ao capturar uma captura de tela no modo específico do dispositivo, primeiro clique em Mostrar frame do dispositivo e depois em Capturar tela, conforme indicado anteriormente.

Para saber outras maneiras de fazer capturas de tela com o DevTools, consulte Quatro maneiras de fazer capturas de tela com o DevTools.

Limitar a rede e a CPU

Para limitar a rede e a CPU, selecione Dispositivo móvel intermediário ou Dispositivo móvel de baixo custo na lista Limitação.

Dispositivo móvel de nível médio simula 3G rápido e limita a CPU para que ela seja quatro vezes mais lenta do que o normal. O dispositivo móvel de baixo custo simula uma conexão 3G lenta e reduz a velocidade da CPU em seis vezes. Lembre-se de que a limitação é relativa à capacidade normal do seu laptop ou computador.

A lista Limitar fica oculta se a barra de ferramentas do dispositivo estiver estreita.

Limitar apenas a CPU

Para limitar apenas a CPU e não a rede, acesse o painel Performance, clique em Configurações de captura e selecione Redução de velocidade em 4 vezes, Redução de velocidade em 6 vezes ou Redução de velocidade em 20 vezes na lista CPU.

Limitar apenas a rede

Para limitar apenas a rede e não a CPU, acesse o painel Rede e selecione 3G rápido ou 3G lento na lista Limitar.

Ou pressione Command+Shift+P (Mac) ou Control+Shift+P (Windows, Linux, ChromeOS) para abrir o menu de comandos, digite 3G e selecione Ativar limitação rápida de 3G ou Ativar limitação lenta de 3G.

Também é possível definir a limitação de rede no painel Performance. Clique em Configurações de captura e selecione 3G rápido ou 3G lento na lista Rede.

Emular sensores

Use o painel Sensores para substituir a geolocalização, simular a orientação do dispositivo, forçar o toque e emular o estado inativo.

As próximas seções mostram rapidamente como substituir a geolocalização e definir a orientação do dispositivo. Para uma lista completa de recursos, consulte Emular sensores do dispositivo.

Substituir geolocalização

Para abrir a interface de substituição de geolocalização, clique em Personalizar e controlar o DevTools e selecione Mais ferramentas > Sensores.

Ou pressione Command+Shift+P (Mac) ou Control+Shift+P (Windows, Linux, ChromeOS) para abrir o menu de comandos, digite Sensors e selecione Mostrar sensores.

Selecione uma das predefinições na lista Localização ou Outro… para inserir suas próprias coordenadas. Também é possível selecionar Localização indisponível para testar o comportamento da página quando a geolocalização está em um estado de erro.

Definir orientação

Para abrir a interface de orientação, clique em Personalizar e controlar o DevTools e selecione Mais ferramentas > Sensores.

Ou pressione Command+Shift+P (Mac) ou Control+Shift+P (Windows, Linux, ChromeOS) para abrir o menu de comandos, digite Sensors e selecione Mostrar sensores.

Selecione uma das predefinições na lista Orientação ou escolha Orientação personalizada para definir seus próprios valores alfa, beta e gama.