Simular dispositivos móveis com o modo dispositivo

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Use o modo de dispositivo para ter uma ideia de como a página fica e funciona em um dispositivo móvel.

Visão geral

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

Limitações

Pense no modo de dispositivo como uma aproximação de primeira ordem da aparência e da sensação da sua página em um dispositivo móvel. Com o modo de 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 de dispositivos móveis que as ferramentas do desenvolvedor nunca vão conseguir simular. Por exemplo, a arquitetura de CPUs para dispositivos móveis é muito diferente da arquitetura de CPUs para laptops ou computadores. Em caso de dúvida, o melhor é executar a página em um dispositivo móvel. Use a Depuração remota para conferir, mudar, depurar e criar o perfil do código de uma página no 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 Toggle device toolbar na barra de ações na parte de cima.

Botão de ativação da barra de ferramentas do dispositivo

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 definidas como Responsivo. Usando o menu suspenso Dimensões, você pode simular as dimensões de um dispositivo móvel específico.

A barra de ferramentas do dispositivo.

Modo de janela de visualização responsiva

Arraste as alças para redimensionar a janela de visualização de acordo com 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.

Alças para mudar as dimensões da janela de visualização quando estiver no modo de janela de visualização responsiva.

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

Barra de predefinições de largura.

Dispositivo móvel S Dispositivo móvel M Dispositivo móvel L Tablet Laptop Laptop G 4K
320px 375px 425 pixels 768px 1.024 px 1440 pixels 2560 pixels

Mostrar consultas de mídia

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

Mostrar consultas de mídia.

Agora, as Ferramentas do desenvolvedor mostram duas barras adicionais acima da viewport:

  • 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.

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

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

Revelar no menu suspenso do código-fonte.

Definir a proporção de pixels do dispositivo

A proporção de pixels do dispositivo (DPR, na sigla em inglês) é a proporção entre os pixels físicos na tela do hardware e os 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 densidade de pixels por polegada).

Para definir um valor de DPR:

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

    Adicionar proporção de pixels do dispositivo.

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

    Como definir o valor de DPR.

Definir o tipo de dispositivo

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

A lista "Tipo de dispositivo".

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

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

OpçãoMétodo de renderizaçãoÍcone do cursorEventos acionados
Dispositivo móvelDispositivo móvelCírculotocar
Dispositivo móvel (sem toque)Dispositivo móvelNormalclique
ComputadorComputadorNormalclique
Computador (toque)ComputadorCírculotocar

Modo específico do dispositivo

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

A lista "Dimensões".

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

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

Clique em Rotate para girar a viewport para a orientação paisagem.

Orientação paisagem.

O botão Girar Girar. desaparece se a Barra de ferramentas do dispositivo for estreita.

A barra de ferramentas do dispositivo.

Consulte também Definir a 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 ambas as telas ativas.

Para alternar entre tela dupla e única, clique em Toggle dual-screen mode na barra de ferramentas.

O modo de tela dupla está ativado.

Definir a 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 dobrada forma um ângulo entre as seções da tela.

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

Postura definida como dobrada.

Mostrar frame do dispositivo

Ao simular as dimensões de um dispositivo móvel específico, como um Nest Hub, selecione Mais opções Mais opções. > Mostrar moldura do dispositivo para mostrar a moldura física do dispositivo ao redor da viewport.

Mostrar o frame do dispositivo.

Neste exemplo, as Ferramentas do desenvolvedor mostram o frame do Nest Hub.

O frame do dispositivo para o Nest Hub.

Adicionar um dispositivo móvel personalizado

Para adicionar um dispositivo personalizado:

  1. Clique na lista Device e selecione Edit.

    Editar.

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

  3. Se você estiver adicionando o seu, insira um nome, largura e altura para o dispositivo e clique em Adicionar.

    Criação de um dispositivo personalizado.

    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 Móvel por padrão.

  4. Na viewport, selecione o dispositivo recém-adicionado na lista Dimensões.

Exibir regras

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

Mostrar réguas.

As Ferramentas do desenvolvedor mostram réguas na parte de cima e à esquerda da viewport.

Réguas acima e à esquerda da janela de visualização.

Clique nas réguas em marcas 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.

Zoom.

Fazer uma captura de tela

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

A opção "Capturar tela" no menu "Mais opções".

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

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

Captura de tela com uma moldura de dispositivo incluída.

Para saber como 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 de nível médio ou Dispositivo móvel de baixo nível na lista Limitação.

A lista de limitação.

Dispositivo móvel de nível intermediário simula uma conexão 3G rápida 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 limita a CPU seis vezes mais do que o normal. Lembre-se de que o limite é relativo à capacidade normal do seu laptop ou computador.

A lista Throttle será oculta se a Barra de ferramentas do dispositivo for 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 Configurações de captura. e selecione 4x desaceleração, 6x desaceleração ou 20x desaceleração na lista CPU.

A lista de CPUs.

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 Limite.

A lista de limitação.

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

O Command Menu.

Também é possível definir o limite de rede no painel Performance. Clique em Capture Settings Configurações de captura. e selecione Fast 3G ou Slow 3G na lista Network.

Como definir a limitação de rede no painel "Performance".

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 conferir uma lista completa de recursos, consulte Emuladores de sensores de dispositivo.

Substituir a geolocalização

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

Sensores

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

Mostrar sensores

Selecione uma das predefinições na lista Local ou selecione Outro... para inserir suas próprias coordenadas ou Local indisponível para testar como a página se comporta quando a geolocalização está em um estado de erro.

Geolocalização

Definir orientação

Para abrir a interface de orientação, clique em Personalizar e controlar as Ferramentas do desenvolvedor Personalize e controle as DevTools. e selecione Mais ferramentas > Sensores.

Sensores

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

Mostrar sensores

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

Orientação