Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Simular dispositivos móveis com o Device Mode no Chrome DevTools

Use o Device Mode para visualizar como sua página ficará e funcionará em um dispositivo móvel.

Device Mode é o nome de um conjunto de recursos avulsos no Chrome DevTools que ajuda você a simular dispositivos móveis. Esses recursos incluem:

Limitações

Pense no Device Mode como uma aproximação de primeira ordem de como sua página ficará em um dispositivo móvel. Com o Device Mode você não precisa executar seu código em um dispositivo móvel. Você simula a experiência do usuário de dispositivos móveis no seu laptop ou computador desktop.

Existem alguns aspectos dos dispositivos móveis que o DevTools nunca conseguirá simular. Por exemplo, a arquitetura das CPUs de dispositivos móveis é muito diferente da arquitetura das CPUs de um laptop ou computador desktop. Se você tiver dúvidas, o melhor a fazer é executar sua página em um dispositivo móvel. Use a Depuração remota para visualizar, alterar, depurar e definir o código de uma página a partir do seu laptop ou computador desktop enquanto ele é executado em um dispositivo móvel.

Simular uma janela de visualização de um dispositivo móvel

Clique em Toggle Device Toolbar Alternar barra de ferramentas do dispositivo para abrir a IU que permite a você simular uma janela de visualização de um dispositivo móvel.

A barra de ferramentas do dispositivo.
Imagem 1. A barra de ferramentas do dispositivo

Por padrão, a barra de ferramentas do dispositivo abre em modo de janela de visualização responsiva.

Modo de janela de visualização responsiva

Arraste as alças para redimensionar a janela de visualização para qualquer dimensão desejada. Ou insira valores específicos nos campos de largura e altura. Na Imagem 2, a largura está definida como 628, e a altura como 662.

As alças para alterar as dimensões da janela de visualização quando no Modo de janela de visualização responsiva.
Imagem 2. As alças para alterar as dimensões da janela de visualização no Modo de janela de visualização responsiva.

Mostrar consultas de mídias

Para mostrar os pontos de interrupção de consultas de mídia acima da sua janela de visualização, clique em More options e selecione Show media queries.

Mostrar consultas de mídias.
Imagem 3. Mostrar consultas de mídia

Clique em um ponto de interrupção para alterar a largura da janela de visualização de modo que o ponto de interrupção seja acionado.

Clique em um ponto de interrupção para alterar a largura da janela de visualização.
Imagem 4. Clique em um ponto de interrupção para alterar a largura da janela de visualização

Modo de janela de visualização do dispositivo móvel

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

A lista de dispositivos.
Imagem 5. A lista de dispositivos

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

Clique em Rotate Girar para girar a janela de visualização e usar a orientação paisagem.

Orientação paisagem.
Imagem 6. Orientação paisagem

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

A barra de ferramentas do dispositivo.
Imagem 7. A barra de ferramentas do dispositivo

Veja também Definir orientação.

Mostrar frame do dispositivo

Ao simular as dimensões de um dispositivo móvel específico, como um iPhone 6, abra More options e selecione Show device frame para exibir o frame do dispositivo físico ao redor da janela de visualização.

Mostrar frame do dispositivo.
Imagem 8. Mostrar frame do dispositivo
O frame do dispositivo para o iPhone 6.
Imagem 9. O frame do dispositivo para o iPhone 6

Mostrar réguas

Clique em More options e selecione Show rulers para visualizar as réguas acima e à esquerda da sua janela de visualização. A unidade de dimensionamento das réguas é o pixel.

Mostrar réguas.
Imagem 10. Mostrar réguas
Réguas acima e à esquerda da janela de visualização.
Imagem 11. Réguas acima e à esquerda da janela de visualização

Aumente o zoom da janela de visualização

Use a lista de Zoom para aumentar ou diminuir o zoom.

Zoom.
Imagem 11. Zoom

Limitar a rede e a CPU

Para limitar a rede e a CPU, selecione Mid-tier mobile ou Low-end mobile na lista Throttle.

A lista Throttle.
Imagem 12. A lista Throttle

O Mid-tier mobile simula uma conexão 3G rápida e limita sua CPU de modo que ela fique quatro vezes mais lenta que o normal. O Low-end mobile simula uma conexão 3G lenta e limita sua CPU 6 de modo que ela fique seis vezes mais lenta que o normal. Tenha em mente que o limite é relativo à capacidade normal do seu laptop ou computador desktop.

Observe que a lista Throttle ficará escondida se a barra de ferramentas do dispositivo for estreita.

A barra de ferramentas do dispositivo.
Imagem 13. A barra de ferramentas do dispositivo

Limitar apenas a CPU

Para limitar somente a CPU e não a rede, acesse o painel Performance, clique em Capture Settings Configurações de capturae selecione 4x slowdown ou 6x slowdown na lista CPU.

A lista CPU.
Imagem 14. A lista CPU

Limitar apenas a rede

Para limitar somente a rede e não a CPU, acesse o painel Network e selecione Fast 3G ou Slow 3G na lista Throttle.

A lista Throttle.
Imagem 14. A lista Throttle

Ou pressione Command+Shift+P (Mac) ou Control+Shift+P (Windows, Linux, Chrome OS) para abrir o menu de comando, digite 3G e selecione Enable fast 3G throttling ou Enable slow 3G throttling.

O menu de comando.
Imagem 15. O menu de comando

Você também pode definir o limite da rede no painel Performance. Clique em Capture Settings Configurações de captura e depois selecione Fast 3G ou Slow 3G na lista Network.

Configuração de limite da rede no painel Performance.
Imagem 16. Configuração de limite da rede no painel Performance

Modificar geolocalização

Para abrir a IU de modificação da geolocalização, clique em Customize and control DevTools Personalizar e controlar DevTools e selecione More tools > Sensors.

Sensores
Imagem 17. Sensores

Ou pressione Command+Shift+P (Mac) ou Control+Shift+P (Windows, Linux, Chrome OS) para abrir o menu de comando, digite Sensors e selecione Show Sensors.

Mostrar sensores
Imagem 18. Mostrar sensores

Selecione uma das predefinições da lista Geolocation ou selecione Custom location para inserir as próprias coordenadas. Você também pode selecionar Location unavailable para testar como sua página se comporta quando a geolocalização está em estado de erro.

Geolocalização
Imagem 19. Geolocalização

Definir orientação

Para abrir a IU de orientação, clique em Customize and control DevTools Personalizar e controlar DevTools.{: .inline-icon } e selecione More tools > Sensors.

Sensores
Imagem 20. Sensores

Ou pressione Command+Shift+P (Mac) ou Control+Shift+P (Windows, Linux, Chrome OS) para abrir o menu de comando, digite Sensors e selecione Show Sensors.

Mostrar sensores
Imagem 21. Mostrar sensores

Selecione uma das predefinições da lista Orientation ou selecione Custom orientation para definir seus próprios valores Alfa, Beta e Gama.

Orientação
Imagem 22. Orientação

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

Consulte Junte-se à comunidade DevTools para ver outras maneiras de enviar seu feedback.