No importa cuántos botones y menús tengamos, siempre hay programadores a los que les encanta utilizar la línea de comandos a la hora de trabajar. Firefox cuenta con un Intérprete de Línea de Comandos en modo Gráfico, abreviado GCLI, que ha estado ampliando su conjunto de comandos desde que se lanzó. Los comandos GCLI proporcionan a los desarrolladores un acceso rápido a las herramientas de desarrollo y a la configuración. También cuenta con una función de autocompletar. Si pulsas Tab mientras escribes cualquier comando, se insertarán los comandos sugeridos por GCLI.
Barra de Herramientas de Desarrollador
El GCLI de Firefox también conocido como la Barra de Herramientas de Desarrollador (Developer Toolbar). Hay tres maneras de abrirla:
- Pulsa el atajo de teclado Shift+F2
- Abre el menú de Firefox (hamburguesa) y haz clic en Desarrollador >> Barra de Herramientas de Desarrollador.
- En la barra superior, haz clic en Herramientas >> Desarrollador web >> Barra de Herramientas de Desarrollador.
Una vez que la barra de herramientas de desarrollador está abierta, puedes verla en la parte inferior de la pantalla del navegador. Si estás decidido a trabajar con GCLI, te animo a dejarla abierta todo el tiempo mientras estás trabajando.
Ahora vamos a ver las tareas que puedes gestionar utilizando GCLI.
Eliminar elementos de la página
Comando: pagemod remove element <selector>
Cuando necesites modificar el diseño de una página web eliminando ciertos elementos, simplemente escribe el comando pagemod remove element <selector> en la línea de comandos de Firefox para eliminar dichos elementos de la página.
El valor de <selector> debe ser un selector CSS válido de la página. Digamos, que en una página deseas eliminar todos los enlaces cuya clase es .btn. El comando para llevar a cabo esto se escribiría así: pagemod remove element a.btn.
Generalmente, el comando pagemod se utiliza para modificar una página, ya sea para quitar o reemplazar elementos o atributos.
Medir elementos
Comando: measure
Si quieres saber la medida de cualquier módulo visual de una página web, hay una herramienta para eso. La herramienta "measure" es accesible tanto a través del conjunto de herramientas de desarrollo web típico como del GCLI.
Escribe el comando measure en la línea de comandos y el cursor se convertirá en un crosshair. Las medidas se mostrarán en píxeles junto al cursor de la retícula, y aparecerá el ancho, altura y longitud diagonal del área seleccionada. Para desactivar la herramienta, vuelva a ejecutar el comando measure.
Editar archivos rápidamente
Comando: edit <url>
Puedes editar los recursos de tu página con el comando edit. Mientras escribes el comando, verás las URls de todos los recursos disponibles de esa página, los cuales puedes explorar usando las teclas direccionales de arriba y abajo. Una vez hayas seleccionado el recurso que desees editar, pulsa Tab para completar la sugerencia y presiona Enter. La herramienta de edición del navegador se abrirá con el archivo elegido.
Buscar propiedades CSS desconocidas
Comando: mdn css <propiedad>
Éste es un comando bastante chulo. Si encuentras una propiedad CSS que no conoces y deseas saber a lo que hace referencia, ejecuta el comando mdn css <propiedad> en GCLI, reemplazando <propiedad> con el nombre de la propiedad que no conoces.
Se abrirá una nueva ventana con la "definición" para dicha propiedad de CSS justo encima de la barra de herramientas. La definición es un extracto de la página oficial de Mozilla Developer Network (MDN) de la propiedad dada. El glosario de propiedades de CSS, elementos HTML y API web de MDN es la mar de útil.
Si el texto mostrado en la ventana no te es suficiente y deseas saber más, puedes hacer clic en el enlace Visitar página MDN para abrir la página MDN correspondiente para esa propiedad. En este momento, este comando sólo está disponible para las propiedades CSS.
Redimensionar página
Comando: resize to <ancho> <alto>
La herramienta de redimensionamiento te permite ver cómo cambia el diseño de tu página con otras dimensiones. Puede ser realmente útil cuando desees obtener una vista previa de la apariencia de tu página en dispositivos con dimensiones diferentes.
Firefox también cuenta con un atajo de teclado para abrir esta herramienta: Ctrl+Mayús+M (Cmd+Alt+M para Mac). Pero si conoces las dimensiones exactas a lo que quieres redimensionar el navegador, la forma más rápida de llevarlo a cabo es ejecutar el comando resize con las dimensiones que necesites.
Las dimensiones se interpretan en píxeles. Una vez se ejecute el comando, verás la página redimensionada.
Reiniciar el navegador
Comando: restart
Este comando, la verdad que se explica solo. Para reiniciar Firefox, excribe el comando restart en la línea de comandos y pulsa Enter. Puede ser muy útil cuando instales add-ons o plugins que requieren un reinicio del navegador.
Abre la carpeta de tu perfil
Comando: folder openprofile
Todo usuario de Firefox cuenta con su propia carpeta de perfil en la cual se almacenan archivos específicos del usuario, como marcadores y la carpeta /chrome. Si quieres personalizar Firefox, es posible que necesites ver y modificar el contenido de esta carpeta.
La forma alternativa de abrir dicha carpeta es hacer clic en el botón Mostrar carpeta en la página about: support. Al ejecutar el comando folder openprofile en la línea de comandos de Firefox, verás como se abre tu carpeta de perfil.
Copiar códigos de color
Comando: eyedropper
Aparte del hecho de que sólo se pueden copiar colores en formato hexadecimal, el cuentagotas es una herramienta excepcional para copiar el código de color de cualquier tono visible de una página web. Introduce el comando eyedropper en el GCLI para activar el cuentagotas del navegador.
Testear librerías externas
Comando: inject <url>
Si quieres testear librerías externas en tu sitio web, en lugar de editar el código fuente para añadir código temporal, simplemente puedes utilizar el comando inject para insertar librerías. Por ejemplo, si quieres incluir jQuery simplemente escribe inject jQuery.
Al ejecutar este comando, el recurso se importará a la página insertando una nueva línea <script> en la sección <head> del documento HTML.
Capturar pantalla
Comando: screenshot <opción>
La herramienta de captura de pantalla incorporada en Firefox es bastante potente. Por ejemplo, puedes seleccionar elementos mediante selectores CSS, usar un temporizador, aplicar un dpr. Las capturas de pantalla se guardan en la carpeta de descargas del navegador en formato PNG.
Fuente: hongkiat.com