Firefox Developer Inspector para Flexbox y CSS Grid

Aprende a utilizar el inspector Flex y Grid que incluye el navegador Firefox y conoce las diferencias que tiene respecto al inspector de Chrome.

Inspector Flex y Grid de Chrome

A la hora de maquetar utilizando tanto CSS Grid como Flexbox, las herramientas que nos proporciona Firefox a día de hoy, son mucho más potentes que las que nos ofrecen otros navegadores como Chrome.

Si abrimos una página maquetada con CSS Grid con Chrome y abrimos el inspector pulsando la tecla F12, cuando pinchamos sobre el elemento que tiene las propiedades Grid, vemos resaltada la rejilla hecha con Grid, sus celdas, filas y columnas, pero nada más.

Además, si elegimos otro elemento, como por ejemplo el footer, que también está hecho con Flexbox, se marcan sus celdas, pero no se indica que es un elemento Flex.

Inspector Flex y Grid de Firefox

Abrimos la misma página en Firefox y abrimos el inspector de elementos, pulsando el botón derecho del ratón y pulsando en Inspeccionar elemento o pulsando la tecla F12. Cuando se abre el inspector podemos ver que tenemos una pestaña en la zona derecha en la que aparece Flexbox y Rejilla.

Seleccionamos el elemento en forma de rejilla y después hacemos clic en la zona derecha dónde aparece Superponer rejilla, entonces se muestra la rejilla seleccionada, indicando además los números de fila, el gap y los números de columna.

Además podemos seleccionar en ese menú de la derecha si queremos mostrar, en caso de haberlos, los nombres de las áreas y los números de líneas, y también si queremos extender las líneas infinitamente. Como podemos ver, este inspector de elementos nos ofrece mucha más información y nos permite maquetar de una forma mucho más fácil.

Además, si seleccionamos el footer, que también es un elemento Flex, nos indica en la zona de la derecha del inspector que es un contenedor Flex y nos muestra sus propiedades, que en este caso son row y nowrap.

También podemos mostrar los elementos flexibles y dónde están colocados, pudiendo cambiar sus propiedades y ver como quedarían con esos cambios.

Este inspector nos da mucha más información sobre los elementos Flex y Grid, por lo que es mucho más recomendable utilizar estas herramientas que nos proporciona Firefox.

También podemos ver los elementos flexibles que están dentro del contenedor Flex, acceder a ellos, ver sus propiedades, etcétera.

Y por último comentar que en esa zona del inspector podemos ver la rejilla representada, y nos permite navegar por la misma, resaltando la zona que tengamos seleccionada.

Si quieres aprender mucho más sobre Flexbox y CSS Grid, descarga esta Guía de Maquetación Web con Flexbox.

También puedes hacer el Curso de Flexbox y CSS Grid creado por nuestro profesor experto Juan Diego. Dónde aprenderás las técnicas para maquetar webs de una forma más fácil y profesional.