Emular dispositivos móviles en Microsoft Edge DevToolsEmulate mobile devices in Microsoft Edge DevTools

Usa la emulación de dispositivo para aproximar el aspecto de la página y cómo responde en un dispositivo móvil.Use Device emulation to approximate how your page looks and responds on a mobile device. Microsoft Edge DevTools proporciona una colección de características que le ayudarán a emular dispositivos móviles.The Microsoft Edge DevTools provide a collection of features to help you emulate mobile devices. La colección incluye las siguientes características.The collection includes the following features.

LimitacionesLimitations

La emulación de dispositivo es una aproximación de primer orden de la apariencia de la página en un dispositivo móvil.Device emulation is a first-order approximation of the look and feel of your page on a mobile device. La emulación de dispositivos no ejecuta realmente el código en un dispositivo móvil.Device emulation does not actually run your code on a mobile device. En su lugar, simulas la experiencia del usuario móvil desde tu portátil o escritorio.Instead you simulate the mobile user experience from your laptop or desktop.

Algunos aspectos de los dispositivos móviles nunca se emulan en DevTools.Some aspects of mobile devices are never emulated in DevTools. Por ejemplo, la arquitectura de las CPU móviles es diferente de la arquitectura de las CPU de equipos portátiles o de escritorio.For example, the architecture of mobile CPUs is different than the architecture of laptop or desktop CPUs. Cuando hay dudas, la mejor opción es ejecutar la página en un dispositivo móvil.When in doubt, your best bet is to actually run your page on a mobile device. Use [Depuración remota][DevToolsRemoteDebugging] 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.Use [Remote Debugging][DevToolsRemoteDebugging] to interact with the code of a page from your machine while your page actually runs on a mobile device. Puede ver, cambiar, depurar, perfil o los cuatro mientras interactúa con el código.You may view, change, debug, profile, or all four while you interact with the code. El equipo puede ser un bloc de notas o un equipo de escritorio.Your machine may be a notebook or desktop computer.

Simular una ventanilla móvilSimulate a mobile viewport

Elija Alternar emulación de dispositivo ( Alternar barra de herramientas del dispositivo ) o elija Personalizar y  controlar DevTools ( ... ) emulación de dispositivo > para abrir la interfaz de usuario que permite simular una ventanilla móvil.Choose Toggle device emulation (Toggle Device Toolbar) or choose Customize and control DevTools (...) > Device emulation to open the UI that enables you to simulate a mobile viewport.

La barra de herramientas del dispositivo

De forma predeterminada, la barra de herramientas del dispositivo se abre en modo de ventanilla dinámica.By default the Device Toolbar opens in Responsive Viewport Mode.

Modo de ventanilla dinámicaResponsive Viewport Mode

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.To quickly test the look and feel of your page across multiple screen sizes, drag the handles to resize the viewport to your required dimensions. También puede especificar valores específicos en los cuadros de ancho y alto.You may also enter specific values in the width and height boxes. En la figura siguiente, el ancho se establece en 626 y el alto se establece en 516 .In the following figure, the width is set to 626 and the height is set to 516.

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

Mostrar consultas multimediaShow media queries

Si ha definido consultas multimedia en la página, vaya a las dimensiones de ventanilla donde esas consultas multimedia tengan efecto mostrando puntos de interrupción de consulta multimedia encima de la ventanilla.If you have defined media queries on your page, jump to the viewport dimensions where those media queries take effect by showing media query breakpoints above your viewport. Elija Más opciones Mostrarconsultas > multimedia.Choose More options > Show media queries.

Mostrar consultas multimedia

Elija un punto de interrupción para cambiar el ancho de la ventanilla para que se desencadene la consulta multimedia.Choose a breakpoint to change the width of the viewport so that the media query gets triggered.

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

Establecer el tipo de dispositivoSet the device type

Usa la lista Tipo de dispositivo para simular un dispositivo móvil o dispositivo de escritorio.Use the Device Type list to simulate a mobile device or desktop device.

La lista Tipo de dispositivo

