Use el modo de dispositivo para aproximar el aspecto y el rendimiento de su página en un dispositivo móvil.
Device Mode es el nombre de la colección suelta de características de Chrome DevTools que ayudan a simular dispositivos móviles., Estas características incluyen:
- simulación de una vista móvil
- limitación de la red
- limitación de la CPU
- simulación de geolocalización
- configuración de orientación
limitaciones
piense en el modo de dispositivo como una aproximación de primer orden de cómo se ve y se siente su página en un dispositivo móvil. Con el modo de dispositivo, en realidad no ejecuta su código en un dispositivo móvil. Simula la experiencia del usuario móvil desde su computadora portátil o 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 diferente de la arquitectura de las CPU de escritorio laptopor. En caso de duda, tu mejor opción es ejecutar tu página en un dispositivo móvil. Usa la depuración remota para ver, cambiar, depurar y perfilar el código de una página desde tu computadora portátil o de escritorio mientras se ejecuta en un dispositivo móvil.
simular una vista móvil
Haga clic en Toggle Device Toolbar 
para abrir la interfaz de usuario que le permite simular una vista móvil.
de forma predeterminada, la barra de Herramientas del dispositivo se abre en modo de vista sensible.
modo de vista sensible
Arrastre los controladores para cambiar el tamaño de la vista a las dimensiones que necesite. O bien, ingrese valores específicos en los cuadros ancho y alto. En la Figura 2, el ancho se establece en 628 y el alto en662.
Show media queries
para mostrar los puntos de interrupción de la consulta de medios por encima de la ventana, haga clic en Más opciones y, a continuación, seleccione Show mediaqueries.
Haga clic en un punto de interrupción para cambiar el ancho de la ventana de modo que el punto de interrupción se active.
establecer el tipo de dispositivo
utilice la lista Tipo de dispositivo para simular un dispositivo móvil o de escritorio.
la siguiente tabla describe las diferencias entre las opciones. El método de renderizado se refiere a Si Chrome representa la página como una vista móvil o de escritorio. Cursor iconrefers a qué tipo de cursor se ve cuando se pasa el cursor sobre la página., Los eventos disparados se refieren a si la página dispara eventos touch o click cuando interactúa con la página.,id=»b8e8c2fed7″>
Mobile Device Viewport Mode
To simulate the dimensions of a specific mobile device, select the device from the Device list.,
Rotate the viewport to landscape orientation
Click Rotate 
to rotate the viewport to landscape orientation.
Note that the Rotate button disappears if your Device Toolbar is narrow.
consulte también establecer orientación.
Mostrar marco del dispositivo
al simular las dimensiones de un dispositivo móvil específico como un iPhone 6, abra más opciones y luego seleccione Mostrar marco del dispositivo para mostrar el marco del dispositivo físico alrededor de la ventana.
agregar un dispositivo móvil personalizado
para agregar un dispositivo personalizado:
-
Haga clic en la lista de dispositivos y luego seleccione Editar.
Figura 11. Seleccionando Editar -
Haga clic en Agregar dispositivo personalizado.
-
introduzca un nombre, anchura y altura para el dispositivo. Los campos de relación de píxeles del dispositivo, cadena de agente de usuario y tipo de dispositivo son opcionales. El campo Tipo de dispositivo es la lista que está establecida en móvil de forma predeterminada.,
Figure 12. Creating a custom device
Show rulers
Click More options and then select Show rulers to see rulers above and to the leftof your viewport. The sizing unit of the rulers is pixels.
Zoom la ventana
utilice la lista de Zoom para acercar o alejar.
acelerar la red y la CPU
para acelerar la red y la CPU, seleccione mid-tier mobile o Low-end mobilefrom the Throttle list.
mid-tier mobile simula 3G rápido y acelera su CPU para que sea 4 veces menor de lo normal. Low-end móvil simula 3G lento y acelera su CPU 6 veces más lento de lo normal.Tenga en cuenta que la limitación es relativa a la capacidad normal de su computadora portátil o de escritorio.
tenga en cuenta que la lista de aceleración se ocultará si la barra de Herramientas del dispositivo es estrecha.
limitar solo la CPU
para limitar solo la CPU y no la red, vaya al panel Rendimiento, haga clic en ajustes de captura 
y, a continuación, seleccione 4x slowdown o 6x slowdown de la lista CPU.
acelerar solo la red
para acelerar solo la red y no la CPU, vaya al panel de red y seleccione fast 3G o Slow 3G de la lista de aceleración.,
o pulse Comando+Mayús+P (Mac) o Control+Mayús+P (Windows, Linux, Chrome OS) para abrir el menú de comandos, escriba 3G, y seleccione Habilitar aceleración rápida 3G o Habilitar aceleración lenta 3G.
También puede establecer la limitación de red desde el panel Rendimiento., Haga clic en configuración de captura y luego seleccione 3G rápido o 3G lento de la lista de red.
anular geolocalización
para abrir la interfaz de usuario de anulación de geolocalización, haga clic en Personalizar y controlar DevTools
y, a continuación, seleccione Más herramientas > Sensores.
seleccione uno de los presets de la lista de geolocalización, o seleccione Ubicación Personalizadapara ingresar sus propias coordenadas, o seleccione Ubicación No Disponible para probar cómo se comporta su página cuando la geolocalización está en un estado de error.
Set orientation
To open the orientation UI click Customize and control DevTools and then selectMore tools > Sensors.
seleccione uno de los presets de la lista de orientación o seleccione orientación personalizada para establecer sus propios valores alfa, beta y gamma.
Comentarios
consulte unirse a la comunidad de DevTools para ver otras formas de dejar comentarios.