Está a trabalhar num layout responsivo, verifica no desktop e tudo parece perfeito. Abre-o num smartphone, o layout parte-se, a fonte fica do tamanho da cabeça de um fósforo e o botão «Pagar» desliza para fora do ecrã.

Os gigantes de produto com orçamentos para laboratórios de QA podem dar-se ao luxo de comprar uma frota de dispositivos reais para cada ecrã. Mas o que deve fazer um freelancer, uma startup de três pessoas ou um programador a solo? A resposta é o emulador integrado nas DevTools do Chrome. Gratuito, abre com um único atalho de teclado e cobre a grande maioria das tarefas diárias de teste responsivo. Sem software adicional para instalar, sem máquinas virtuais, sem farms na cloud.

Abaixo encontra um guia passo a passo para o Device Mode: desde a ativação até à configuração avançada de limitação de rede e emulação de sensores. Tudo o que precisa para testar um site em smartphones e tablets sem sair do seu portátil de trabalho.

💡 Visão geral rápida:

• Abra as DevTools (F12 ou Ctrl+Shift+I) e ative a Barra de Ferramentas do Dispositivo (Ctrl+Shift+M); a página passará para o modo de emulação de viewport móvel.
• Selecione um modelo específico na lista suspensa (iPhone, Pixel, Galaxy) ou defina uma resolução personalizada em píxeis; o Chrome aplicará automaticamente o agente de utilizador adequado.
• Configure a limitação de rede (Slow 3G / Fast 3G) e ative a emulação de toque para ver como o site carrega e interage com os utilizadores em internet móvel real.
• Lembre-se das limitações: o emulador não reproduz a GPU de hardware de um dispositivo específico, a renderização de fontes do iOS ou o comportamento do WebKit do Safari; um telefone real continua a ser necessário para os testes finais.

O que é o Device Mode e quando é suficiente

O Device Mode é um conjunto de ferramentas dentro das Chrome DevTools que emula a visualização de uma página num dispositivo móvel. Faz três coisas em simultâneo:

• Emula a viewport, comprimindo a área de visualização para as dimensões físicas do ecrã do dispositivo selecionado. Vê o site como um utilizador de um iPhone 16 Pro Max ou Samsung Galaxy S25 o veria.
• Falsifica o agente de utilizador; o servidor recebe uma string típica de um navegador móvel. Crítico para sites com entrega dinâmica que fornecem layouts diferentes para desktop e mobile.
• Ativa a emulação de toque; o cursor do rato transforma-se numa simulação de dedo, com suporte para eventos de toque, gestos e multitoque.

Estabeleçamos desde já as fronteiras. O Device Mode NÃO emula: o motor de renderização do Safari (WebKit), a aceleração de hardware da GPU de um modelo específico, o comportamento da bateria e os processos do SO em segundo plano, ou o comportamento da rede celular de diferentes operadoras. Para o teste de aceitação final antes do lançamento, um telefone físico continua a ser necessário. Mas para o desenvolvimento e depuração diários, a ferramenta cobre as necessidades com muita margem.

Como abrir o Device Mode: três métodos

O Chrome oferece vários caminhos para o painel de emulação. Escolha o que for mais rápido no seu fluxo de trabalho.

Método 1. Atalhos de teclado, o mais rápido

Estando no Chrome, prima:

• Windows / Linux: Ctrl + Shift + M
• macOS: Cmd + Shift + M

Se as DevTools ainda não estiverem abertas, abrir-se-ão automaticamente juntamente com o painel de emulação. Premir novamente desativa o Device Mode e devolve a página à visualização normal.

Método 2. Botão nas DevTools

Abra as DevTools (F12 ou Ctrl+Shift+I). No canto superior esquerdo do painel, ao lado do separador Elements, encontra-se um ícone de telefone e tablet, Toggle device toolbar. Clique nele.

Método 3. Através do menu principal do Chrome

Três pontos no canto superior direito do navegador → More Tools → Developer Tools. Depois, o botão da Barra de Ferramentas do Dispositivo, como no método 2. O caminho é mais longo, mas salva-o se os atalhos de teclado lhe fugirem da memória a meio de um deploy noturno.

Seleção de dispositivo e definições de emulação

Depois de ativar a Barra de Ferramentas do Dispositivo, a página será recarregada e um painel de controlo aparecerá por cima dela. Vamos analisar cada elemento.

Lista suspensa de dispositivos

O elemento central, uma lista suspensa com perfis predefinidos. O Chrome vem com cerca de quinze predefinições: desde o iPhone SE (para verificar ecrãs compactos) ao iPhone 16 Pro Max, do Pixel 9 ao Galaxy S25.

