Cómo usar el emulador de navegador móvil en Chrome, Firefox, Edge y Opera

¿Necesita acceder a un emulador de navegador de teléfono inteligente en su PC para probar la versión móvil de un sitio web que le interesa? Tal vez sea un desarrollador web, o quiera convertirse en uno, y necesita simular un navegador móvil para el proyecto en el que está trabajando. Independientemente de sus motivos, a continuación se explica cómo acceder a un emulador de navegador móvil en Google Chrome, Mozilla Firefox, Microsoft Edge y Opera:

Pasos rápidos:

Cómo encender y usar el emulador de navegador móvil en Google Chrome

  1. En Google Chrome, navegue hasta el sitio web que desea ver en el emulador del navegador móvil.
  2. Presione las teclas CTRL + MAYÚS + I en su teclado para acceder a las herramientas de desarrollo.
  3. Presione CTRL + Shift + M en su teclado para abrir la barra de herramientas del dispositivo,
  4. Haga clic en en la barra de herramientas del dispositivo y elija el dispositivo móvil que desea emular.

Cómo encender y usar el emulador de navegador móvil en Google Chrome

En Google Chrome, navegue hasta el sitio web que desea ver en el emulador del navegador móvil. Luego, presione el CTRL + MAYÚS + I teclas del teclado o, con el mouse, haga clic en los tres puntos verticales en la esquina superior derecha para abrir el “Personaliza y controla Google Chrome” menú. Escoger Más herramientas, seguido por Herramientas de desarrollo.

Acceda a las herramientas para desarrolladores en Google Chrome

Haga clic o toque en el “Alternar barra de herramientas del dispositivo” (parece un teléfono inteligente al lado de una tableta) o presione CTRL + Mayús + M en tu teclado. Esto activa la barra de herramientas del dispositivo donde se carga la página móvil. De forma predeterminada, la barra de herramientas del dispositivo utiliza un Sensible plantilla para el sitio que cargó. Haga clic en él y elija el dispositivo móvil que desea emular. Sus opciones incluyen muchos iPhones, iPads, Surface Duo, dos dispositivos Samsung Galaxy y un simulador de navegador móvil Moto G4 para PC.

Cómo habilitar el emulador de navegador móvil en Google Chrome

INCLINAR: Desafortunadamente, puede usar el CTRL + Mayús + M atajo de teclado solo después de habilitar las herramientas de desarrollador.

Navegue por el sitio que desea probar, cambie entre los diferentes teléfonos inteligentes y tabletas y vea cómo se ve. Cuando haya terminado, presione el X (Cerrar) en la esquina superior derecha de las herramientas de desarrollo de Google Chrome para volver al modo de navegación de escritorio estándar.

Cerrar el emulador del navegador móvil Google Chrome

INCLINAR: Si es un gran usuario de Google Chrome, es posible que también desee aprender cómo usar las opciones de control de medios de Google Chrome.

Cómo encender y usar el emulador de navegador móvil en Mozilla Firefox

En Mozilla Firefox, abra el sitio para el que desea utilizar un simulador de navegador móvil. Luego, presione CTRL + Mayús + M en su teclado o haga clic en el botón de hamburguesa en la esquina superior derecha para abrir el menú de Firefox y elija Desarrollador web.

Acceda a las herramientas de desarrollador web en Firefox

Verá un menú lleno de herramientas que son útiles para los desarrolladores web. En la lista, seleccione “Modo de diseño receptivo” y este modo particular de ver una página web se carga en Firefox.

Elija el modo de diseño receptivo en Firefox

Firefox habilita Modo de diseño receptivo. En la parte superior de la ventana, verá los parámetros utilizados por este modo de emulación. Si no se selecciona ningún dispositivo, haga clic o toque en Sensible para abrir una lista desplegable con los dispositivos disponibles para la emulación y luego elija el que desea simular.

Puede simular el navegador móvil para muchos iPhones, iPad, Kindle Fire (Firefox es el único navegador que ofrece esta opción de emulación) y dispositivos Samsung Galaxy S9.

