Emular dispositivos móveis (Emulação do dispositivo)

Use a ferramenta Emulação de Dispositivo , às vezes chamada de Modo de Dispositivo, para aproximar a aparência e o comportamento da sua página em um dispositivo móvel.

A Emulação de Dispositivo é uma aproximação de primeira ordem da aparência da sua página em um dispositivo móvel. Na verdade, a emulação de dispositivo não executa seu código em um dispositivo móvel. Em vez disso, você simula a experiência do usuário móvel em seu laptop ou desktop.

Alguns aspectos dos dispositivos móveis não são emulados no DevTools. Por exemplo, a arquitetura de CPUs móveis é diferente da arquitetura de CPUs de laptop ou desktop. Para obter os testes mais robustos, execute sua página em um dispositivo móvel.

Use a Depuração Remota para interagir com o código de uma página do seu computador enquanto sua página realmente é executada em um dispositivo móvel. Você pode exibir, alterar, depurar, criar perfil ou todos os quatro enquanto interage com o código. Seu computador pode ser um notebook ou um computador desktop.

Conteúdo detalhado:

• Simular uma janela de visualização móvel
  • Modo de visor responsivo
  • Mostrar consultas de mídia
  • Definir a proporção de pixels do dispositivo
  • Defina o tipo de dispositivo
  • Modo de visor de dispositivo móvel
  • Girar a viewport para a orientação paisagem
  • Alternar o modo de tela dupla
  • Definir postura do dispositivo
  • Mostrar quadro do dispositivo
  • Adicionar um dispositivo móvel personalizado
  • Mostrar réguas
  • Ampliar a viewport
  • Captura de tela
• Controlar a rede e a CPU
  • As guias Rede e Desempenho têm ícone de aviso quando limitadas
  • Limitar apenas a CPU
  • Limitar somente a rede
• Emular sensores
  • Substituir geolocalização
  • Definir orientação
• Definir a cadeia de caracteres do agente do usuário
• Definir dicas de cliente agente de usuário

Simular uma janela de visualização móvel

Para abrir a interface do usuário que permite simular uma viewport móvel:

1. Abra o DevTools. Por exemplo, clique com o botão direito do mouse em uma página da Web e selecione Inspecionar.

2. Na Barra de Atividades, clique no botão Alternar emulação do dispositivo (). Ou, no DevTools, selecione Personalizar e controlar o DevTools (...) >Emulação do dispositivo:

   

   A página da Web é renderizada no painel Emulação do Dispositivo. A barra de ferramentas do dispositivo é aberta no modo de viewport responsivo.

Modo de visor responsivo

Para testar rapidamente a aparência da sua página em vários tamanhos de tela, arraste as alças para redimensionar o visor para as dimensões necessárias. Você pode inserir quaisquer valores numéricos nas caixas de largura e altura. Se você selecionar um tamanho maior do que o disponível na janela do navegador, a viewport será dimensionada automaticamente para acomodar a viewport maior.

No exemplo a seguir, a largura do visor é definida como 400 e a altura é definida como 736:

Se precisar de mais espaço na tela, você poderá alterar o local onde o DevTools está encaixado na janela do navegador. Consulte Alterar o posicionamento do DevTools (Desencaixar, Encaixar na parte inferior, Encaixar à esquerda).

Mostrar consultas de mídia

Se você definiu consultas de mídia em sua página, vá para as dimensões do visor em que essas consultas de mídia entram em vigor, mostrando os pontos de interrupção de consulta de mídia acima do visor. Selecione Mais opções () >Mostrar consultas de mídia.

Uma consulta de mídia CSS define um ponto de interrupção, que é a largura do visor do navegador. Uma página da Web pode definir um layout responsivo para cada ponto de interrupção (largura do visor de visão) definido pelo CSS da página da Web.

As consultas de mídia podem ser usadas para alterar o layout de uma página quando o visor do dispositivo em que a página da Web é exibida está acima ou abaixo de uma determinada largura. As consultas de mídia permitem que você escreva código para usar no layout da página quando a largura da tela estiver abaixo de um determinado tamanho, ou acima de um determinado tamanho, ou dentro de um mínimo e tamanho máximo.

