Simular Dispositivos Móveis com o Modo de Dispositivo no Chrome DevTools

Por Kayce Basques
Escritor Técnico, Chrome DevTools & Farol

o Uso de Dispositivo de Modo aproximado, como a sua página se parece e funciona em um dispositivo móvel.

modo de dispositivo é o nome para a colecção livre de funcionalidades no Google DevTools do Chrome que simula dispositivos móveis., Esses recursos incluem:

  • Simulando um móvel visor
  • de Otimização de rede
  • Otimização de CPU
  • Simulação de geolocalização
  • orientação de Definição

Limitações

Acho que de Dispositivo do Modo como uma primeira ordem de aproximação de como yourpage olha e se sente em um dispositivo móvel. Com o Modo dispositivo você não executa o seu código de um dispositivo móvel. Você simula a experiência do usuário móvel do seu laptop ou desktop.

Existem alguns aspectos dos dispositivos móveis que os DevTools nunca serão capazes de simular., Por exemplo, a arquitetura de CPUs móveis é muito diferente da arquitetura de CPUs desktop laptopor. Quando em dúvida, sua melhor aposta é realmente executar sua página em um dispositivo móvel. Use a depuração remota para ver, alterar, depurar e analisar o código de uma página a partir do seu portátil ou desktop,enquanto ele realmente corre em um dispositivo móvel.

Simule um painel de visualização móvel

Carregue em comutar a barra de ferramentas do dispositivo para abrir o interface que lhe permite simular um painel de visualização móvel.

Figura 1., A barra de ferramentas do dispositivo

por omissão, a barra de ferramentas do dispositivo abre no modo de visualização sensível.

modo de visualização sensível

arraste as pegas para redimensionar a área de visualização para as dimensões que necessitar. Ou, indique valores específicos nas caixas de largura e altura. Na Figura 2, a largura é definida para 628e a altura é definida para662.

Figura 2., As alças para alterar o visor de dimensões, quando na Responsivo Visor do Modo

Mostrar consultas de mídia

Para mostrar consulta de mídia pontos de interrupção acima da janela de visualização, clique em Mais opções e, em seguida, seleccione Mostrar mediaqueries.

Figura 3. Mostrar as pesquisas multimédia

carregue num ponto de paragem para alterar a largura do ecrã, de modo a que o ponto de paragem seja despoletado.

Figura 4., Carregue num ponto de paragem para alterar a largura da janela

Defina o tipo de dispositivo

Use a lista de tipos de dispositivo para simular um dispositivo móvel ou um dispositivo de secretária.

Figura 5. A lista de tipos de dispositivo

a tabela abaixo descreve as diferenças entre as opções. Methodrefers de renderização para saber se o Chrome torna a página num ecrã móvel ou desktop. Cursor iconrefers para que tipo de cursor você vê quando você passa por cima da página., Eventos disparados referem-se se a página dispara touch ou click eventos quando você interage com a página.,id=”b8e8c2fed7″>

Option Rendering method Cursor icon Events fired Mobile Mobile Circle touch Mobile (no touch) Mobile Normal click Desktop Desktop Normal click Desktop (touch) Desktop Circle touch

Mobile Device Viewport Mode

To simulate the dimensions of a specific mobile device, select the device from the Device list.,

Figure 6. The Device list

Rotate the viewport to landscape orientation

Click Rotate to rotate the viewport to landscape orientation.

Figure 7. Landscape orientation

Note that the Rotate button disappears if your Device Toolbar is narrow.

Figure 8., A barra de ferramentas do dispositivo

Ver também a orientação definida.

mostrar a moldura do dispositivo

ao simular as dimensões de um dispositivo móvel específico como um iPhone 6, Abra Mais opções e depois seleccione Mostrar a moldura do dispositivo para mostrar a moldura física do dispositivo em torno da janela.

Figura 9. Mostrar dispositivo de frame
Figura 10., O dispositivo de moldura para o iPhone 6

Adicionar um personalizado dispositivo móvel

Para adicionar um dispositivo personalizado:

  1. Clique na lista de Dispositivos e, em seguida, seleccione Editar.

    Figura 11. Seleccionar editar

  2. Carregue em Adicionar um dispositivo personalizado.

  3. Indique um nome, largura e altura para o dispositivo. Os campos de pixel do servidor, string de agente de usuário e tipo de dispositivo são opcionais. O campo do tipo de dispositivo é a lista que é configurada como móvel por padrão.,

    Figure 12. Creating a custom device