Utilice el emulador de navegador móvil en Firefox

Cuando haya terminado de probar con el emulador del navegador del teléfono inteligente, presione el X (Modo de diseño receptivo cercano) en la esquina superior derecha de Mozilla Firefox.

Cierre el emulador del navegador móvil en Firefox

Ha vuelto al modo de exploración de escritorio estándar.

Cómo encender y usar el emulador de navegador móvil en Microsoft Edge

Microsoft Edge usa el mismo motor de renderizado que Google Chrome y ofrece los mismos emuladores de navegador de teléfonos inteligentes. Para acceder a ellos, visite el sitio web que desea probar y presione el botón CTRL + MAYÚS + I teclas del teclado o haga clic en los tres puntos horizontales (“Configuración y más”) en la esquina superior derecha de Microsoft Edge. En el menú que aparece, vaya a Más herramientas y luego a Herramientas de desarrollo.

Acceda a las herramientas para desarrolladores en Microsoft Edge

Haga clic en el “Alternar emulación de dispositivo” (parece un teléfono inteligente al lado de una tableta) o presione CTRL + Mayús + M en tu teclado. Esto activa la barra de herramientas del emulador del navegador móvil. De forma predeterminada, utiliza un Sensible plantilla para el sitio que cargó. Haga clic en él y elija el dispositivo móvil que desea emular. Sus opciones incluyen los mismos teléfonos inteligentes y tabletas que Google Chrome.

Acceda al emulador de navegador móvil en Microsoft Edge

Explore el sitio que desea probar, cambie entre los diferentes dispositivos móviles y vea cómo se ve. Cuando haya terminado, presione el X (Cerrar) en la esquina superior derecha de Microsoft Edge.

Cierre el emulador de navegador móvil en Microsoft Edge

Ahora ha vuelto al modo de exploración de escritorio estándar.

Cómo encender y usar el emulador de navegador móvil en Opera

En Opera, visite la página web que desea ver como si estuviera usando un dispositivo móvil. Luego haga clic en el icono de Opera en la parte superior izquierda (“Personalizar y controlar Opera”). En el menú que se abre, elija Desarrollador seguido por Herramientas de desarrollo. Si prefiere el teclado, presione el CTRL + Mayús + I claves para el mismo resultado.

Acceda a las herramientas de desarrollador en Opera

La Herramientas de desarrollo se muestran en el lado derecho de la ventana del navegador. Haga clic en el “Alternar barra de herramientas del dispositivo” (parece un teléfono inteligente al lado de una tableta) o presione CTRL + Mayús + M en tu teclado. La barra de herramientas del dispositivo se muestra a la izquierda. De forma predeterminada, utiliza un Sensible plantilla para el sitio que cargó. Haga clic en él y elija el dispositivo móvil que desea emular de la lista de opciones. Opera ofrece los mismos emuladores de navegador móvil que Google Chrome y Microsoft Edge, ya que se basa en el mismo motor de renderizado (Chromium).

Accede al emulador de navegador móvil en Opera

Cuando haya terminado de probar, presione el botón X (Cerrar) en la esquina superior derecha para volver al modo de navegación de escritorio estándar.

Cierre el emulador de navegador móvil en Opera

¿Está satisfecho con las opciones de emulación de navegador móvil disponibles?

Ahora sabe cómo emular todo tipo de dispositivos móviles en su navegador web favorito. Sin embargo, puede notar que la mayoría de los navegadores web ofrecen las mismas opciones de emulación que favorecen a los iPhones y iPads. Si desea emular un teléfono inteligente o tableta Android moderno, sus posibilidades son bastante escasas, incluso en Google Chrome, el navegador desarrollado por la compañía detrás de Android. Si desea obtener los mejores resultados, es posible que deba usar dos navegadores para esta tarea: Chrome y Firefox, o Firefox y Edge u Opera. Antes de ir, díganos qué piensa acerca de las opciones disponibles.