Sofia Emelianova
Las Herramientas para desarrolladores de Chrome hacen que la depuración de diseños de flexbox de CSS sea intuitiva. El panel Elementos te proporciona un editor de Flexbox 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 un 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 Aprende CSS > Flexbox.
Para obtener una experiencia de depuración más práctica en DevTools, sigue el instructivo Cómo inspeccionar y depurar diseños de flexbox de CSS.