Cómo probar localhost en el móvil (teléfono y vista móvil)

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:

• Modo dispositivo de Chrome DevTools: abre DevTools, activa la barra de dispositivos con Ctrl + Shift + M (Cmd + Shift + M en Mac) y elige un móvil. Mira la guía del emulador móvil de Chrome.
• Una extensión de vista móvil que admita páginas locales. Mobile View Extension funciona en localhost y mantiene la vista móvil al pasar de una página local a otra, así que puedes dejarla abierta mientras desarrollas.

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:

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 localhost escritas a mano. Si tu front llama a http://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 permiten localhost.

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:

1. Abre chrome://inspect/#devices en el ordenador.
2. Haz clic en Port forwarding, añade tu puerto (por ejemplo 5173) y el destino localhost:5173, y marca Enable port forwarding.
3. En el móvil, abre http://localhost:5173 en 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:5173 muestra una URL temporal de trycloudflare.com.
• ngrok: ngrok http 5173 muestra 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:5173 funciona directamente en el Safari simulado. Mira probar en iPhone.
• Emulador de Android Studio: localhost apunta al propio emulador. Usa http://10.0.2.2:5173 para llegar a tu ordenador.

Qué método usar

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 el modo dispositivo de DevTools o una extensión de vista móvil que admita páginas locales.