Para mostrar os pontos de interrupção de consulta de mídia acima do visor:

1. Clique no botão Mais opções () e selecione Mostrar consultas de mídia:

   

   Se max-width os min-width pontos de interrupção forem definidos pela página da Web, o DevTools exibirá barras adicionais acima do visor:

   • A barra azul corresponde às max-width consultas da mídia.
   • A barra verde corresponde às consultas de mídia que usam e min-widthmax-width.
   • A barra laranja corresponde às consultas da min-width mídia.

   

2. Para alterar a largura do visor para que a consulta de mídia para esse ponto de interrupção seja usada, clique em um retângulo de ponto de interrupção na barra de pontos de interrupção. A largura do visor é alterada para que o ponto de interrupção seja disparado e o layout da página da Web seja atualizado.

3. Para ir para a declaração correspondente @media no código da página da Web, clique com o botão direito do mouse entre as barras verticais do ponto de interrupção e selecione Revelar no código-fonte. O DevTools abre a ferramenta Fontes e exibe a linha correspondente @media no Editor.

Consulte também:

• Depurar consultas de mídia em Introdução à exibição e alteração do CSS.

Definir a proporção de pixels do dispositivo

A taxa de pixel 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 navegador quantos pixels de tela usar para desenhar um pixel CSS. O Microsoft Edge usa o valor DPR ao desenhar em telas HiDPI (High Dots Per Inch).

Para definir uma taxa de proporção de pixels do dispositivo:

1. Selecione Mais opções () >Adicionar taxa de proporção de pixels do dispositivo:

   

   Uma lista suspensa DPR é adicionada na parte superior da janela de exibição.

2. Na lista suspensa DPR , selecione um valor DPR (1, 2 ou 3). O valor padrão é 2.

Para remover a taxa de proporção de pixels do dispositivo:

