¿Cómo pruebo localhost en mi teléfono?

Inicia un túnel localhost con PortPreview para obtener una URL HTTPS pública, luego abre esa URL en el navegador de tu teléfono. El túnel reenvía el tráfico a tu servidor de desarrollo local.

¿Por qué mi teléfono no puede acceder a localhost en mi portátil?

Las direcciones localhost son interfaces loopback solo alcanzables en la máquina que corre el servidor. Un túnel crea una URL pública que reenvía a tu proceso local.

¿Necesito HTTPS para pruebas móviles?

Sí para muchas funciones móviles, incluidas cookies seguras, service workers y redirecciones de OAuth. Los túneles localhost proveen HTTPS por defecto sin configuración de certificados.

Pruebas móviles con un túnel localhost

Puedes probar tu app en dispositivos móviles mientras corre en localhost exponiéndola a través de una URL HTTPS pública. Teléfonos y tablets no pueden alcanzar 127.0.0.1 en tu portátil, pero un túnel localhost salva esa brecha al instante.

Por qué los móviles no pueden acceder a localhost

Cuando corres un servidor de desarrollo en tu portátil, escucha en una dirección loopback (127.0.0.1 o localhost) que solo tu máquina alcanza. Aunque tu teléfono esté en la misma red Wi-Fi, escribir http://192.168.x.x:3000 suele fallar por reglas de firewall, requisitos de HTTPS o políticas CORS.

Un túnel localhost le da a tu teléfono una URL HTTPS estándar que reenvía a tu proceso local — sin configuración de red.

Lo que las pruebas móviles capturan y los emuladores no

Objetivos táctiles reales, comportamiento de scroll y manejo de gestos.
Tamaños de viewport reales en dispositivos iOS y Android.
Peculiaridades de navegadores móviles (Safari, Chrome, WebViews in-app).
Rendimiento en hardware real, no entornos simulados.
Comportamiento de cámara, geolocalización y APIs específicas del dispositivo.
Redirecciones de OAuth y deep-link en navegadores móviles.

Paso a paso: pruebas móviles con PortPreview

Arranca tu servidor de desarrollo localmente (por ejemplo npm run dev en el puerto 3000).
Ejecuta npx portpreview 3000 para obtener una URL HTTPS pública.
Abre la URL en el navegador de tu teléfono (o escanea un código QR si tu equipo comparte enlaces así).
Prueba layouts responsive, navegación, formularios y flujos de auth en el dispositivo real.
Comparte la misma URL con compañeros de QA o diseño para revisión multi-dispositivo.

Checklist de pruebas móviles

Layout responsive

Verifica breakpoints, escalado de fuentes, carga de imágenes y comportamiento de overflow en teléfonos y tablets.

Interacciones táctiles

Prueba objetivos de toque, gestos de swipe, pull-to-refresh y headers fijos bajo entrada táctil real.

Flujos de autenticación

Las redirecciones de OAuth y los logins por magic-link se comportan distinto en navegadores móviles. Prueba el ciclo completo de auth en el dispositivo. Mira pruebas de callbacks OAuth para detalles de configuración.

Rendimiento

Mide carga de página, impacto del bundle JavaScript y optimización de imágenes en dispositivos de gama media — no solo tu portátil de desarrollo.

Consejos para pruebas móviles de localhost fiables

Usa HTTPS: muchas funciones móviles (service workers, cookies seguras, geolocalización) requieren HTTPS, que los túneles proveen por defecto.
Desactiva la caché durante las pruebas: refresco forzado o modo incógnito para evitar assets obsoletos.
Prueba múltiples dispositivos: iOS Safari y Android Chrome manejan CSS y JavaScript de forma distinta.
Mantén el túnel activo: la URL deja de funcionar cuando cierras la sesión del CLI.

Comparte vistas previas móviles con tu equipo

En vez de grabar capturas de pantalla, comparte la URL del túnel para que los compañeros prueben en sus propios dispositivos. Lee cómo compartir tu servidor de desarrollo local para flujos de colaboración.

Empieza PortPreview gratis para pruebas móviles rápidas desde localhost.