Para probar una web responsive con Chrome DevTools, activa la barra de dispositivos y cambia el ancho de forma continua. Los tamaños intermedios suelen revelar problemas que no aparecen en los modelos predefinidos.
Haz una revisión en tres recorridos
- Empieza a 320 píxeles y comprueba que se puede leer y navegar sin desplazar toda la página horizontalmente.
- Arrastra el límite del viewport hasta superar tus breakpoints. Anota el ancho exacto al que se rompe cada bloque.
- Prueba una orientación horizontal y una pantalla amplia. Comprueba el orden de los elementos y el cierre de los desplegables.
Localiza un desbordamiento
Inspecciona primero las cajas con ancho fijo, las imágenes, las tablas y las cadenas largas. Prueba a desactivar una regla desde Styles antes de editar archivos. Si el problema desaparece al retirar un min-width, revisa qué requisito justificaba ese mínimo.
Verifica las condiciones reales
La barra de dispositivos simula características del viewport. Para validar un menú táctil, un teclado virtual o el comportamiento del desplazamiento, abre la misma página en un teléfono. Repite las tareas completas, como enviar un formulario o abrir la navegación.
Registra el fallo de forma reproducible
Escribe la URL, el ancho, la acción y el resultado. Por ejemplo: «A 375 px, al abrir el menú, el último enlace queda fuera de pantalla». Esa descripción permite volver a comprobar la misma condición tras corregirla.
Consulta la documentación de referencia y la guía relacionada de MasterCodePro.
