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:
- Simulação de uma janela de visualização móvel
- Controle de rede
- Controle de CPU
- Simulação de geolocalização
- Definição de orientação
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 
para abrir a IU que
permite a você simular uma janela de visualização de um dispositivo móvel.
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.
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.
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.
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.
Gire a janela de visualização para usar a orientação paisagem
Clique em Rotate 
para girar a janela de visualização e usar a orientação paisagem.
O botão Rotate desaparece se a barra de ferramentas do dispositivo for estreita.
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 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.
Aumente o zoom da janela de visualização
Use a lista de Zoom para aumentar ou diminuir o 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.
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.
Limitar apenas a CPU
Para limitar somente a CPU e não a rede, acesse o painel Performance, clique em
Capture Settings 
e selecione
4x slowdown ou 6x slowdown na 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.
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.
Você também pode definir o limite da rede no painel Performance. Clique em
Capture Settings e depois
selecione Fast 3G ou Slow 3G na lista Network.
Modificar geolocalização
Para abrir a IU de modificação da geolocalização, clique em Customize and control DevTools
e selecione
More tools > Sensors.
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.
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.
Definir orientação
Para abrir a IU de orientação, clique em Customize and control DevTools
.{: .inline-icon } e selecione
More tools > Sensors.
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.
Selecione uma das predefinições da lista Orientation ou selecione Custom orientation para definir seus próprios valores Alfa, Beta e Gama.
Feedback
Consulte Junte-se à comunidade DevTools para ver outras maneiras de enviar seu feedback.