• Selecione Mais opções (>Remova a taxa de proporção de pixels do dispositivo.

Defina o tipo de dispositivo

Para simular um dispositivo móvel ou desktop, use a lista de tipos de dispositivo :

Se a lista Tipo de Dispositivo não for exibida, selecione Mais opções>Adicionar tipo de dispositivo.

A lista de tipos de dispositivo contém os seguintes tipos de dispositivo:

Chave para colunas na tabela acima:

Modo de visor de dispositivo móvel

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

Girar a viewport para a orientação paisagem

Teste sua página da Web na orientação paisagem.

1. Para girar a viewport para a orientação paisagem, selecione Girar ():

   

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

Consulte também Definir orientação, abaixo.

Alternar o modo de tela dupla

Alguns dispositivos têm duas telas e duas maneiras de usá-los: com uma ou ambas as telas ativas.

Para alternar entre tela dupla e única, clique no botão Alternar modo de tela dupla na barra de ferramentas.

Definir postura do dispositivo

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

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

Mostrar quadro do dispositivo

Para simular as dimensões de um dispositivo móvel específico, clique em Mais opções ( e selecione Mostrar quadro do dispositivo para mostrar o quadro do dispositivo físico ao redor da janela de exibição:

Se um quadro de dispositivo não for mostrado para um dispositivo específico, isso significa que o DevTools não tem arte para esse dispositivo.

A moldura do dispositivo para o iPhone 6/7/8:

Adicionar um dispositivo móvel personalizado

Se a opção de dispositivo móvel necessária não estiver incluída na lista padrão, você poderá adicionar um dispositivo personalizado.

Para adicionar um dispositivo personalizado:

1. No DevTools, clique no botão Alternar emulação de dispositivo () para ativar a emulação do dispositivo.

2. Na lista suspensa de dispositivos à esquerda, selecione o item de menu Editar :

3. Selecione a lista >de dispositivosEditar:

   

   A página Dispositivos de Configurações> do DevTools (Dispositivos Emulados) é aberta.

4. Clique no botão Adicionar dispositivo personalizado . A página Dispositivos Emulados nas configurações adiciona uma seção Dispositivo na parte superior:

   Os campos de proporção de pixels do dispositivo, cadeia de caracteres do agente do usuário e tipo de dispositivo são opcionais. O tipo de dispositivo padrão é Móvel:

   

5. Na seção Dispositivo , nas caixas de texto, insira um nome de dispositivo, largura e altura de tela para o dispositivo personalizado.

6. Opcionalmente, preencha os seguintes campos:

   • Taxa de proporção de pixels do dispositivo. Consulte Definir proporção de pixels do dispositivo, acima; e Window: devicePixelRatio propriedade, no MDN.

   • Cadeia de caracteres do agente do usuário. Consulte Definir a cadeia de caracteres do agente do usuário, abaixo; e Agente do usuário, no MDN.

   • Tipo de agente do usuário (tipo de dispositivo). Consulte Definir o tipo de dispositivo, acima. O padrão é Móvel.

7. Clique no botão Adicionar . O novo dispositivo agora está disponível na lista suspensa de dispositivos no canto superior esquerdo do emulador de dispositivos.

Para remover um dispositivo personalizado:

• Em Dispositivos de Configurações> doDevTools> (Dispositivos Emulados), passe o mouse sobre o nome do dispositivo personalizado e clique no ícone da lixeira.

Mostrar réguas

Se precisar medir as dimensões da tela, você poderá usar réguas para medir o tamanho da tela em pixels.

Para exibir as réguas acima e à esquerda da viewport:

• Selecione Mais opções () >Mostrar réguas:

  

  As réguas aparecem acima e à esquerda da viewport, indicando dimensões em pixels:

  

Ampliar a viewport

Para testar a aparência da sua página em vários níveis de zoom, use a lista Zoom para aumentar ou diminuir o zoom.

Captura de tela

Para obter uma captura de tela do que você vê atualmente na viewport, clique em Mais opções () >Captura de tela:

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

Controlar a rede e a CPU

Os dispositivos móveis geralmente têm restrições de rede e CPU.

Para testar a velocidade com que sua página é carregada e como ela responde em diferentes velocidades de Internet e CPU:

• Na lista Acelerador , altere a predefinição para Móvel de nível médio ou Móvel de baixo custo:

  

  Se a lista de Limitação estiver oculta, amplie a Barra de Ferramentas do Dispositivo.

• O celular intermediário simula a aceleração da CPU em 4x e a aceleração da rede no 4G lento. É quatro vezes mais lento que o normal.

• O celular de baixo custo simula a desaceleração da CPU de 6x e a aceleração da rede do 3G. É seis vezes mais lento que o normal.

Toda a limitação é baseada na capacidade normal do seu laptop ou desktop.

As guias Rede e Desempenho têm ícone de aviso quando limitadas

Quando a limitação está habilitada na Emulação do Dispositivo, um ícone de aviso é exibido nas guias da ferramenta Rede e Desempenho na Barra de Atividades, para ajudá-lo a saber que o desempenho é afetado pela limitação:

Limitar apenas a CPU

Para limitar apenas a CPU, e não a rede:

1. No DevTools, selecione a ferramenta Desempenho .

2. Clique no botão Configurações de Captura () no canto superior direito.

3. Na lista suspensa CPU , selecione 4x desaceleração ou 6x desaceleração:

   

Limitar somente a rede

Para limitar apenas a rede e não a CPU:

1. Selecione a ferramenta Rede e selecione Online>Fast 3G ou Slow 3G.

   

   Ou pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS) para abrir o Menu de Comando, comece a digitar 3ge selecione Habilitar limitação 3G rápida ou Habilitar limitação 3G lenta.

   

Você também pode definir a limitação de rede na ferramenta Desempenho :

1. Selecione Configurações de Captura (Configurações de ) e selecione a lista Rede e altere a predefinição para 3G rápido ou 3G lento.

   

Emular sensores

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

As seções a seguir fornecem uma visão rápida sobre como substituir a geolocalização e definir a orientação do dispositivo. Para obter uma lista completa de recursos, consulte Emular sensores de dispositivo.

Substituir geolocalização

Use a ferramenta Sensores para substituir a geolocalização e simular a orientação do dispositivo.

Se sua página depender de informações de geolocalização de um dispositivo móvel para ser renderizada corretamente, forneça geolocalizações diferentes usando a interface do usuário de substituição de geolocalização.

1. Na Barra de Atividades, clique no botão Mais ferramentas () e clique em Sensores:

   

   Ou, abra o Menu de Comando selecionando Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS). Digite Sensors e selecione Mostrar Sensores:

   

