Sofia Emelianova
Las Herramientas para desarrolladores de Chrome hacen que la depuración de diseños de CSS flexbox sea intuitiva. El panel Elements te ofrece un Flexbox Editor adaptado al contexto y una superposición personalizable.
Mira el video para aprender a hacer lo siguiente:
- Usa el Editor de Flexbox para cambiar las propiedades de Flexbox con solo hacer clic en un botón en lugar de escribirlas.
- Activa o desactiva la superposición de Flexbox en el viewport para ver los cambios que realices de inmediato.
- Usa la sección Elements > Layout > Flexbox para ver una lista de todos los elementos y ubicarlos en el árbol del DOM. Además, puedes personalizar los colores de la superposición aquí.
Para obtener más información sobre Flexbox de CSS en general, consulta Aprender CSS > Flexbox.
Para obtener una experiencia de depuración más práctica en Herramientas para desarrolladores, sigue el instructivo Cómo inspeccionar y depurar diseños de flexbox de CSS.