Cómo emular navegación móvil desde Google Chrome

Uno de los grandes desafíos que enfrentamos al desarrollar sitios Web, es adaptarnos a la diversidad de usuarios que eventualmente (y si nos va bien) tendremos. Ahora, además de preocuparnos de revisar como nuestro sitio se ve en distintos navegadores, sistemas operativos y resoluciones de pantalla, tenemos que tomar en cuenta los distintos dispositivos desde los cuales pueden entrar (teléfonos móviles, tablets, consolas y televisores por ejemplo) y como es la experiencia, tanto visual como de accesibilidad y usabilidad, en cada uno de ellos. Lamentablemente, por el costo que implica, no siempre podemos contar con dispositivos reales para hacer estas pruebas (a no ser que seas Dexter).

Es por eso que hoy, en CLH, les enseñaremos un pequeño truco para hacer pruebas directamente desde tu Google Chrome, sin extensiones, ni programas extras, solo en unos cuantos pasos.

El detalle, como siempre (o as usual si le haces al persueychon y al éxito), después del salto.

Implementos necesarios:

• Google Chrome (puedes descargarlo desde este enlace).

¿Cómo lo hago?

 1.- Lo primero que haremos, será abrir Chrome, y probaremos una URL cualquiera (en este caso por ej. probaremos con el sitio de IGN, que su versión móvil se encuentra en un dominio distinto al de su versión normal):

2.- Ahora hacemos click derecho sobre cualquier parte del sitio, y seleccionamos la opción “Inspeccionar elemento”:

3.- Al seleccionar la opción, se abrirá el panel de desarrollo de Chrome, el cual nos muestra varias opciones y elementos que no detallaremos ahora. El que nos interesa está al extremo derecho y es la opción “Show drawer”, por lo que haremos click ahí:

4.- Con esto se abrirá un panel inferior, el cual nos presentará nuevas opciones. En este panel, debemos seleccionar la opción “Emulation”.

5.- Y esta opción nos presenta un listado de dispositivos móviles que pueden ser emulados a través de Chrome. Desde smartphones conocidos (como iPhones desde el 3gs al 5 o la familia de los Nexus, Galaxy o Xperia para Android) hasta tablets (como iPads o varios modelos de tablets con Android):

6.- Ahí solo debemos seleccionar el dispositivo de la lista que queremos visualizar, y hacemos click en Emulate. Al hacer click ahí, automáticamente cambiará el tamaño de visualización del sitio:

Y ahí podemos ver que cambió al tamaño de pantalla del dispositivo que seleccionamos. Sin embargo, también podemos ver que el contenido del sitio se ve extraño y no es el mismo que veríamos al acceder desde el teléfono. Y esto es porque al hacer click en Emulate, solo ajustamos el tamaño, pero el contenido descargado ya fue emitido como si hubiésemos entrado desde un navegador normal, por lo que para poder ver el contenido correcto, debemos actualizar la página:

Al recargar, podemos ver lo siguiente:

1. Nos redirecciona automáticamente al dominio del sitio móvil (en este caso http://m.ign.com).
2. Nos muestra el contenido correspondiente al sitio Web móvil.
3. Al detectar que es un dispositivo con Android, nos indica que hay una app nativa y nos ofrece instalarla.

¡Y así de simple!, emulamos contenido en Chrome, tal como si estuviésemos navegando desde un teléfono móvil. Este truco, si bien nunca reemplazará a un dispositivo real, nos permite acercarnos bastante a la experiencia e ir probando algunos ajustes que en otra instancia no podríamos.

Así que a probar 😀

Como siempre, les recordamos que este tutorial ha sido desarrollado, probado y documentado por el equipo de CLH, por lo que cuenta con nuestro Sello de Garantía.

Cualquier duda y/o comentario, pueden dejarnos unas líneas a continuación.

Esperamos que este tutorial sea de utilidad para uds.

¡Hasta la próxima!