O emulador mobile do Chrome se chama modo dispositivo (device mode) e vem integrado ao Chrome DevTools. Abra o DevTools, pressione Ctrl + Shift + M no Windows e Linux ou Cmd + Shift + M no Mac, escolha um celular no menu Dimensions e recarregue a página. O Chrome passa a exibir a página com o viewport, a densidade de pixels e o user agent daquele celular.
Este guia passa por todos os controles que importam para testar a versão mobile no dia a dia e termina com o que o modo dispositivo não consegue mostrar.
Como ativar o modo dispositivo no Chrome
- Abra a página que você quer testar.
- Abra o DevTools:
F12,Ctrl + Shift + I(Windows, Linux) ouCmd + Option + I(Mac). Você também pode clicar com o botão direito na página e escolher Inspecionar. - Clique no ícone Toggle device toolbar (um celular e um tablet) no canto superior esquerdo do DevTools, ou use o atalho acima com o DevTools em foco.
- Recarregue a página para que o site receba o user agent mobile já na primeira requisição.
O passo 4 é o que todo mundo pula. Sem recarregar, um site que detecta o aparelho no servidor já te enviou o HTML de desktop.
Escolhendo um aparelho ou um tamanho personalizado
O menu Dimensions acima do viewport tem dois modos.
Responsive deixa você arrastar as bordas do viewport ou digitar largura e altura. Use para achar a largura exata em que o layout quebra. A barra acima do viewport mostra larguras prontas (Mobile S 320, Mobile M 375, Mobile L 425, Tablet 768, Laptop 1024) como atalhos.
Um aparelho específico, como um modelo de iPhone ou Pixel, define juntos largura, altura, densidade de pixels e user agent. A lista padrão é curta. Clique em Edit no fim da lista para ativar mais aparelhos ou em Add custom device para criar o seu, com nome, largura, altura, densidade de pixels e string de user agent. Um aparelho personalizado ajuda quando o celular que você quer testar é mais novo que a lista do Chrome. A tabela de tamanhos de tela do iPhone tem os valores dos iPhones atuais.
O ícone de rotação alterna entre retrato e paisagem.
Simulando um celular lento: limitação de rede e CPU
Um computador é várias vezes mais rápido que um celular comum. O modo dispositivo ajuda a diminuir essa diferença:
- O menu Throttling da barra de dispositivos tem presets para celulares intermediários e de entrada, que deixam a rede e a CPU mais lentas.
- No painel Performance você define a lentidão da CPU separadamente (por exemplo, 4x ou 6x).
- No painel Network você escolhe presets de rede como Fast 4G, Slow 4G ou 3G.
A limitação é uma simulação, não uma medição em hardware real. Use para pegar problemas óbvios, como um script que trava a renderização por dois segundos. Para números que você possa reportar, veja o guia de teste de velocidade mobile e a auditoria Lighthouse mobile.
Toque, sensores e outras configurações de emulação
Quando um aparelho mobile está selecionado, o Chrome dispara eventos de toque em vez de eventos de mouse, e o cursor vira um círculo. Assim dá para testar por alto carrosséis com swipe e handlers de toque, embora o mouse não se mova como um polegar.
O menu de três pontos da barra de dispositivos tem mais opções: Show media queries desenha seus breakpoints como barras coloridas, Show rulers adiciona réguas em pixels, e Add device pixel ratio e Add device type mostram essas configurações na barra. O painel Sensors (abra pelo menu de comandos com Ctrl + Shift + P ou Cmd + Shift + P) substitui a geolocalização e a orientação do aparelho.
Como tirar um print mobile no modo dispositivo
Abra o menu de três pontos da barra de dispositivos e escolha Capture screenshot para a área visível ou Capture full size screenshot para a página inteira. Se você escolheu um aparelho específico, ative antes Show device frame para incluir o contorno do celular. Comparamos esse método com outros em como tirar print da versão mobile de um site.
O que o modo dispositivo não mostra
O modo dispositivo também funciona em localhost. Para testar o mesmo servidor local num celular de verdade, veja como acessar o localhost pelo celular.
A própria documentação do Chrome chama o modo dispositivo de aproximação de primeira ordem. Os limites são reais:
| Aspecto | O que o modo dispositivo faz | O que ele não consegue fazer |
|---|---|---|
| Motor de renderização | Usa o Chrome de desktop (Blink) | Mostrar bugs específicos do Safari ou do iOS |
| Desempenho | Simula CPU e rede mais lentas | Reproduzir aquecimento, memória ou GPU de um celular real |
| Entrada | Converte o mouse em eventos de toque | Reproduzir gestos com vários dedos, alcance do polegar ou o teclado virtual |
| Interface do navegador | Mostra a área da página | Mostrar a barra de endereço real, as barras de ferramentas e as áreas seguras do iOS e do Android |
Para o Safari, use o Simulador do Xcode ou um iPhone de verdade (guia). Para o Chrome num Android real, conecte o celular e abra chrome://inspect no computador (guia).
Modo dispositivo ou extensão de visualização mobile?
O modo dispositivo é a melhor escolha para depurar: os painéis Elements, Console e Network ficam ao lado da prévia (veja esses painéis no guia do Chrome DevTools). Para conferências visuais rápidas, ele dá trabalho demais, porque o DevTools precisa estar aberto e a emulação é zerada em cada aba.
O Mobile View Extension resolve a parte visual com um clique e sem abrir o DevTools. Ele aplica o user agent, o tamanho de tela e a densidade de pixels do aparelho, mostra uma moldura de celular e continua ativo enquanto você navega. Ele não gera eventos de toque, então para testar toque o modo dispositivo continua sendo a ferramenta certa. Os prós e contras estão em simulador mobile em extensão ou DevTools.
Perguntas frequentes
Qual é o atalho do emulador mobile do Chrome?
Com o DevTools aberto e em foco, pressione Ctrl + Shift + M no Windows e Linux ou Cmd + Shift + M no macOS.
Por que o site continua com cara de desktop no modo dispositivo?
Recarregue a página depois de escolher o aparelho. Alguns sites decidem qual versão entregar na primeira requisição, antes de o user agent emulado ser aplicado.
Dá para emular um iPhone no Chrome?
Dá para emular o tamanho de tela, a densidade de pixels e o user agent de um iPhone. A página continua sendo renderizada pelo motor do Chrome, não pelo WebKit do Safari, então bugs exclusivos do Safari não vão aparecer.