En la tabla siguiente se describen las diferencias entre las opciones de tipo de dispositivo disponibles.The following table describes the differences between the available device type options. La columna Rendering method hace referencia a si Microsoft Edge representa la página como una ventanilla móvil o de escritorio.The Rendering method column refers to whether Microsoft Edge renders the page as a mobile or desktop viewport. La columna de icono cursor hace referencia al tipo de cursor que se muestra al pasar el mouse en la página.The Cursor icon column refers to what type of cursor is displayed when you hover on the page. La columna Eventos desencadenados hace referencia a si la página desencadena touch o eventos al interactuar con la click página.The Events triggered column refers to whether the page triggers touch or click events when you interact with the page.

OpciónOption Método renderingRendering method Icono de cursorCursor icon Eventos desencadenadosEvents triggered
MóvilMobile MóvilMobile CírculoCircle Función táctiltouch
Mobile (no touch)Mobile (no touch) MóvilMobile NormalNormal elige choose
EscritorioDesktop EscritorioDesktop NormalNormal elige choose
Escritorio (touch)Desktop (touch) EscritorioDesktop CírculoCircle Función táctiltouch

Nota

Si no se muestra la lista Tipo de dispositivo, elija Más opcionesAgregar tipo > de dispositivo.If the Device Type list is not displayed, choose More options > Add device type.

Modo de ventanilla de dispositivo móvilMobile Device Viewport Mode

Para simular las dimensiones de un dispositivo móvil específico, selecciona el dispositivo en la lista Dispositivo.To simulate the dimensions of a specific mobile device, select the device from the Device list.

Lista de dispositivos

Girar la ventanilla a orientación horizontalRotate the viewport to landscape orientation

Pruebe la página web en orientación horizontal.Test your webpage in landscape orientation.

Nota

El botón Girar desaparece si la barra de herramientas del dispositivo es estrecha.The Rotate button disappears if your Device Toolbar is narrow.

La barra de herramientas del dispositivo

Para obtener más información, vaya a Establecer orientación.For more information, navigate to Set orientation.

Mostrar fotograma del dispositivoShow device frame

Muestra el marco del dispositivo físico alrededor de la ventanilla cuando simulas las dimensiones de un dispositivo móvil específico, como un iPhone 6.Display the physical device frame around the viewport when you simulate the dimensions of a specific mobile device such as an iPhone 6.

  1. Abra Más opciones.Open More options.
  2. Elija Mostrar marco de dispositivo.Choose Show device frame.

Nota

Si no se muestra un marco de dispositivo para un dispositivo determinado, significa que DevTools no tiene arte para la opción.If a device frame for a particular device is not displayed, it means that DevTools does not have art for the option.

Agregar un dispositivo móvil personalizadoAdd a custom mobile device

Si la opción de dispositivo móvil que necesitas no está incluida en la lista predeterminada, puedes agregar un dispositivo personalizado.If the mobile device option that you need is not included on the default list, you may add a custom device. Para agregar un dispositivo personalizado, siga estos pasos.To add a custom device, complete the following steps.

  1. Elija la lista Dispositivo > Editar.Choose the Device list > Edit.

    Elegir editar

  2. Elija Agregar dispositivo personalizado.Choose Add custom device.

  3. En Dispositivos emulados, escriba un nombre de dispositivo, ancho de pantalla y alto de pantalla para el dispositivo personalizado.On Emulated Devices, enter a device name, screen width, and screen height for the custom device. La relación de píxeles del dispositivo, la cadena de agente de usuarioy los campos de tipo de dispositivo son opcionales.The device pixel ratio, user agent string, and device type fields are optional. El campo de tipo de dispositivo tiene el valor predeterminado Mobile.The device type field defaults to Mobile.

    Crear un dispositivo personalizado

Mostrar reglasShow rulers

Si necesita medir las dimensiones de pantalla, puede usar reglas para medir el tamaño de pantalla en píxeles.If you need to measure screen dimensions, you may use rulers to measure the screen size in pixels. Elija Más opcionesMostrar reglas para mostrar las reglas arriba y a la izquierda de la > ventanilla.Choose More options > Show rulers to display rulers above and to the left of your viewport.

Acercar la ventanillaZoom the viewport

Para probar la apariencia de la página en varios niveles de zoom, usa la lista Zoom para acercar o alejar.To test the look and feel of your page at multiple zoom levels, use the Zoom list to zoom in or out.

Zoom

