Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Simulación de dispositivos móviles con Device Mode en Chrome DevTools

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:

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 Toggle Device Toolbar para abrir la IU que te permite simular la vista del puerto de un dispositivo móvil.

Barra de herramientas de dispositivo.
Figura 1. Barra de herramientas de dispositivo

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.

Controladores para cambiar las dimensiones de la vista del puerto en el modo de vista del puerto receptiva.
Figura 2. Controladores para cambiar las dimensiones de la vista del puerto en el modo de vista del puerto receptiva

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.

Show media queries.
Figura 3. 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.

Haz clic en un punto de interrupción para cambiar el ancho de la vista del puerto.
Figura 4. Haz clic en un punto de interrupción para cambiar el ancho de la vista del puerto.

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.

Lista Device.
Figura 5. Lista Device

Cambio a la orientación horizontal de la vista del puerto

Haz clic en Rotate Rotate para cambiar a la orientación horizontal de la vista del puerto.

Orientación horizontal.
Figura 6. Orientación horizontal

Ten en cuenta que el botón Rotate desaparece si la barra de herramientas de dispositivo es angosta.

Barra de herramientas de dispositivo.
Figura 7. Barra de herramientas de dispositivo

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.

Show device frame.
Figura 8. Show device frame
Marco de dispositivo de un iPhone 6.
Figura 9. Marco de dispositivo de un iPhone 6

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.

Show rulers.
Figura 10. Show rulers
Reglas arriba y a la izquierda de la vista del puerto.
Figura 11. Reglas arriba y a la izquierda de la vista del puerto

Zoom en la vista del puerto

Usa la lista Zoom para acercar o alejar.

Zoom.
Figura 11. Zoom

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.

Lista Throttle.
Figura 12. 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.

Barra de herramientas de dispositivo.
Figura 13. Barra de herramientas de dispositivo

Limitación de la CPU solamente

Para limitar solamente la CPU y no la red, ve al panel Performance, haz clic en Capture Settings Capture Settingsy selecciona 4x slowdown o 6x slowdown en la lista CPU.

Lista CPU.
Figura 14. 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.

Lista Throttle.
Figura 14. Lista 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.

Menú Command.
Figura 15. Menú Command

También puedes configurar la limitación de la red desde el panel Performance. Haz clic en Capture Settings Capture Settings y después selecciona Fast 3G o Slow 3G en la lista Network.

Configuración de la limitación de la red desde el panel Performance.
Figura 16. Configuración de la limitación de la red desde el panel Performance

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 Customize and control DevTools y selecciona More tools > Sensors.

Sensors
Figura 17. 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.

Show Sensors
Figura 18. 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.

Geolocation
Figura 19. Geolocation

Configuración de la orientación

Para abrir la IU de la orientación, haz clic en Customize and control DevTools Customize and control DevTools y selecciona More tools > Sensors.

Sensors
Figura 20. 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.

Show Sensors
Figura 21. 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.

Orientation
Figura 22. Orientation

Comentarios

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

Consulta Join the DevTools community (Unirse a la comunidad de DevTools) para conocer otras formas de enviar comentarios.