Para abrir un sitio en localhost desde el móvil, haz que tu servidor de desarrollo escuche en la red (normalmente con la opción --host), conecta el móvil a la misma wifi y abre la IP local de tu ordenador con el puerto, por ejemplo http://192.168.1.20:5173. Si la red lo bloquea, usa el reenvío de puertos de Chrome por USB o un túnel. Y si solo necesitas ver el diseño móvil, puedes olvidarte del teléfono y abrir localhost en vista móvil en Chrome de escritorio.
Lo más rápido: vista móvil de localhost en Chrome de escritorio
localhost funciona en cualquier herramienta de tu ordenador, así que no hace falta configurar la red:
- Una extensión de vista móvil que admita páginas locales. Mobile View Extension funciona en
localhosty mantiene la vista móvil al pasar de una página local a otra, así que puedes dejarla abierta mientras desarrollas. - Modo dispositivo de Chrome DevTools: abre DevTools, activa la barra de dispositivos con
Ctrl + Shift + M(Cmd + Shift + Men Mac) y elige un móvil. Mira la guía del emulador móvil de Chrome.
Muchos «test responsive online» no pueden hacerlo, porque cargan tu URL desde sus propios servidores y no llegan a tu máquina.
Cuando necesites el táctil real, el teclado real o Safari, pasa al móvil.
Método 1: misma wifi e IP local del ordenador
1. Haz que el servidor escuche en todas las interfaces
La mayoría de los servidores de desarrollo solo escuchan en localhost (127.0.0.1) por defecto, y otros dispositivos no llegan ahí. Diles que escuchen en la red:
| Herramienta | Comando |
|---|---|
| Vite | npm run dev -- --host |
| Astro | npm run dev -- --host |
| Next.js | next dev -H 0.0.0.0 |
| Create React App / webpack dev server | definir HOST=0.0.0.0 o host: '0.0.0.0' |
| Python | python -m http.server 8000 --bind 0.0.0.0 |
Vite y Astro muestran una URL «Network» al arrancar con --host. Esa es la dirección que hay que abrir en el móvil.
2. Averigua tu IP local
Si tu herramienta no la muestra: en macOS, abre Ajustes del Sistema > Wi-Fi > Detalles; en Windows, ejecuta ipconfig y busca la dirección IPv4; en Linux, ejecuta ip addr. Suele empezar por 192.168. o 10..
3. Ábrela en el móvil
Conecta el móvil a la misma red wifi y entra en http://<tu-ip>:<puerto>.
Si no carga
- Cortafuegos. macOS y Windows pueden bloquear las conexiones entrantes a Node o Python. Permite la aplicación cuando te lo pregunte o añade una regla para el puerto.
- Redes de invitados o de oficina. Muchas aíslan los dispositivos entre sí («aislamiento de clientes»). Usa el método 2 o el 3.
- URL de
localhostescritas a mano. Si tu front llama ahttp://localhost:8080/api, el móvil intentará conectarse a sí mismo. Usa URL relativas o una variable de entorno para el host de la API. - CORS y cookies. Un origen nuevo (
192.168.1.20:5173) puede romper configuraciones de cookies o CORS que solo permitenlocalhost.
Método 2: reenvío de puertos de Chrome a un móvil Android
Con un Android conectado por USB y la depuración USB activada, Chrome puede asociar un puerto del móvil a tu ordenador:
- Abre
chrome://inspect/#devicesen el ordenador. - Haz clic en Port forwarding, añade tu puerto (por ejemplo
5173) y el destinolocalhost:5173, y marca Enable port forwarding. - En el móvil, abre
http://localhost:5173en Chrome.
Como el móvil usa localhost, las cookies y el CORS se comportan igual que en el ordenador, y puedes inspeccionar la página desde DevTools en el escritorio. Cómo activar la depuración USB se explica en probar en Android.
Método 3: un túnel con una URL HTTPS pública
Un túnel da a tu servidor local una dirección pública temporal. Funciona en cualquier red y te da HTTPS, que algunas funciones necesitan (service workers, geolocalización, cámara, cookies seguras).
Dos opciones habituales:
- Cloudflare Tunnel:
cloudflared tunnel --url http://localhost:5173muestra una URL temporal detrycloudflare.com. - ngrok:
ngrok http 5173muestra una URL de reenvío (requiere una cuenta gratuita).
Mientras el túnel está activo, cualquiera con la URL puede acceder a tu servidor de desarrollo, así que ciérralo al terminar y no expongas paneles de administración ni datos reales. Algunos frameworks bloquean por defecto los nombres de host desconocidos; Vite, por ejemplo, necesita el dominio del túnel en server.allowedHosts.
Método 4: emuladores y simuladores
- Simulator de Xcode (Mac): comparte la red del Mac, así que
http://localhost:5173funciona directamente en el Safari simulado. Mira probar en iPhone. - Emulador de Android Studio:
localhostapunta al propio emulador. Usahttp://10.0.2.2:5173para llegar a tu ordenador.
Qué método usar
| Situación | Usa |
|---|---|
| Revisar el diseño mientras programas | Vista móvil en Chrome de escritorio |
| Probar táctil y teclado en tu móvil, en casa | Misma wifi + IP local |
| Móvil Android, red de oficina, necesitas DevTools | Reenvío de puertos de Chrome |
| Función que solo va con HTTPS o compartir con un compañero | Túnel |
| Comportamiento de Safari sin iPhone | Simulator de Xcode |
Preguntas frecuentes
¿Por qué mi móvil no abre localhost?
En el móvil, localhost es el propio móvil. Usa la IP local de tu ordenador y haz que el servidor de desarrollo escuche en la red con --host o 0.0.0.0.
¿Cómo pruebo localhost en un iPhone?
Con la misma wifi y la IP del ordenador, con un túnel o con el Simulator de Xcode en un Mac, donde localhost funciona directamente.
¿Puedo ver la versión móvil de localhost sin móvil?
Sí. Usa una extensión de vista móvil que admita páginas locales o el modo dispositivo de DevTools.