Usa Device Mode para saber de manera aproximada cuál será el aspecto y el rendimiento de tu página en un dispositivo móvil.
Device Mode es el nombre de un conjunto variado de funciones en Chrome DevTools que te ayudan a simular dispositivos móviles. Estas funciones incluyen:
- Simulación de la vista del puerto de un dispositivo móvil
- Limitación de la red
- Limitación de la CPU
- Simulación de la ubicación geográfica
- Configuración de la orientación
Limitaciones
Considera Device Mode como una aproximación de primer orden para conocer el aspecto y el funcionamiento de tu página en un dispositivo móvil. Con Device Mode no ejecutas el código en un dispositivo móvil, sino que simulas la experiencia del usuario móvil desde tu laptop o equipo de escritorio.
Hay algunos aspectos de los dispositivos móviles que DevTools nunca podrá simular. Por ejemplo, la arquitectura de las CPU móviles es muy distinta de la arquitectura de la CPU de una laptop o un equipo de escritorio. Si tienes dudas, lo mejor que puedes hacer es ejecutar la página en un dispositivo móvil. Usa Remote Debugging para ver, cambiar, depurar y generar un perfil del código de una página desde tu laptop o equipo de escritorio mientras lo ejecutas en un dispositivo móvil.
Simulación de la vista del puerto de un dispositivo móvil
Haz clic en Toggle Device Toolbar 
para abrir la IU que
te permite simular la vista del puerto de un dispositivo móvil.
De manera predeterminada, la barra de herramientas de dispositivo se abre en el modo de vista del puerto receptiva.
Modo de vista del puerto receptiva
Arrastra los controladores para cambiar el tamaño de la vista del puerto a las dimensiones que necesites. También puedes ingresar valores específicos
en los cuadros de ancho y altura. En la figura 2, el ancho es 628 y la altura es
662.
Visualización de consultas de medios
Para mostrar los puntos de interrupción de consultas de medios por encima de la vista del puerto, haz clic en More options y luego selecciona Show media queries.
Haz clic en un punto de interrupción para cambiar el ancho de la vista del puerto para que se active el punto de interrupción.
Modo de vista del puerto de dispositivo móvil
Para simular las dimensiones de un dispositivo móvil específico, selecciona el dispositivo en la lista Device.
Cambio a la orientación horizontal de la vista del puerto
Haz clic en Rotate 
para cambiar a la orientación horizontal de la vista del puerto.
Ten en cuenta que el botón Rotate desaparece si la barra de herramientas de dispositivo es angosta.
Consulta también Configuración de la orientación.
Visualización del marco del dispositivo
Al simular las dimensiones de un dispositivo móvil específico como un iPhone 6, abre More options y selecciona Show device frame para mostrar el marco del dispositivo físico alrededor de la vista del puerto.
Nota: Si no ves el marco de un dispositivo específico, es probable que DevTools simplemente no tenga la imagen de esa opción en particular.
Visualización de reglas
Haz clic en More options y después selecciona Show rulers para ver las reglas arriba y a la izquierda de la vista del puerto. La unidad de tamaño de las reglas son los píxeles.
Zoom en la vista del puerto
Usa la lista Zoom para acercar o alejar.
Limitación de la red y la CPU
Para limitar la red y la CPU, selecciona Mid-tier mobile o Low-end mobile en la lista Throttle.
Mid-tier mobile simula conexiones 3G y limita tu CPU para que sea 4 veces más lenta que lo normal. Low-end mobile simula conexiones 3G y limita tu CPU para que sea 6 veces más lenta que lo normal. Ten en cuenta que la limitación es con respecto a la capacidad normal de tu laptop o equipo de escritorio.
La lista Throttle estará oculta si la barra de herramientas de dispositivo es angosta.
Limitación de la CPU solamente
Para limitar solamente la CPU y no la red, ve al panel Performance, haz clic en
Capture Settings 
y selecciona
4x slowdown o 6x slowdown en la lista CPU.
Limitación de la red solamente
Para limitar la red pero no la CPU, ve al panel Network y selecciona Fast 3G o Slow 3G en la lisa Throttle.
De manera alternativa, puedes presionar Command+Shift+P (Mac) o
Ctrl+Mayús+P (SO Windows, Linux o Chrome) para abrir
el menú Command, escribir 3G y seleccionar Enable fast 3G throttling o
Enable slow 3G throttling.
También puedes configurar la limitación de la red desde el panel Performance. Haz clic en
Capture Settings y después
selecciona Fast 3G o Slow 3G en la lista Network.
Anulación de la ubicación geográfica
Para abrir la IU de anulación de la ubicación geográfica, haz clic en Customize and control DevTools
y selecciona
More tools > Sensors.
De manera alternativa, puedes presionar Command+Shift+P (Mac) o
Ctrl+Mayús+P (SO Windows, Linux o Chrome) para abrir
el menú Command, escribir Sensors y seleccionar Show Sensors.
Selecciona una de las configuraciones preestablecidas en la lista Geolocation o selecciona Custom location para ingresar tus propias coordenadas. También puedes seleccionar Location unavailable para probar cómo se comporta tu página cuando la ubicación geográfica está en estado de error.
Configuración de la orientación
Para abrir la IU de la orientación, haz clic en Customize and control DevTools
y selecciona
More tools > Sensors.
De manera alternativa, puedes presionar Command+Shift+P (Mac) o
Ctrl+Mayús+P (SO Windows, Linux o Chrome) para abrir
el menú Command, escribir Sensors y seleccionar Show Sensors.
Selecciona uno de los valores preestablecidos de la lista Orientation o selecciona Custom orientation para establecer tus propios valores alfa, beta y gamma.
Comentarios
Was this page helpful?
Consulta Join the DevTools community (Unirse a la comunidad de DevTools) para conocer otras formas de enviar comentarios.