Limitar la red y la CPUThrottle the network and CPU

Los dispositivos móviles suelen tener restricciones de red y CPU.Mobile devices often have network and CPU constraints. Asegúrate de probar la rapidez con la que se carga la página y cómo responde a diferentes velocidades de Internet y CPU.Ensure you test how quickly your page loads and how it responds at different internet and CPU speeds.

Limita la red y la CPU.Throttle the network and CPU.

  1. Elija Lista de limitaciones y cambie el valor preestablecido a Móvil de nivel intermedio o Móvil de gama baja.Choose Throttle list and change the preset to Mid-tier mobile or Low-end mobile.
    • El móvil de nivel intermedio simula y limita la fast 3G CPU.Mid-tier mobile simulates fast 3G and throttles your CPU. Es cuatro veces más lento de lo normal.It is four times slower than normal.
    • El móvil de gama baja simula y limita la slow 3G CPU.Low-end mobile simulates slow 3G and throttles your CPU. Es seis veces más lento de lo normal.It is six times slower than normal.

Toda la limitación se basa en la funcionalidad normal de su portátil o escritorio.All of the throttling is based upon the normal capability of your laptop or desktop.

La lista De limitación de la barra de herramientas de dispositivos

Nota

Si la lista de limitaciones está oculta, la barra de herramientas del dispositivo es demasiado estrecha.If the Throttle list is hidden, your Device Toolbar is too narrow. Para obtener acceso a la lista de limitaciones, aumente el ancho de la barra de herramientas del dispositivo.To access the Throttle list, increase the width of the Device Toolbar.

La barra de herramientas del dispositivo

Limitar solo la CPUThrottle the CPU only

Para limitar la CPU solo y no la red, siga estos pasos.To throttle the CPU only and not the network, complete the following steps.

  1. Elija el panel Rendimiento y elija Configuración de captura ( Configuración de captura  ).Choose the Performance panel, and choose Capture Settings (Capture Settings).

  2. Elija CPU > 4x slowdown o 6x slowdown.Choose CPU > 4x slowdown or 6x slowdown.

    La lista de CPU del panel Rendimiento

Limitar solo la redThrottle the network only

Para limitar solo la red, siga estos pasos.To throttle the network only, complete the following steps.

  1. Elija la herramienta Red.Choose the Network tool.

  2. Elija Online > Fast 3G o Slow 3G.Choose Online > Fast 3G or Slow 3G.

    Lista de limitaciones en el panel Red

    O seleccione Control + Shift + P (Windows, Linux) o Command + Shift + P (macOS) 3G para abrir el menú comando , escriba y elija Habilitar la limitación rápida de 3G o Habilitar la limitación 3G lenta .Or select Control+Shift+P (Windows, Linux) or Command+Shift+P (macOS) to open the Command Menu, type 3G, and choose Enable fast 3G throttling or Enable slow 3G throttling.

    Menú comando

También puede establecer la limitación de red desde el panel Rendimiento.You may also set network throttling from the Performance panel.

  1. Elija Configuración de captura ( Configuración de captura ) y elija la lista Red y cambie el valor preestablecido  a Fast 3G o Slow 3G. Choose Capture Settings (Capture Settings) and choose the Network list and change the preset to Fast 3G or Slow 3G.

    Establecer limitación de red desde el panel Rendimiento

Reemplazar geolocalizaciónOverride geolocation

Si la página depende de la información de geolocalización de un dispositivo móvil para representarse correctamente, proporcione distintas geolocalizaciones mediante la interfaz de usuario de reemplazo de geolocalización.If your page depends on geolocation information from a mobile device to render properly, provide different geolocations using the geolocation overriding UI.

  1. Elija Personalizar y controlar DevTools ( ... ) > Más herramientas > Sensores.Choose Customize and control DevTools (...) > More tools > Sensors.

Sensores de geolocalización

  1. Abra el menú comando.Open the Command Menu.
  • Seleccione Control + Shift + P (Windows, Linux) o Command + Shift + P (macOS).Select Control+Shift+P (Windows, Linux) or Command+Shift+P (macOS).
  1. Escriba Sensors y elija Mostrar sensores.Type Sensors, and choose Show Sensors.

Mostrar sensores para geolocalización

En el panel Sensores, puede seleccionar una de las ubicaciones preestablecidas incluidas en DevTools mediante el menú desplegable Ubicación.On the Sensors panel, you may select one of the preset locations included in DevTools using the Location drop-down menu. Para especificar una ubicación personalizada, elija Otros...To enter a custom location, choose Other… e introduzca las coordenadas de la ubicación personalizada.and enter the coordinates of your custom location. Para probar la página en un estado de error cuando la información de ubicación no está disponible, elija Ubicación no disponible.To test your page in an error state when location information is unavailable, choose Location unavailable.

Panel de sensores con una ubicación preestablecida seleccionada

Establecer orientaciónSet orientation

Si la página depende de la información de orientación de un dispositivo móvil para que se represente correctamente, abra la interfaz de usuario de orientación.If your page depends on orientation information from a mobile device to render properly, open the orientation UI.

  1. Elija Personalizar y controlar DevTools ( ... ) > Más herramientas > Sensores.Choose Customize and control DevTools (...) > More tools > Sensors.

Sensores de orientación

  1. Abra el menú comando.Open the Command Menu.
  • Seleccione Control + Shift + P (Windows, Linux) o Command + Shift + P (macOS).Select Control+Shift+P (Windows, Linux) or Command+Shift+P (macOS).
  1. Escriba Sensors y elija Mostrar sensores.Type Sensors, and choose Show Sensors.

Mostrar sensores para orientación

En el panel Sensores, puede seleccionar una orientación preestablecida en el menú desplegable Orientación.On the Sensors panel, you may select a preset orientation from the Orientation drop-down menu. Para escribir su propia orientación, elija Orientación personalizadae introduzca sus propios valores alfa, betay gamma.To enter your own orientation, choose Custom orientation, and enter your own alpha, beta, and gamma values.

Opciones de orientación en el panel Sensores

Establecer cadena de agente de usuarioSet user agent string

Si la página depende de la cadena de agente de usuario de un dispositivo móvil para representarse correctamente, use el panel Condiciones de red para proporcionar distintas cadenas de agente de usuario.If your page depends on the user agent string from a mobile device to render properly, use the Network conditions panel to provide different user agent strings.

  1. Elija Personalizar y controlar DevTools ( ... ) > Más herramientas Condiciones > de red.Choose Customize and control DevTools (...) > More tools > Network conditions.

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

  1. Abra el menú comando.Open the Command Menu.
  • Seleccione Control + Shift + P (Windows, Linux) o Command + Shift + P (macOS).Select Control+Shift+P (Windows, Linux) or Command+Shift+P (macOS).
  1. Escriba Network conditions y elija Mostrar condiciones de red.Type Network conditions, and choose Show Network conditions.

Mostrar condiciones de red

Junto al agente de usuario, desactive la casilla Seleccionar automáticamente.Next to User agent, clear the Select automatically checkbox. A continuación, elija Personalizado... para seleccionar de una lista de cadenas de agente de usuario predefinidas.Then, choose Custom... to select from a list of predefined user agent strings. Para escribir su propia cadena de agente de usuario, escriba la cadena en Entrar en un agente de usuario personalizado.To enter your own user agent string, enter the string in Enter a custom user agent.

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

Contactar al equipo de Microsoft Edge DevToolsGetting in touch with the Microsoft Edge DevTools team

Use las siguientes opciones para analizar las nuevas características y cambios en la publicación, o cualquier otra cosa relacionada con DevTools.Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Envía tus comentarios con el icono Enviar comentarios o selecciona Alt + Shift + I (Windows, Linux) o Option + Shift + I (macOS) en DevTools.Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.Tweet at @EdgeDevTools.
  • Enviar una sugerencia a La web que queremos.Submit a suggestion to The Web We Want.
  • Para presentar errores sobre este artículo, use la siguiente sección comentarios.To file bugs about this article, use the following Feedback section.

El icono Enviar comentarios en Microsoft Edge DevTools

[DevToolsRemoteDebugging]: .. /remote-debugging/index.md "Introducción a la depuración remota de dispositivos Android | Microsoft Docs"

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.Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
La página original se encuentra aquí y está redactada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.This work is licensed under a Creative Commons Attribution 4.0 International License.