Desde hace varios años, Firefox se ha convertido en mi navegador de referencia en el ámbito personal. Ya sea por las mejoras que han ido añadiendo como Quantum, o su preocupación por la privacidad de los usuarios, siempre es de los primeros programas que instalo en cualquier dispositivo que lo permita. Y sobre el profesional, Mozilla dispone de una navegador hermano, Firefox Developer Edition (o Firefox Dev), con herramientas y características únicas que permiten a cualquier persona que trabaje en la web hacerlo de forma más cómoda.
Uno de los motivos por los que empecé a usar Firefox Dev es porque fue uno de los primeros navegadores en incluir herramientas básicas para trabajar con CSS Grid, que nos permitía ver de forma directa las filas y columnas que se forman en este sistema de rejillas. A partir de ahí, me di cuenta de la cantidad de opciones que disponía y que hacían mucho más sencillo mi trabajo día a día. Y no solo eso, sino que a lo largo del tiempo han ido incorporando nuevas funcionalidades del estilo. Es por ello que hemos querido hacer este artículo, para compartir con vosotros algunas de las que nos resultan más interesantes.
Antes de empezar, en muchas ocasiones nombraremos el uso del inspector del navegador. Si no sabes mucho del tema, te recomendamos que eches un vistazo al artículo que escribimos sobre el inspector web, y que te sacará de muchas dudas. Una vez dicho todo esto, empecemos con este listado sobre mis herramientas favoritas de Firefox Dev.
Recogecolor (Eyedropper)
Esta es una de las funcionalidades que me ha permitido no tener que instalar un complemento más en mi navegador. Con el Recogecolor (o Eyedropper, si tienes Firefox en inglés) te permitirá copiar cualquier color que encuentres en un web, y pegarlo o guardarlo para tus propios proyectos.
Existen varias formas para empezar a usar el Recogecolor. La primera es yéndonos al menú de Firefox Dev, y estará dentro del la sección Desarrollador web. El cursos del ratón se nos cambiará a una lupa que podremos mover por la web que tengamos abierta. Justo debajo de la lupa nos aparecerá el código HEX del color sobre el que estemos en ese momento. Si clicamos, se nos copiará dicho código en el portapapeles, y podremos pegarlo donde queramos.
Aparte de poder abrir el Recogecolor desde en el menú de Firefox Dev, también está disponible en el inspector del navegador, pinchando en el icono de cuentagotas que está encima del panel de HTML. O, desde el panel CSS, si pinchamos sobre un valor de propiedad que contenga un color.
También hacer mención de la disponibilidad de un ajuste fino al pixel, si no somos muy mañosos a la hora de elegir el punto exacto del color que queremos capturar. Una vez abierto el Recogecolor, podemos desplazar el cursor pixel a pixel haciendo uso de las teclas de dirección de nuestro teclado, y pulsando Enter cuando estemos sobre el pixel correcto para copiar su color.
Cambios en el CSS
La mayoría de las veces que entramos en el inspector de nuestro navegador es para ver el código CSS de una web, ya sea para ver como está hecho, como para realizar cambios en él y ver los resultados de forma inmediata. En este último caso, es habitual no querer hacer muchos cambios a la vez, ya que no queremos olvidar las modificaciones realizadas. Por suerte, también existe una herramienta para estos casos en Firefox Dev.
Si nos vamos al tercer panel de nuestro navegador (si no lo tienes abierto, lo puedes hacer pulsando el icono superior izquierdo del panel CSS), veremos una pestaña llamada Cambios. En esa pestaña se almacenan no solo el listado de forma conjunta con las nuevas lineas CSS que hayamos introducido, sino también los valores existentes anteriormente.
Esta es una forma excelente no solo para llevar un conteo de que hemos añadido y que hemos cambiado, sino que si le pasamos el código CSS a otra persona, podrá ver perfectamente todos estas modificaciones y sabrá que es una nueva línea y a cual sustituye.
A la hora de copiar estos cambios tenemos tres opciones:
- Seleccionar todo el código, y copiarlo. Es la forma más intuitiva, pero el código pegado va a ser literalmente exacto al del inspector. Es decir, tiene un símbolo – para el código modificado, y un símbolo + para el nuevo código. Puede que esto no nos resulte útil en muchas ocasiones.
- Clicando sobre Copiar todos los cambios. Como su nombre indica, copiaremos todo el código del panel, pero al pegarlo, veremos como el código antiguo aparece comentado. Ideal para pegarlo directamente en nuestra web.
- Si nos vamos al final de la linea del selector, aparece un nuevo botón llamado Regla para copiar. Esto nos permite copiar solo una regla y no el código completo. Como en el punto anterior, el código antiguo aparecerá comentado.
Panel de Tipografías
Una de mis herramientas preferidas están en esta nueva pestaña que está disponible desde hace pocas versiones de Firefox Dev. Como la pestaña Cambios, también se encuentra en el tercer panel del inspector. ¿Y para que nos sirve esta pestaña de Tipografía? Muy sencillo, seleccionando un texto en la web, podemos tener de un vistazo una amplia variedad de información de la tipografía seleccionada: su nombre, tamaño, altura de linea, espaciado, peso y si es cursiva, sin tener que bucear entre el CSS. Con el consiguiente ahorro de tiempo que vamos a tener.
Pero no se queda ahí. Podemos cambiar estos valores para ver como sería su resultado en la web. Y, por supuesto, estas modificaciones aparecerán reflejadas dentro de la pestaña Cambios. Además, tener un menú desplegable con el que será muy sencillo hacer la conversión entre unidades, sea cual sea la que use la web y la que nosotros queramos usar. Por ejemplo, dentro de Tamaño, podemos variar convertir entre em, rem %, px, vh y vw.
Por último, comentar también que nos permite obtener información y hacer variaciones en Fuentes Variables. Si no sabes que son, te recomendamos los artículos donde hablamos de las Fuentes Variables. Podemos entrar en V-Fonts, donde disponemos de muchas de estas fuentes, y usar el inspector sobre ellas. Si observamos bien, veremos como en algunas se añaden opciones extra a las que teníamos antes. Es un buen momento para experimentar y probar tanto las opciones de esta herramienta de Firefox como de las Fuentes Variables.
Por este tipo de herramientas, y muchas más, Firefox Dev Browser se ha convertido en mi navegador preferido a la hora de trabajar. Y no solo eso, sino que también va incorporando funcionalidades que puedes ir probando antes de que se lancen en otros navegadores. Una de la que espero con más ganas es Subgrid, que añadirá una capa más a CSS Grid, y que será compatible con la actualización de Diciembre.
Esperamos que os haya sido de utilidad este artículo, y como siempre, tenéis disponibles los comentarios para cualquier asunto que queráis contarnos!
