Replica en móvil de la "Vista Previa" de navegador Web del sobremesa

Aunque usando el modo desarrollador en Chrome, es posible simular el aspecto del skin en formatos de pantalla tablet/móvil, he logrado que esa misma vista previa del sobremesa/portátil verla simultáneamente en el móvil/tablet, sin tener que copiar archivos, ni publicarlo en ningún servidor de internet.

Haciendo el curso de 3dVista de Mario en TVOPlus, en una de las prácticas hice un tour con un skin dual, sobremesa y móvil. A pesar de simular en Chrome la vista móvil, y aparentemente estar bien la versión móvil, cuando lo publiqué en mi servidor, en el móvil aparecían elementos del skin original sin los cambios que había probado en el ordenador.

Como la “vista previa” en Chrome esta usando una URL https://localhost:8888/… intenté conectarme desde el móvil al servidor web que “levanta” 3dVista en el ordenador, usando una URL del estilo https://Nombre_Mi_Ordenador:8888/… o https://ip_Mi_Ordenador:8888/… , pero no conseguí nada.

Buscando las carpetas internas de 3dVista, localicé donde se generan los archivos que el servidor web 3dVista usa para publicarlas.
Yo uso Windows 10, pero imagino que en MAC serán rutas similares.
Con el explorador de archivos localicé
%AppDATA%\tdv.show\Local Store\<clave-alfa-numerica>\export\

Bajo “Local store” hay muchas carpetas del estilo <clave-alfa-numerica>, y la localicé por la fecha.

Como no tengo ningún servidor Web instalado en mi ordenador, estuve buscando uno sencillo.
Localicé uno en GitHub
https://github.com/TheWaWaR/simple-http-server
pero en las búsquedas de Google también me aparecía HTTP Server de Python.
Como ya he trabajado con Python antes, me bajé la última versión, que hoy es la 3.10.4.

Dentro de Python se incluye una librería “http.server” que se puede levantar para que publique un directorio concreto.

Tras instalar Python (incluyendo “python” en el PATH, y resto de opciones por defecto), desde la línea de comandos ejecuto:
c:\usuario> python -m http.server -d “C:\Users\Usuario\AppData\Roaming\tdv.show\Local Store<clave-alfa-numerica>\export” 80

Al ver la respuesta:

Serving HTTP on :: port 80 (http://[::]:80/) …

ya podemos teclear en el móvil
http://Nombre_Mi_Ordenador/ o http://ip_Mi_Ordenador/

y tendremos la replica de la vista previa en nuestro móvil.
Si actualizamos el tour y volvemos a generar la “vista previa”, con refrescar la página en el móvil, veremos los cambios aplicados.

Espero que os sirva para poder depurar más ágilmente los tour.

1 me gusta

Muchas gracias por tomarte la molestia de explicarlo a la comunidad, realmente muy util tu aporte