Simulador de celular no Chrome: extensão ou DevTools, qual usar?

Tanto uma extensão de simulador mobile para Chrome quanto o modo dispositivo do Chrome DevTools mostram um site no tamanho de celular dentro do Chrome no computador. O DevTools é melhor para depurar, porque o inspetor e o console ficam ao lado da prévia. A extensão é mais rápida para conferências visuais, porque funciona com um botão e continua ativa enquanto você navega. Nenhum dos dois substitui um celular de verdade quando o assunto é toque ou renderização do Safari.

O resto do artigo detalha isso para você escolher pela tarefa, e não por hábito.

O que “simulador mobile” significa no Chrome

Tudo o que roda dentro do Chrome no desktop emula o ambiente de um celular, não o celular em si. Uma boa ferramenta muda os sinais que um site usa para decidir como aparecer:

• a largura e a altura da viewport, que acionam as media queries do CSS
• a string de user agent e o client hint Sec-CH-UA-Mobile, lidos por muitos servidores e scripts
• screen.width, screen.height e devicePixelRatio, lidos pelo JavaScript
• os indicadores de suporte a toque, como navigator.maxTouchPoints

A página continua sendo desenhada pelo motor Blink do Chrome, no processador do seu computador. Por isso o termo “simulador” é impreciso aqui. O Simulator do Xcode, da Apple, por outro lado, roda o Safari real do iOS.

Como as duas abordagens se comparam

O padrão é claro. O modo dispositivo é um depurador com uma visualização de celular acoplada. A extensão é uma visualização de celular sem mais nada acoplado.

Quando o modo dispositivo do DevTools é melhor

Use o modo dispositivo quando precisar entender por que algo está errado. Casos típicos:

• ver qual regra CSS vence em 375 px
• ler erros de console que só aparecem no mobile
• testar um handler de swipe ou de toque com eventos de toque emulados
• limitar a CPU para ver se um script bloqueia a primeira renderização

A configuração passo a passo está no guia do emulador mobile do Chrome.

Quando a extensão é melhor

Use uma extensão quando precisar ver como a versão mobile fica, com frequência e rapidez:

• revisar todas as páginas de um site depois de um deploy
• mostrar a um cliente, durante uma call, como o site fica no celular
• conferir uma página em localhost antes de subir (ou num celular real, como em acessar localhost pelo celular)
• tirar prints no tamanho de celular para um ticket ou uma revisão de design

O Mobile View Extension é um exemplo feito para isso. Ele recarrega a aba atual dentro de uma moldura de celular ou tablet, aplica o user agent, os client hints, o tamanho de tela e a densidade de pixels do aparelho e mantém a prévia ativa enquanto você navega. Dá para girar para a horizontal, digitar uma resolução personalizada e salvar um PNG da tela com moldura. Configurações como o aparelho escolhido ficam salvas.

Limites de qualquer simulador dentro do navegador

Seja realista sobre o que qualquer ferramenta dentro do Chrome mostra. A página do Mobile View Extension descreve seus limites com clareza, e eles são típicos da categoria:

1. A prévia roda em um frame dentro do Chrome no desktop, não como emulação nativa do aparelho.
2. Não são gerados eventos de toque; você interage com o mouse.
3. Media queries de densidade de pixels, pointer e hover não são totalmente emuladas. Breakpoints por largura seguem a viewport com moldura.

O DevTools tem limites parecidos: não mostra bugs do Safari, pressão real de memória nem o teclado na tela. Para isso, teste em um iPhone ou Android real, ou nos emuladores do Xcode e do Android Studio explicados em testar no iPhone e testar no Android.

Perguntas a fazer antes de instalar uma extensão de simulador mobile

Extensões que mudam o carregamento das páginas precisam de permissões amplas, então escolha com cuidado:

• Que dados ela coleta? Leia a política de privacidade. Uma ferramenta de prévia mobile não tem motivo para enviar seu histórico para lugar nenhum. A política de privacidade do Mobile View Extension diz que ele não coleta dados pessoais nem histórico de navegação.
• Ela muda o user agent ou só a largura? Ferramentas que mudam só a largura equivalem a redimensionar a janela. Veja por que redimensionar não mostra a versão mobile.
• Funciona em localhost e em páginas com login? Muitos “testes de responsividade” online não chegam a nenhum dos dois.
• Recebe manutenção? Confira a data da última atualização na Chrome Web Store.

Um fluxo simples que usa os dois

A maioria das pessoas que testa layouts mobile todo dia acaba dividindo o trabalho: a extensão para a primeira olhada em cada página e o DevTools para as páginas com problema. Acrescente um celular real para a passada final nos fluxos principais, como checkout ou cadastro. Assim você cobre aparência, depuração e toque sem deixar cada teste mais lento.

Perguntas frequentes

É seguro usar uma extensão de simulador mobile?

Depende da extensão. Prefira uma com política de privacidade clara, sem analytics nem rastreamento embutidos e com atualizações recentes. Confira as permissões que ela pede na Chrome Web Store.

Uma extensão do Chrome consegue emular um iPhone com exatidão?

Não. Ela pode reproduzir a viewport, o user agent e a densidade de pixels de um iPhone, mas a página é renderizada pelo motor do Chrome, não pelo do Safari. Para conferências específicas do Safari, use o Simulator do Xcode ou um iPhone real.

Ainda preciso do DevTools se uso uma extensão?

Sim, para depurar. A extensão mostra que um layout quebra; o DevTools mostra qual regra quebra.