Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Firefox Developer Inspector para Flexbox y CSS Grid

Juan Diego Pérez Jiménez
  • Escrito por Juan Diego Pérez Jiménez el 13 de Marzo de 2019
  • 2 min de lectura | Diseño Web
Firefox Developer Inspector para Flexbox y CSS Grid
El reproductor de video será cargado en breves instantes.

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.

guia-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.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Curso de HTML5, CSS3 y JavaScript

Curso de HTML5, CSS3 y JavaScript

curso

Aprende lo básico para comenzar a programar sitios o aplicaciones web. En este curso verás HTML5, CSS3 y JavaScript básico.

Duración: 7 horas y 9 minutos

Qué es CSS Grid

Qué es CSS Grid

Diseño Web

12 de Marzo de 2019

Te hablamos sobre otro de los nuevos valores de HTM5, en este caso Grid, con el que poder maquetar de forma más fácil.

Frontend Developer Profesional

Frontend Developer Profesional

carrera

Incluye 8 cursos:

  • Curso de HTML5, CSS3 y JavaScript
  • Curso de Polymer
  • Curso de React JS

y 5 cursos más!

Duración: 52 horas y 11 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars