Emular dispositivos móviles (emulación de dispositivo)

Use la herramienta Emulación de dispositivo, a veces denominada Modo de dispositivo, para aproximar el aspecto y la respuesta de la página en un dispositivo móvil.

DevTools proporciona las siguientes características de emulación de dispositivos móviles:

Limitaciones

Emulación de dispositivo es una aproximación de primer orden de la apariencia de la página en un dispositivo móvil. La emulación de dispositivo no ejecuta realmente el código en un dispositivo móvil. En su lugar, simulará la experiencia del usuario móvil desde su portátil o escritorio.

Algunos aspectos de los dispositivos móviles nunca se emulan en DevTools. Por ejemplo, la arquitectura de las CPU móviles es diferente de la arquitectura de las CPU portátiles o de escritorio. En caso de duda, su mejor opción es ejecutar realmente su página en un dispositivo móvil.

Use depuración remota para interactuar con el código de una página desde el equipo mientras la página se ejecuta realmente en un dispositivo móvil. Puede ver, cambiar, depurar, generar perfiles o los cuatro mientras interactúa con el código. La máquina puede ser un cuaderno o un equipo de escritorio.

Simulación de una ventanilla móvil

Seleccione Alternar emulación de dispositivo (alternar barra de herramientas de dispositivo) o seleccione Personalizar y controlar DevTools (...) >Emulación de dispositivo para abrir la interfaz de usuario que le permite simular una ventanilla móvil.

La barra de herramientas del dispositivo

De forma predeterminada, la barra de herramientas del dispositivo se abre en modo de ventanilla dinámica.

Modo de ventanilla con capacidad de respuesta

Para probar rápidamente el aspecto de la página en varios tamaños de pantalla, arrastre los controladores para cambiar el tamaño de la ventanilla a las dimensiones necesarias. Puede escribir cualquier valor numérico en los cuadros de ancho y alto. Si selecciona un tamaño mayor que el disponible en la ventana del explorador, la ventanilla se escalará automáticamente para adaptarse a la ventanilla más grande.

En la ilustración siguiente, el ancho se establece en 626 y el alto se establece en 516.

Identificadores para cambiar las dimensiones de la ventanilla cuando se encuentra en modo de ventanilla dinámica

Si necesita más espacio en la pantalla, siempre puede cambiar la posición de DevTools como se explica en Cambiar ubicación de DevTools (Desacoplar, Acoplar a la parte inferior, Acoplar a la izquierda).

Mostrar consultas multimedia

Si ha definido consultas multimedia en la página, vaya a las dimensiones de la ventanilla donde surten efecto esas consultas multimedia mostrando puntos de interrupción de consulta multimedia encima de la ventanilla. Seleccione Más opciones>Mostrar consultas multimedia.

Mostrar consultas multimedia

Seleccione un punto de interrupción para cambiar el ancho de la ventanilla para que se desencadene la consulta multimedia.

Seleccione un punto de interrupción para cambiar el ancho de la ventanilla.

Establecer el tipo de dispositivo

Use la lista Tipo de dispositivo para simular un dispositivo móvil o un dispositivo de escritorio.

Lista Tipo de dispositivo

En la tabla siguiente se describen las diferencias entre las opciones de tipo de dispositivo disponibles. La columna Método de representación hace referencia a si Microsoft Edge representa la página como una ventanilla móvil o de escritorio. La columna Icono de cursor hace referencia al tipo de cursor que se muestra al mantener el puntero sobre la página. La columna Eventos desencadenados hace referencia a si la página se desencadena touch o click eventos al interactuar con la página.

Opción Método de representación Icono de cursor Eventos desencadenados
Móvil Móvil Círculo touch
Móvil (sin toque) Móvil Normal click
Escritorio Escritorio Normal click
Escritorio (táctil) Escritorio Círculo touch

Nota

Si no se muestra la lista Tipo de dispositivo, seleccione Más opciones>Agregar tipo de dispositivo.

Modo de ventanilla del dispositivo móvil

Para simular las dimensiones de un dispositivo móvil específico, seleccione el dispositivo en la lista Dispositivo .

Lista de dispositivos

Girar la ventanilla a orientación horizontal

Pruebe la página web en orientación horizontal.

  1. Para girar la ventanilla a orientación horizontal, seleccione Girar (Girar):

    Página mostrada en orientación horizontal

    El botón Girar desaparece si la barra de herramientas del dispositivo es estrecha.

  2. Si es necesario, para acceder al botón Girar , aumente el ancho de la barra de herramientas del dispositivo.

    La barra de herramientas del dispositivo

Vea también Establecer orientación, a continuación.

Mostrar marco de dispositivo

Para simular las dimensiones de un dispositivo móvil específico, abra Más opciones y, a continuación, seleccione Mostrar marco de dispositivo para mostrar el marco del dispositivo físico alrededor de la ventanilla.

Elemento de menú Mostrar marco de dispositivo

Si no se muestra un marco de dispositivo para un dispositivo determinado, significa que DevTools no tiene arte para ese dispositivo.

Marco del dispositivo para el iPhone 6:

Marco del dispositivo para el iPhone 6

Adición de un dispositivo móvil personalizado

Si la opción de dispositivo móvil que necesita no está incluida en la lista predeterminada, puede agregar un dispositivo personalizado. Para agregar un dispositivo personalizado:

  1. Seleccione la lista >De dispositivos Editar.

    Selección de Editar en la lista Dispositivo

  2. Seleccione Agregar dispositivo personalizado.

  3. En Dispositivos emulados, escriba un nombre de dispositivo, un ancho de pantalla y un alto de pantalla para el dispositivo personalizado. La proporción de píxeles del dispositivo, la cadena del agente de usuario y los campos de tipo de dispositivo son opcionales. El campo de tipo de dispositivo tiene como valor predeterminado Mobile.

    Adición de un dispositivo personalizado

Mostrar reglas

Si necesita medir las dimensiones de la pantalla, puede usar reglas para medir el tamaño de la pantalla en píxeles. Seleccione Más opciones>Mostrar reglas para mostrar las reglas arriba y a la izquierda de la ventanilla.

Elemento de menú Mostrar reglas

Las reglas aparecen arriba y a la izquierda de la ventanilla:

Reglas arriba y a la izquierda de la ventanilla

Zoom de la ventanilla

Para probar la apariencia de la página en varios niveles de zoom, use la lista Zoom para acercar o alejar.

La lista Zoom

Limitación de la red y la CPU

Los dispositivos móviles suelen tener restricciones de red y CPU. Pruebe la rapidez con la que se carga la página y cómo responde a diferentes velocidades de Internet y CPU.

  1. Seleccione Lista de limitaciones y cambie el valor preestablecido a Móvil de nivel medio o Móvil de gama baja.

    • El dispositivo móvil de nivel medio simula fast 3G y limita la CPU. Es cuatro veces más lento de lo normal.
    • El móvil de gama baja simula slow 3G y limita la CPU. Es seis veces más lento de lo normal.

    Toda la limitación se basa en la capacidad normal de su portátil o escritorio.

    La lista Limitación de la barra de herramientas del dispositivo

    Si la lista Limitación está oculta, la barra de herramientas del dispositivo es demasiado estrecha.

  2. Si es necesario, para acceder a la lista Limitación, aumente el ancho de la barra de herramientas del dispositivo.

    La barra de herramientas del dispositivo

Limitar solo la CPU

Para limitar solo la CPU y no la red:

  1. Seleccione el panel Rendimiento y seleccione Configuración de captura (Configuración de captura).

  2. Seleccione Cpu>4x slowdown o 6x slowdown.

    Lista de CPU en el panel Rendimiento

Limitar solo la red

Para limitar solo la red y no la CPU:

  1. Seleccione la herramienta Red y, a continuación, seleccione Online>Fast 3G o Slow 3G.

    La lista Limitación en el panel Red

    O bien, presione CtrlPShift++(Windows, Linux) oP+Shift+Command (macOS) para abrir el menú Comando, empiece a escribir 3gy, a continuación, seleccione Habilitar limitación rápida de 3G o Habilitar limitación lenta de 3G.

    Selección de Habilitar limitación rápida o lenta de 3G en el menú Comando

También puede establecer la limitación de red desde el panel Rendimiento :

  1. Seleccione Configuración de captura (Configuración de captura) y seleccione la lista Red y cambie el valor preestablecido a Fast 3G o Slow 3G.

    Configuración de la limitación de red desde el panel Rendimiento

Reemplazar geolocalización

Si la página depende de la información de geolocalización de un dispositivo móvil para representarse correctamente, proporcione diferentes geolocalizaciones mediante la interfaz de usuario que reemplaza la geolocalización.

  1. Seleccione Personalizar y controlar DevTools (...) >Más sensores de herramientas>.

    Sensores para geolocalización

    O bien, abra el menú Comando seleccionando Ctrl+P+Shift(Windows, Linux) o Command+Shift+P (macOS). Escriba Sensors y, a continuación, seleccione Mostrar sensores.

    Mostrar sensores para geolocalización, desde el menú Comandos

En el panel Sensores , para seleccionar una de las ubicaciones preestablecidas, use el menú desplegable Ubicación . Para especificar una ubicación personalizada, seleccione Otro y escriba las coordenadas de la ubicación personalizada. Para probar cómo se comporta la página cuando la información de ubicación no está disponible, seleccione Ubicación no disponible.

Panel Sensores con una ubicación preestablecida seleccionada

Establecer orientación

Si la página depende de la información de orientación de un dispositivo móvil para representarse correctamente, abra la interfaz de usuario de orientación.

  1. Seleccione Personalizar y controlar DevTools (...) >Más sensores de herramientas>.

    Comando Sensores en el menú Más herramientas

    O bien, abra el menú Comando presionando Ctrl++ShiftP (Windows, Linux) oPCommand+Shift+(macOS). Escriba Sensorsy, a continuación, seleccione Mostrar sensores.

    Mostrar sensores para orientación

    En el panel Sensores , puede seleccionar una orientación preestablecida en el menú desplegable Orientación .

  2. Para escribir su propia orientación, seleccione Orientación personalizada y escriba sus propios valores alfa, beta y gamma .

    Opciones de orientación en el panel Sensores

Establecer la cadena del agente de usuario

Si la página depende de la cadena del agente de usuario de un dispositivo móvil para representarse correctamente, use el panel Condiciones de red para proporcionar diferentes cadenas de agente de usuario.

  1. Seleccione Personalizar y controlar DevTools (...) >Más herramientas>Condiciones de red.

    Entrada de condiciones de red en el menú Más herramientas

    O bien, abra el menú Comando presionando Ctrl++ShiftP (Windows, Linux) oPCommand+Shift+(macOS). Escriba Network conditionsy seleccione Mostrar condiciones de red.

    Mostrar condiciones de red

  2. Junto a Agente de usuario, desactive la casilla Usar el valor predeterminado del explorador .

  3. Seleccione Personalizado para seleccionar en una lista de cadenas de agente de usuario predefinidas.

  4. Para escribir su propia cadena de agente de usuario, escriba la cadena en Escriba un agente de usuario personalizado.

    Establecer la cadena del agente de usuario en Microsoft Edge en macOS

Ver también

Establecimiento de sugerencias de cliente de agente de usuario

Si el sitio emplea sugerencias de cliente de agente de usuario, use el panel Dispositivos emulados para agregar dispositivos y establecer sugerencias de cliente de agente de usuario.

  1. Haga clic con el botón derecho en una página web y, a continuación, seleccione Inspeccionar.

  2. Seleccione Dispositivos de configuración>.

  3. En el panel Dispositivos emulados, seleccione Agregar dispositivo personalizado y expanda sugerencias de cliente de agente de usuario.

    Configuración de sugerencias de cliente de agente de usuario

  4. Escriba un nombre único en el cuadro de texto Nombre del dispositivo , como Test101.

  5. Acepte los valores predeterminados o cambie Width, Height y Device pixel ratio según sea necesario.

  6. Establezca sugerencias de cliente de agente de usuario como se indica a continuación:

    • Marca y versión, como Edge y 92. Seleccione + Agregar marca para agregar varios pares de marca y versión.
    • Versión completa del explorador , como 92.0.1111.0.
    • Plataforma y versión como Windows y 10.0.
    • Arquitectura como x86.
    • Modelo de dispositivo como Galaxy Nexus.

    Puede establecer o cambiar cualquiera de las sugerencias de cliente user-agent. No hay valores obligatorios.

  7. Haz clic en Agregar. El nuevo dispositivo se muestra en el estado seleccionado en la parte superior de la lista Dispositivos emulados .

También puede establecer sugerencias de cliente de agente de usuario en la herramienta Red ; consulte Referencia de características de red.

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licencia de Creative Commons Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.