2. Selecione o menu suspenso Local e, em seguida, selecione um dos locais predefinidos:

   

Para inserir um local personalizado, selecione Outro e insira as coordenadas do seu local personalizado.

Para testar como sua página se comporta quando as informações de localização não estão disponíveis, selecione Local não disponível.

Consulte também:

• Substituir a geolocalização em Emular sensores de dispositivo.

Definir orientação

Se sua página depender de informações de orientação de um dispositivo móvel para ser renderizada corretamente, abra a interface do usuário de orientação.

Para definir a orientação do dispositivo:

1. Na Barra de Atividades, clique no botão Mais ferramentas () e clique em Sensores:

   

   Ou, abra o Menu de Comando pressionando Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS). Digite Sensorse selecione Mostrar Sensores:

   

2. No menu suspenso Orientação , selecione uma orientação predefinida.

   Ou, para inserir sua própria orientação, selecione Orientação personalizada e insira seus próprios valores de alfa, beta e gama :

   

Consulte também:

• Simule a orientação do dispositivo em Emular sensores do dispositivo.

Definir a cadeia de caracteres do agente do usuário

Se sua página depender da cadeia de caracteres de agente do usuário de um dispositivo móvel para ser renderizada corretamente, use a ferramenta Condições de rede para especificar uma cadeia de caracteres de agente de usuário diferente.

Para definir a cadeia de caracteres do agente do usuário:

1. Selecionar Mais ferramentas (+) >Condições de rede:

   

   Ou, abra o Menu de Comando pressionando Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS). Digite Network conditionse selecione Mostrar condições de rede:

   

2. Na seção Agente de usuário da ferramenta Condições de rede , desmarque a caixa de seleção Usar padrão do navegador .

3. Para selecionar em uma lista de cadeias de caracteres de agente do usuário predefinidas, clique no menu que inicialmente diz Personalizado.

   Ou, para inserir sua própria cadeia de caracteres de agente do usuário, insira a cadeia de caracteres na caixa de texto Insira um agente de usuário personalizado :

   

Consulte também:

• Substituir a cadeia de caracteres do agente do usuário

Definir dicas de cliente agente de usuário

Se seu site emprega dicas de cliente de agente de usuário, use a ferramenta Dispositivos Emulados para adicionar dispositivos e definir dicas de cliente de agente de usuário:

1. Clique com o botão direito do mouse em uma página da Web e selecione Inspecionar.

2. Selecione Dispositivos de configurações>. A página Configurações de Dispositivos Emulados é aberta.

3. Clique no botão Adicionar dispositivo personalizado e expanda as dicas de cliente do agente do usuário:

   

4. Digite um nome exclusivo na caixa de texto Nome do dispositivo , como Test101.

5. Aceite os valores padrão ou altere a largura, a altura e a proporção de pixels do dispositivo conforme necessário.

6. Defina dicas de cliente agente de usuário da seguinte maneira:

   • Marca e versão, como Edge e 92. Selecione + Adicionar marca para adicionar vários pares de marca e versão.
   • Versão completa do navegador , como 92.0.1111.0.
   • Plataforma e Versão como Windows e 10.0.
   • Arquitetura como x86.
   • Modelo de dispositivo , como o Galaxy Nexus.

   Você pode definir ou alterar qualquer uma das dicas de cliente do agente do usuário. Não há valores obrigatórios.

7. Clique em Adicionar. O novo dispositivo é exibido no estado selecionado na parte superior da lista de dispositivos emulados .

Você também pode definir dicas de cliente de agente de usuário na ferramenta Rede ; consulte Referência de recursos de rede.

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.