Selecione um dispositivo e o Chrome, num só passo:

• define a largura e a altura da viewport;
• aplica o agente de utilizador correspondente;
• ativa a emulação de toque (a menos que seja desativada manualmente).

Para adicionar um dispositivo que não está na lista, clique em Edit... no mesmo menu suspenso e preencha o formulário: resolução do ecrã, Device Pixel Ratio, string do agente de utilizador. O perfil personalizado aparecerá na lista geral.

Resolução manual

Não quer prender-se a um modelo específico? Introduza números arbitrários nos campos de largura e altura. Cenário típico: «como fica o layout num smartphone Android de gama média padrão?»; introduz uma resolução típica e obtém instantaneamente a resposta, sem procurar o modelo certo na lista.

Device pixel ratio

O DPR determina quantos píxeis físicos do ecrã correspondem a um pixel CSS. Os topo de gama modernos têm DPR = 3, tablets e telefones económicos têm 2. No painel de emulação do Chrome, mostra o valor atual do DPR para o dispositivo selecionado e permite alterá-lo através da lista suspensa. Isto afeta diretamente a nitidez das imagens e dos ícones SVG em ecrãs retina.

Rotação do ecrã, limitação de rede e sensores

Três definições adicionais que transformam o Device Mode de uma simples «lupa» numa ferramenta de teste completa.

Rotação do ecrã

O ícone com duas setas circulares troca a largura pela altura. Alterne sempre entre retrato ↔ paisagem em cada ecrã principal: cabeçalho do site, ficha de produto, formulário de pagamento. O scroll horizontal numa landing page na orientação retrato é um erro crítico que o cliente notará mais depressa do que você.

Limitação de rede

A lista suspensa No throttling permite limitar a velocidade de carregamento. As predefinições disponíveis:

• Slow 3G (400 Kbps), internet móvel fraca no metro, fora da cidade ou numa cave;
• Fast 3G (1,6 Mbps), internet móvel típica na cidade;
• Slow 4G e Fast 4G (4-25 Mbps), boa ligação.

Depois de selecionar um perfil, atualize a página e observe os tempos no painel Network. Se as fontes ou as imagens principais demorarem mais de três segundos a carregar em Fast 3G, um utilizador com internet lenta já saiu para um concorrente.

Emulação de toque

Ativada por predefinição ao selecionar um dispositivo móvel. O cursor transforma-se num círculo translúcido, simulando o toque de um dedo. Verifique três coisas:

• se os menus suspensos funcionam ao toque, não ao passar o rato;
• se o tamanho dos elementos interativos é suficiente; de acordo com as WCAG 2.1, o alvo de toque mínimo é de 48×48 píxeis CSS;
• se não existem falsos acionadores de efeitos hover que são fisicamente irreproduzíveis num telefone real.

Geolocalização, media queries e sensores

O Chrome escondeu várias ferramentas úteis no menu «três pontos» (⋮) dentro do painel das DevTools, na secção More tools.

Geolocalização

O separador Sensors (More tools → Sensors) permite definir coordenadas arbitrárias de latitude e longitude. Um site que utilize a API de Geolocalização receberá o ponto especificado em vez do real. Conveniente para verificar preços regionais, deteção automática do idioma da interface e promoções locais.

Media queries

O painel Rendering (More tools → Rendering) mostra os pontos de quebra das media queries CSS diretamente sobre a página. Ative a opção Show media queries; uma escala colorida com marcas de mudança de estilo aparecerá por cima da página. Clicar num ponto define instantaneamente a viewport para a largura correspondente. Uma ferramenta indispensável ao depurar pontos de quebra complexos.

Prefers-color-scheme e prefers-reduced-motion

Também no painel Rendering estão os interruptores:

• prefers-color-scheme, força o tema claro ou escuro independentemente das definições do SO;
• prefers-reduced-motion, emula um pedido para desativar a animação, crítico para testes de acessibilidade.

Capturas de ecrã e gravação de screencast

O Device Mode pode tirar capturas de ecrã da página emulada. Três pontos no painel da Barra de Ferramentas do Dispositivo → Capture screenshot, e obtém um PNG exatamente do tamanho que vê no ecrã. Para uma captura de ecrã da altura total da página, escolha Capture full size screenshot, útil para enviar o layout a um cliente ou num relatório de bug.

Se as capturas de ecrã estáticas não forem suficientes, o Chrome grava um screencast do trabalho com a página emulada. Abra o painel Recorder (More tools → Recorder), crie uma nova gravação e execute as ações; o Chrome gravará cada passo com marcas temporais. A gravação finalizada pode ser exportada como um script Puppeteer e automatizar o reteste após as edições.

