Cargando



Emular dispositivos móviles en Google Chrome

Cómo emular aspecto de dispositivos móviles usando Google Chrome desde Windows 10. Podremos ver una web modo mobile.


may 03 2018 16:54
Intermedio
Total de Apartados : 4
may 07 2018 16:42

De tu interés 👌

Al momento de construir un sitio o aplicación web, siempre nos queda la tarea de comprobar si todo funciona de manera correcta en un dispositivo móvil o incluso Tablet. Si estamos trabajando en desarrollo no tenemos cómo comprobarlo, ya que tendríamos primero que enviar nuestros cambios al servidor y allí consultarlo en nuestro dispositivo móvil.

 

Pero no debemos preocuparnos ya que Google Chrome posee una funcionalidad que nos permite con unos simples pasos verificar cómo trabaja nuestro sitio web o aplicación en el dispositivo móvil que deseemos.

 


1. Emular dispositivo móvil en Google Chrome


Como decimos, Google Chrome incorpora una herramienta orientada a desarrolladores con la que podemos acceder a opciones excluidas a simple vista. Una de ellas es el Emulador de dispositivos móviles dentro del Device Mode.

 

Paso 1

Tendremos un menú en la parte inferior que se desplegará, el cual nos muestra el código HTML de la página. Para mostrar el panel para desarrolladores de Chrome iremos a “Menú / Más herramientas / Herramientas para desarrolladores” o bien haremos la siguiente combinación de teclas:

 

En Windows y Linux

 

Ctrl + Mayús + M

 

 

En Mac

 

+ + M

 

 

1-herramientas-para-desarrolladores.png

 

 

Paso 2

Veremos que se nos abre un panel de código. Nos fijamos en el icono que se corresponde con el “Device Mode” y que estará activado cuando aparezca en azul. Pulsamos en él para activarlo.

 

2-activar-device-mode.png

 

Paso 3

Estando allí nos dirigimos al menú superior encima de la página emulada y seleccionamos el dispositivo que deseamos emular, en este caso seleccionamos Apple iPhone x y refrescamos para que los cambios se hagan efectivos. Con tamos con una amplia variedad de presets configurados para que en un clic tengamos nuestro modelo simulado.

 

3-simular-movil-en-pc.png

 

Paso 4

Si queremos crear unas medidas personalizas iremos hasta donde aparece el modelo del terminal y pulsamos en “Edit”.

 

4-emularo-movil-en-chrome.png

 

Paso 5

Nos aparecerán aquellos modelos que están configurador previamente o bien podemos añadir uno de forma personalizada pulsando en “Add custom device”.

 

5-add-custom-device.png

 

Paso 6

En las opciones dentro del Device Mode tendremos la posibilidad de activar o no los sensores que simulan un touch screen.

 

6-touch-enabled.png

 

 

Nota
Pulsa en el icono de tres puntos para que aparezcan, entre otras, la opción de “Sensors”

 


2. Emular la conectividad de red móvil en Google Chrome


El estado de la red y su testeo gracias a Chrome nos permite testear nuestra web mediante diferentes tipos de conexiones de red como la 3G e incluso sin conexión.

 

Paso 1

También podemos emular la red en la que nos encontremos. Para ello nos vamos a la pestaña de “Network” y seleccionamos un tipo de red en la lista plegable.

 

7-emular-conectividad-de-red-chrome.png

 

Paso 2

Si hemos establecido un límite veremos un aviso de advertencia para recordarnos que lo tenemos habilitado.

 

8-limite-conexion-chrome.png

 

 


3. Agregar límites a la conectividad de red móvil en Google Chrome

 

Paso 1

Este límite es importante y podemos establecer límites personalizados con condiciones configuradas por nosotros mismos. Para ello pulsamos la siguiente tecla para abrir el panel de Settings.

 

F1

 

Paso 2

Pulsamos en la opción de “Throttling”. Seleccionamos la posibilidad de “Add custom profile”.

 

9-Add-custom-profile.png

 

Paso 3

Aquí estableceremos la configuración de límites de forma personalizada.

 

10-add-profile-network.png

 

 


4. Abrir panel de condiciones de red en Google Chrome


Contamos con más opciones dentro del panel de desarrollador en el DevTools.

 

Paso 1

Para ello vamos al menú de tres puntos en la parte derecha y pulsar en “More tools” / “Network conditions”.

 

11-network-conditions.png

 

Paso 2

Desde aquí podemos habilitar o deshabilitar la caché y cambiar el agente que viene por defecto a uno personalizado.

 

12-network-conditions-chrome.png

 

Ya con esta funcionalidad no tendremos que buscar nuestro móvil para probar que nuestra página web o aplicación funcione de manera correcta, solo queda de cada quién explorar esta herramienta un poco más y utilizarla para acortar los tiempos de prueba e implementación.

 

Recopilación con los mejores emuladores de Android para descargar en PC o en Mac (algunos gratis) y poder descargar las aplicaciones del sistema operativo.


¿Te ayudó este Tutorial?


2 Comentarios

Genial tutoríal, nos va a servir a más de uno a trastear y testear en versión móvil.

Enrique Martin
jul 27 2015 21:47
Lo uso a menudo, ayuda más de lo que imagináis. Salen todas las versiones de mobile disponibles
No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X