Show rulers

Click More options and then select Show rulers to see rulers above and to the leftof your viewport. The sizing unit of the rulers is pixels.

Figure 13. Show rulers
Figure 14., Réguas acima e à esquerda da janela

Zoom a janela

Use a lista de ampliação para ampliar ou reduzir.

Figura 15. Zoom

Throttle the network and CPU

To throttle the network and CPU, select Mid-tier mobile or Low-end mobil from the Throttle list.

Figura 16., A lista de Aceleração

mid-tier mobile simula fast 3G e acelera a sua CPU de modo que seja 4 vezes menor que o normal. O telemóvel low-end simula o 3G lento e acelera a sua CPU 6 vezes mais lenta do que o normal.Tenha em mente que o estrangulamento é relativo à capacidade normal de seu laptop ou desktop.

lembre-se que a lista de aceleração será escondida se a sua barra de ferramentas do dispositivo for estreita.

Figura 17., O Dispositivo da barra de Ferramentas

acelerar a CPU somente

Para acelerar a CPU e não apenas de rede, vá para o painel de Desempenho, clickCapture Configurações e, em seguida, select4x desaceleração ou 6x de desaceleração da CPU lista.

Figura 18. A lista de CPU

acelera a rede apenas

para acelerar a rede apenas e não a CPU, ir para o painel de rede e selectFast 3G ou Slow 3G a partir da lista de Aceleração.,

Figura 19. A lista de Aceleração

ou carregue em Comando+Shift+P (Mac) ou controlo+Shift+P (Windows, Linux, Chrome OS) para abrir o Menu de comandos, tipo 3G, e seleccione Activar a aceleração rápida de 3G orEnable slow 3G.

Figura 20. O Menu de comandos

Pode também definir a aceleração da rede a partir do painel de desempenho., Clickcapture Settings and thenselect Fast 3G or Slow 3G from the Network list.

Figura 21. Configuração de otimização de rede a partir do painel de Desempenho

Substituir geolocalização

Para abrir a geolocalização substituindo UI, clique em Personalizar e controlar o DevTools e, em seguida, selectMore ferramentas > Sensores.

Figura 22., Sensores
Figura 23. Mostrar os sensores

seleccione uma das predefinições da lista de geolocalização, ou seleccione uma localização personalizada para indicar as suas próprias coordenadas, ou seleccione a localização indisponível para testar como a sua página se comporta quando a geolocalização está num estado de erro.

Figura 24., Geolocation

Set orientation

To open the orientation UI click Customize and control DevTools and then selectMore tools > Sensors.

Figure 25. Sensors
Figure 26., Mostrar os sensores

seleccione uma das predefinições da lista de orientação ou seleccione orientação personalizada para definir os seus próprios valores alfa, beta e gama.

Figura 27. Orientation

Feedback

esta página foi útil?
Sim
qual foi a melhor coisa sobre esta página?
ajudou-me a completar o(S) Meu (s) objetivo (s)
obrigado pelo feedback., Se você tem idéias específicas sobre como melhorar esta página, por favor crie um problema.

teve a informação que eu precisava
obrigado pelo feedback. Se você tem idéias específicas sobre como melhorar esta página, por favor crie um problema.

teve informações precisas
obrigado pelo feedback. Se você tem idéias específicas sobre como melhorar esta página, por favor crie um problema.

foi fácil de ler
obrigado pelo feedback. Se você tem idéias específicas sobre como melhorar esta página, por favor crie um problema.,

algo mais
obrigado pelo feedback. Se você tem idéias específicas sobre como melhorar esta página, por favor crie um problema.

No
qual foi a pior coisa nesta página?
não me ajudou a completar o(S) Meu (s) objetivo (s)
obrigado pelo feedback. Se você tem idéias específicas sobre como melhorar esta página, por favor crie um problema.

estava faltando informação que eu precisava
obrigado pelo feedback., Se você tem idéias específicas sobre como melhorar esta página, por favor crie um problema.

teve informação imprecisa
obrigado pelo feedback. Se você tem idéias específicas sobre como melhorar esta página, por favor crie um problema.

foi difícil ler
obrigado pelo feedback. Se você tem idéias específicas sobre como melhorar esta página, por favor crie um problema.

algo mais
obrigado pelo feedback. Se você tem idéias específicas sobre como melhorar esta página, por favor crie um problema.,

ver Join the DevTools community for other way to leave feedback.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Ir para a barra de ferramentas