Limitações: quando não pode prescindir de um dispositivo real

A emulação do Chrome é uma ferramenta poderosa, mas não é uma solução milagrosa. Eis o que fundamentalmente não cobre:

• Renderização no iOS. De acordo com as regras da Apple App Store, todos os navegadores no iPhone e iPad devem usar o motor WebKit; mesmo o Chrome e o Firefox são tecnicamente wrappers sobre o Safari WebView. As DevTools mostram a renderização do motor Chromium (Blink), e as diferenças na exibição de fontes, arredondamentos, sombras e filtros entre o Blink e o WebKit podem ser significativas.
• Sensores de hardware. Giroscópio, barómetro, NFC, aceleração de vídeo por hardware; nada disto existe no emulador, e as APIs correspondentes devolverão null ou um erro.
• Comportamento com bateria fraca. O iOS e o Android descarregam agressivamente os separadores em segundo plano em níveis críticos de bateria. O emulador não reproduz isto.
• Desempenho real de JavaScript. Um processador móvel é muitas vezes mais lento do que um de desktop; animações que «voam» num portátil de trabalho podem congelar num telefone de gama média. Para medir, use o Lighthouse com limitação de CPU.

A regra é simples: conduza todo o ciclo de desenvolvimento e layout no Device Mode e faça a verificação final de cada lançamento em, pelo menos, um dispositivo Android físico e um iPhone.

Um vídeo curto mas denso da equipa do Chrome Developers: Jecelyn Yeen mostra cinco formas de emular a viewport móvel, desde a comutação básica até perfis de dispositivos personalizados e testes de toque.

⁉️🤔 Perguntas frequentes

Porque é que o site parece diferente nas Chrome DevTools e num iPhone real?

O Chrome em todas as plataformas, exceto iOS, usa o motor Blink. Um iPhone real funciona com WebKit; estes são dois motores de renderização diferentes, com tratamento distinto de fontes, suavização, filtros CSS e sombras. É por isso que o teste final para iPhone exige um dispositivo físico; o emulador mostrará a imagem «como no Chrome no Mac», e não «como no Safari no iPhone».

Qual é a diferença entre emulação e simulação no contexto das DevTools?

A emulação reproduz o comportamento do sistema ao nível da API e do protocolo: falsifica o agente de utilizador, emula eventos de toque, limita a largura de banda da rede ao nível do navegador. A simulação é uma imitação mais superficial que não afeta os mecanismos de baixo nível. O Device Mode no Chrome é precisamente emulação, não simulação.

É possível emular uma versão específica do iOS ou Android?

Não. O Device Mode emula a viewport, o agente de utilizador e a entrada por toque, mas não o sistema operativo nem a versão do motor do navegador. O agente de utilizador pode ser falsificado manualmente através de Network conditions → User agent, mas a renderização continuará a ser baseada no Blink. Para testar numa versão específica do Safari/iOS, precisa de um dispositivo físico ou de um serviço na cloud como o BrowserStack.

Como testar uma PWA ou um Service Worker no emulador?

Abra o painel Application nas DevTools. Na secção Service Workers, marque a opção Update on reload e assinale Bypass for network, se necessário. O emulador suporta o modo offline; ative-o com a caixa de verificação Offline no separador Network ou no painel Service Workers. O manifesto da PWA é verificado no separador Manifest, também no painel Application.

O que fazer se a Barra de Ferramentas do Dispositivo não estiver ativa e o ícone estiver cinzento?

O motivo mais comum é estar numa página de serviço do Chrome (chrome://extensions, chrome://settings, novo separador das DevTools). O Device Mode só funciona em páginas web normais. Abra qualquer página http/https e tente novamente.

O que fazer quando o emulador não é suficiente

O Device Mode nas Chrome DevTools cobre a maior parte das tarefas de layout responsivo: comutação de viewport, limitação de rede, entrada por toque, geolocalização, media queries, capturas de ecrã. Para o trabalho diário de um freelancer ou de uma pequena equipa, este conjunto é mais do que suficiente.

Mas lembre-se das fronteiras. A renderização no iOS, os sensores de hardware, o desempenho real de JS em hardware móvel fraco; tudo isto permanece fora da emulação. O padrão de ouro: escreva e depure o layout no Device Mode e, antes de cada lançamento, passe pelos pontos de verificação num iPhone e num smartphone Android físicos. Dois dispositivos, quinze minutos e a confiança de que o utilizador verá o site como você o idealizou.