Cómo obtener una vista previa de su sitio web en diferentes dispositivos usando Google Chrome

Cuando crea un sitio web, desea que sea receptivo y se adapte a diferentes tamaños de pantalla. Una forma de probar esto es mediante el uso de las herramientas de desarrollo integradas de Google Chrome.

Chrome's DevTools le permite depurar diferentes aspectos de su sitio web. Esto incluye cambiar y obtener una vista previa del código fuente HTML y CSS. También le permite depurar el código JavaScript del lado del cliente y ver el tráfico de red.

DevTools también tiene una opción para obtener una vista previa de su sitio web en diferentes dispositivos. Esto incluye diferentes tipos de dispositivos móviles, iPads, tabletas y más.

Para abrir la barra de herramientas del dispositivo en Google Chrome, debe abrir la Ventana de herramientas para desarrolladores de Chrome:

1. Abre un sitio web.
2. Haga clic derecho en la página y haga clic en Inspeccionar.
3. Se abrirá la ventana de Chrome DevTools. Puede abrirse al costado o en la parte inferior de su navegador, o como una nueva ventana.
4. En la parte superior izquierda de la ventana, hay dos iconos. Haga clic en el icono que muestra varios dispositivos de diferentes tamaños.
   instagram viewer
5. La pantalla cambiará para mostrarle cómo se vería el sitio web en un dispositivo móvil.

Cómo cambiar entre diferentes dispositivos

Use el menú desplegable en la parte superior de la barra de herramientas del dispositivo para cambiar entre diferentes dispositivos.

1. La parte superior de la barra de herramientas mostrará en qué tipo de dispositivo está viendo actualmente su sitio web. Haga clic en el menú desplegable para elegir otro dispositivo de la lista.
2. En lugar de elegir un dispositivo existente, puede optar por ver el sitio web en modo receptivo. Haga clic en el menú desplegable y seleccione el Sensible opción.
3. Junto al menú desplegable, también puede elegir ingresar un ancho y alto personalizados para un dispositivo.
4. En lugar de escribir un ancho y un alto, también puede hacer clic y arrastrar las esquinas de la ventana para ajustar el tamaño.

Cómo agregar un dispositivo personalizado

Si desea guardar un ancho y una altura personalizados, puede agregar un dispositivo personalizado. La barra de herramientas del dispositivo mostrará su nuevo dispositivo en el menú desplegable para dispositivos.

1. Haga clic en el menú desplegable que enumera todos los dispositivos.
2. Haga clic en Editar.
3. En la barra lateral Configuración, asegúrese de tener la Dispositivos pestaña seleccionada. Aquí, también puede ver una lista de más dispositivos entre los que puede elegir.
4. Haga clic en Agregar dispositivo personalizado.
5. Ingrese un nombre, ancho y alto para el dispositivo. Asegúrese de seleccionar también el tipo de dispositivo, como si es un dispositivo móvil o de escritorio. Si expandes el Sugerencias de cliente de agente de usuario opción, puede agregar otros detalles, como el modelo, la marca o la versión del dispositivo.
6. Haga clic en Agregar.
7. Vuelva al menú desplegable que enumera todos los dispositivos. Verá su nuevo dispositivo personalizado en la lista.
8. Puede volver a editar estos detalles más tarde volviendo a la página del dispositivo personalizado. Haga clic en el editar junto al nombre de su dispositivo para comenzar a editar.

Es muy útil poder obtener una vista previa de su sitio web en diferentes dispositivos y tamaños de pantalla, por varias razones.

En primer lugar, puede probar el rendimiento de su sitio web en diferentes dispositivos. Algunos móviles pueden tener velocidades de red más rápidas o aceleración de la CPU que otros.

La barra de herramientas del dispositivo le permite alternar entre diferentes opciones de velocidad de red. Esto le permite probar la velocidad de cualquier llamada a un servidor o probar la carga y el procesamiento de datos en su sitio web.

Además, también puede ver cómo se ve el diseño en un dispositivo en particular, desde el punto de vista de la interfaz de usuario. Si estás usando Consultas de medios CSS, puede utilizar esta herramienta para comprobar que funcionan como espera.

Puede usar la ventana DevTools de Google Chrome para probar cómo su sitio web se adapta a diferentes tamaños de pantalla y para asegurarse de que su sitio web responda. También puede usarlo para probar el rendimiento de su sitio web y si sus consultas de medios funcionan como se esperaba.

También puede utilizar DevTools de Google Chrome para otros fines. Puede usarlo para depurar cualquier problema de CSS cambiando el CSS en la pestaña Estilos de la ventana Elemento. Esto le permite ver cualquier cambio de CSS de inmediato, lo que puede acelerar su flujo de trabajo de codificación.

Cómo usar Google Chrome para depurar CSS

Leer siguiente