Como acessar localhost pelo celular (e ver em visualização mobile)

Para abrir um site em localhost no celular, faça o servidor de desenvolvimento escutar na rede (geralmente com a flag --host), conecte o celular ao mesmo Wi-Fi e acesse o IP local do computador com a porta, por exemplo http://192.168.1.20:5173. Se a rede bloquear, use o port forwarding do Chrome via USB ou um túnel. E se você só precisa ver o layout mobile, pode deixar o celular de lado e abrir o localhost em visualização mobile no Chrome do computador.

O mais rápido: visualização mobile do localhost no Chrome do computador

O localhost do seu computador funciona em qualquer ferramenta desktop, então não é preciso configurar rede:

• Modo dispositivo do Chrome DevTools: abra o DevTools, ative a barra de dispositivos com Ctrl + Shift + M (Cmd + Shift + M no Mac) e escolha um celular. Veja o guia do emulador mobile do Chrome.
• Uma extensão de visualização mobile que suporte páginas locais. O Mobile View Extension funciona em localhost e mantém a visualização de celular enquanto você navega entre páginas locais, então dá para deixá-lo aberto durante o desenvolvimento.

Muitos “testes de responsividade” online não conseguem fazer isso, porque carregam sua URL a partir dos servidores deles e não alcançam a sua máquina.

Quando precisar do toque real, do teclado real ou do Safari, passe para o celular.

Método 1: mesmo Wi-Fi e IP local do computador

1. Faça o servidor escutar em todas as interfaces

A maioria dos servidores de desenvolvimento escuta só em localhost (127.0.0.1) por padrão, e outros aparelhos não chegam lá. Mande escutar na rede:

Vite e Astro mostram uma URL “Network” quando iniciados com --host. Esse é o endereço para abrir no celular.

2. Descubra seu IP local

Se a ferramenta não mostrar: no macOS, abra Ajustes do Sistema > Wi-Fi > Detalhes; no Windows, rode ipconfig e procure o endereço IPv4; no Linux, rode ip addr. Ele costuma começar com 192.168. ou 10..

3. Abra no celular

Conecte o celular à mesma rede Wi-Fi e acesse http://<seu-ip>:<porta>.

Se não carregar

• Firewall. macOS e Windows podem bloquear conexões de entrada para Node ou Python. Permita o app quando aparecer o aviso ou crie uma regra para a porta.
• Redes de visitantes ou de escritório. Muitas isolam os aparelhos entre si (“isolamento de clientes”). Use o método 2 ou 3.
• URLs de localhost fixas no código. Se o front chama http://localhost:8080/api, o celular vai tentar acessar a si mesmo. Use URLs relativas ou uma variável de ambiente para o host da API.
• CORS e cookies. Uma nova origem (192.168.1.20:5173) pode quebrar configurações de cookie ou CORS que só permitem localhost.

Método 2: port forwarding do Chrome para um celular Android

Com um Android conectado por USB e a depuração USB ativada, o Chrome consegue mapear uma porta do celular para o seu computador:

1. Abra chrome://inspect/#devices no computador.
2. Clique em Port forwarding, adicione sua porta (por exemplo 5173) e o destino localhost:5173, e marque Enable port forwarding.
3. No celular, abra http://localhost:5173 no Chrome.

Como o celular usa localhost, cookies e CORS se comportam como no computador, e você pode inspecionar a página pelo DevTools do desktop. Como ativar a depuração USB está em testar no Android.

Método 3: um túnel com URL HTTPS pública

Um túnel dá ao seu servidor local um endereço público temporário. Funciona em qualquer rede e oferece HTTPS, exigido por alguns recursos (service workers, geolocalização, câmera, cookies seguros).

Duas opções comuns:

• Cloudflare Tunnel: cloudflared tunnel --url http://localhost:5173 mostra uma URL temporária em trycloudflare.com.
• ngrok: ngrok http 5173 mostra uma URL de encaminhamento (exige conta gratuita).

Enquanto o túnel está ativo, qualquer pessoa com a URL acessa seu servidor de desenvolvimento, então encerre-o quando terminar e não exponha painéis de admin nem dados reais. Alguns frameworks também bloqueiam nomes de host desconhecidos por padrão; o Vite, por exemplo, precisa do domínio do túnel em server.allowedHosts.

Método 4: emuladores e simuladores

• Simulator do Xcode (Mac): usa a rede do Mac, então http://localhost:5173 funciona direto no Safari simulado. Veja testar no iPhone.
• Emulador do Android Studio: ali localhost aponta para o próprio emulador. Use http://10.0.2.2:5173 para chegar ao computador.

Qual método usar

Perguntas frequentes

Por que meu celular não abre o localhost?

No celular, localhost é o próprio celular. Use o IP local do computador e faça o servidor de desenvolvimento escutar na rede com --host ou 0.0.0.0.

Como testar localhost no iPhone?

Pelo mesmo Wi-Fi e o IP do computador, por um túnel ou no Simulator do Xcode num Mac, onde localhost funciona direto.

Dá para ver a versão mobile do localhost sem celular?

Sim. Use o modo dispositivo do DevTools ou uma extensão de visualização mobile que suporte páginas locais.