Use o painel Dispositivo para emular a experiência de um dispositivo móvel específico. Isso permitirá que você teste visualmente seu design no dispositivo móvel, bem como teste interações semelhantes ao toque.
Digamos que gostaríamos de ver como nosso design responsivo se parece e funciona em um iPhone 5. Tudo o que precisamos fazer é selecionar esse dispositivo na lista suspensa <Selecionar modelo>: O modo de dispositivo alterará a visualização do design para que você estamos vendo o que um usuário do iPhone 5 pode ver. Além do mais, se você notar, o cursor do mouse agora é um círculo. Ao mover o mouse para cima e para baixo, a visualização do design rolará para cima e para baixo, simulando o comportamento da interação com o dedo.
Mover o cursor sobre um link não funcionará como se você estivesse passando o mouse sobre ele (porque não há foco nas telas sensíveis ao toque).
Teste/depuração de consultas de mídia
Depurar e testar seus pontos de interrupção de consulta de mídia é super fácil quando você está usando o modo de dispositivo. Basta clicar no ícone “cascata” no canto superior esquerdo do modo de dispositivo e ele mostrará um gráfico de barras de seus pontos de interrupção.
Além disso, passar o mouse sobre o ícone “cascata” exibirá o número de consultas de mídia existentes na página que você está testando. Clicar nas barras mudará imediatamente a visualização do design para esse ponto de interrupção da consulta de mídia. Alternar entre suas consultas de mídia é rápido, tornando esse recurso uma grande economia de tempo.
As cores das barras de consulta de mídia são indicativas do tipo de consulta de mídia representada: laranja é uma consulta de mídia de largura mínima, azul é uma consulta de mídia de largura máxima e verde é uma consulta de mídia de intervalo mínimo e máximo (por exemplo @media (min-width: 320px) and (max-width: 640px), ).
Teste de Internet Móvel
Você pode testar o desempenho percebido de seu design responsivo usando o recurso Rede do modo de dispositivo.
Clique no menu suspenso Rede e escolha a tecnologia de rede móvel com a qual deseja testar, como EDGE ou 3G. Esse recurso limitará sua conexão com a Internet para corresponder à tecnologia de rede escolhida.
Conclusão
O DevTools é uma ferramenta incrivelmente poderosa, e o modo de dispositivo o torna uma parte ainda mais indispensável do kit de ferramentas do web designer moderno.
Existem mais alguns recursos no modo de dispositivo para você explorar, como:
- Alterando o devicePixelRationo painel Dispositivo para testar o UX em telas Retina
- Réguas verticais/horizontais na parte superior e esquerda da janela de visualização para ajudá-lo a observar determinados comprimentos de pixel
- Substituição manual da string UA (o campo de texto na parte inferior do painel Rede)
