Emulador de dispositivos móviles escondido en Google Chrome

Pues está algo escondido, pero no he visto nada mejor ni más útil para el diseño responsive. Con este emulador incorporado en Google Chrome, puedes ver el aspecto de cualquier web en los dispositivos móviles más utilizados hasta el momento y hacer pruebas en cambios de estilos CSS o etiquetas HTML sobre la página, como lo haríamos en una web normal utilizando las herramientas para desarrolladores.

¿Cómo se configura?

  1. Mostrar las herramientas para desarrolladores y hacer clic en el icono «Settings».
  2. En la parte izquierda de la pantalla, en el menú «Settings» hacer clic en Override.
  3. Hacer clic en el checkbox «Show ‘Emulation’ view in console drawer»
  4. Cerrar la ventanita de Settings y hacer clic en el botón «Show Console» que está a la izquierda del de «Settings»
  5. Aparece una nueva ventanita con tres pestañas. Hacer clic en «Emulation»
  6. ¡¡¡¡¡¡¡¡¡¡Aparece una lista de dispositivos móviles!!!!!!!!!!!!!!
  7. Ahora solo hay que elegir el dispositivo y pulsar en emular para que aparezca la web tal como se vería en dicho dispositivo… im-pre-sio-nan-te!!!

 

Y lo mejor de todo es que podemos utilizar la lupa para seleccionar elementos de la página, cambiar estilos y ver cómo quedaría. Mucho mejor que hacer los cambios a ciegas, verdad???

Una vez más Google me vuelve a sorprender….

 

Comments

  • Alfonso Castelao
    Responder

    Te agradezco mucho la info, gracias a ti aprendí cómo hacerlo, pero como veo que es del año pasado el post, te cuento que quizá ahora es aún más fácil.

    Te pones en cualquier parte de la web – botón derecho – inspeccionar elemento y, arriba a la izquierda de la ventana que muestra, aparece un icono de un smartphone, lo pinchas y aparecerá la consola en la que puedes elegir el visionado con el dispositivo que quieres emular.

    Saludos!

    • pablocia

      Pues efectivamente Alfonso, esto cambia demasiado rápido jejeje. Solo hay acceder a herramientas para webmasters en Chrome (clic derecho e inspeccionar elemento o F12) y hacer clic en el icono con forma de movil de la parte superior izquierda del panel de herramientas.

      Muchas gracias por tu participación

      Saludos!