Nuevo modo de emulación de móviles en las herramientas de Chrome

Las nuevas versiones de Google Chrome han incorporado a su herramienta para desarrolladores algo muy interesante: un emulador de dispositivos móviles.

Es una herramienta que puede ser muy útil para los que utilicéis Chrome.

Está un poco oculta a primera vista. Primero activamos la Herramienta para desarrolladores (Menu > Herramientas > Herramientas para Desarrolladores, Cmd+Opt+I en Mac o F12 / Ctrl+Shift+I en Windows y Linux). Luego hay que hacer click dentro de la herramienta en Settings (el icono de la rueda dentada arriba de la herramienta a la derecha). Cuando lo activé en mi navegador había en el menú a la izquierda una opción que se llamaba Overrides en la que había que activar “Show ‘Emulation’ view in console drawer”, pero veo que esto ha cambiado y ahora está en General > Appearance, donde se activa “Show ‘Emulation’ view in console drawer”:

Modo emulación de móviles en Google Chrome

Una vez que ya esté activado ya podéis empezar a usarlo. Para ello hay que hacer click en el botón de mostrar consola:

Modo emulación Google Chrome

Como ves en la pantalla hay un desplegable que se llama “Device (Dispositivo)” que tiene una gran cantidad de opciones pre-configuradas incluyendo: iPhones, iPads, Kindles, tabletas Nexus, teléfonos Samsung Galaxy o Sony, etc.

La opción “Screen (Pantalla)” os permite ajustar manualmente el ancho de pantalla o el Pixel ratio (2 para Retina) e incluso seleccionar un CSS media, como print.

Emular pantalla en Google Chrome

Ojo, hay veces que tendréis que refrescar el navegador para que la web se ajuste a la configuración que hemos escogido.

En la siguiente opción cambias el “User Agent”, que viene por defecto con Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5

La siguiente es “Sensors” donde puedes activar por ejemplo una emulación de “touch screen” en vez del click del cursor. Verás entonces que sobre la pantalla de arriba aparece un círculo gris semitransparente que hace las funciones de tu dedo. Se pueden emular movimientos especiales con dos dedos pulsando a la vez la tecla Shift y el botón del ratón (por ejemplo para hacer zoom como en un móvil).

Para salir del modo de emulación vuelves a la opción del menú “Device” y haces click en el botón “Reset”.

Todo esto por supuesto que no sustituye al dispositivo real, ni está a la altura de servicios como Browserstack para emular en diferentes dispositivos, pero es una herramienta muy útil para comprobaciones rápidas a medida que vamos desarrollando.

7 comentarios en “Nuevo modo de emulación de móviles en las herramientas de Chrome

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.