Como testo o localhost no meu celular?

Inicie um túnel localhost com o PortPreview para obter uma URL HTTPS pública, depois abra essa URL no navegador do seu celular. O túnel encaminha o tráfego para o seu servidor de desenvolvimento local.

Por que meu celular não consegue acessar o localhost do meu laptop?

Endereços localhost são interfaces loopback alcançáveis apenas na máquina que roda o servidor. Um túnel cria uma URL pública que encaminha para o seu processo local.

Preciso de HTTPS para testes móveis?

Sim para muitos recursos móveis, incluindo cookies seguros, service workers e redirecionamentos de OAuth. Túneis localhost fornecem HTTPS por padrão sem configuração de certificados.

Testes móveis com um túnel localhost

Você pode testar seu app em dispositivos móveis enquanto ele roda no localhost expondo-o através de uma URL HTTPS pública. Celulares e tablets não conseguem alcançar 127.0.0.1 no seu laptop, mas um túnel localhost preenche essa lacuna instantaneamente.

Por que dispositivos móveis não conseguem acessar o localhost

Quando você roda um servidor de desenvolvimento no seu laptop, ele escuta num endereço loopback (127.0.0.1 ou localhost) que só a sua máquina alcança. Mesmo que seu celular esteja na mesma rede Wi-Fi, digitar http://192.168.x.x:3000 costuma falhar por regras de firewall, requisitos de HTTPS ou políticas CORS.

Um túnel localhost dá ao seu celular uma URL HTTPS padrão que encaminha para o seu processo local — sem configuração de rede.

O que os testes móveis pegam e os emuladores perdem

Alvos de toque reais, comportamento de scroll e tratamento de gestos.
Tamanhos de viewport reais em dispositivos iOS e Android.
Peculiaridades de navegadores móveis (Safari, Chrome, WebViews in-app).
Desempenho em hardware real, não ambientes simulados.
Comportamento de câmera, geolocalização e APIs específicas do dispositivo.
Redirecionamentos de OAuth e deep-link em navegadores móveis.

Passo a passo: testes móveis com PortPreview

Inicie seu servidor de desenvolvimento localmente (por exemplo npm run dev na porta 3000).
Rode npx portpreview 3000 para obter uma URL HTTPS pública.
Abra a URL no navegador do seu celular (ou escaneie um QR code se seu time compartilha links assim).
Teste layouts responsivos, navegação, formulários e fluxos de auth no dispositivo real.
Compartilhe a mesma URL com colegas de QA ou design para revisão multi-dispositivo.

Checklist de testes móveis

Layout responsivo

Verifique breakpoints, escala de fontes, carregamento de imagens e comportamento de overflow em celulares e tablets.

Interações de toque

Teste alvos de toque, gestos de swipe, pull-to-refresh e headers fixos sob entrada de toque real.

Fluxos de autenticação

Redirecionamentos de OAuth e logins por magic-link se comportam de forma diferente em navegadores móveis. Teste o ciclo completo de auth no dispositivo. Veja testes de callbacks OAuth para detalhes de configuração.

Desempenho

Meça carregamento de página, impacto do bundle JavaScript e otimização de imagens em dispositivos intermediários — não só seu laptop de desenvolvimento.

Dicas para testes móveis de localhost confiáveis

Use HTTPS: muitos recursos móveis (service workers, cookies seguros, geolocalização) exigem HTTPS, que os túneis fornecem por padrão.
Desative o cache durante os testes: refresh forçado ou modo anônimo para evitar assets desatualizados.
Teste múltiplos dispositivos: iOS Safari e Android Chrome tratam CSS e JavaScript de formas diferentes.
Mantenha o túnel ativo: a URL para de funcionar quando você fecha a sessão do CLI.

Compartilhe previews móveis com seu time

Em vez de gravar capturas de tela, compartilhe a URL do túnel para que colegas testem nos próprios dispositivos. Leia como compartilhar seu servidor de desenvolvimento local para fluxos de colaboração.

Comece PortPreview grátis para testes móveis rápidos a partir do localhost.