Cuando desarrollamos nuestras aplicaciones web las extensiones que puede contener nuestro navegador son herramientas muy importantes si queremos agilizar nuestro trabajo, Firefox es un navegador que nos trae un sin fin de extensiones tanto para desarrollo como para diseño web, en este artículo hice una compilación de las mejores extensiones de Firefox que en lo particular me ayudan bastante, muchas de estas extensiones fueron actualizadas este año y tienen puntuaciones bastante altas los cuales son factores a tomar muy en cuenta al momento de decidirnos por uno de ellos.
Firebug
Obviamente esta extensión no iba a faltar, aunque muchos optan por usar el inspector de elementos que viene por defecto en su navegador, Firebug se integra con Firefox para poner a nuestra disposición una gran cantidad de herramientas de desarrollo, con esta gran extensión podemos editar, depurar, monitorear en vivo nuestro código CSS, HTML y Javascript de cualquier web.
También disponible en Google Chrome
Enlace: https://addons.mozilla.org/es/firefox/addon/firebug/
Web Developer
Esta extensión agrega varias herramientas de desarrollo web, también esta disponible para Google Chrome y Opera, se puede ejecutar en cualquier plataforma compatible con estos navegadores. Tiene funciones para borrar cookies de sesión, mostrar tamaños de archivos, editar CSS, pantalla de información topográfica, manejo de imágenes, manejo de formularios, son solo algunas de la variedad de características con las que cuenta esta extensión.
Enlace: https://addons.mozilla.org/es/firefox/addon/web-developer/
Adblock Plus
Si bien esta extensión no es exactamente una herramienta para el desarrollo web, vale la pena mencionarlo porque si nuestro navegador esta fuera de anuncios, banners y esas cosas molestas hace que nuestro navegador fluya de manera mas limpia y cómoda para los desarrolladores. Adblock Plus nos bloquea ventanas emergentes (pop-ups) y anuncios de vídeo, incluso en Facebook y Youtube, también bloquea otros elementos como seguimientos en web, desactivar dominios de malware, desactivar botón de redes sociales. Podemos crear nuestras propias listas donde podemos incluir excepciones de anuncios aceptables y somos totalmente libres de eliminar, editar y crear las listas.
También esta disponible en Google Chrome, Opera, Safari, Android e Internet Explorer.
Enlace: https://addons.mozilla.org/es/firefox/addon/adblock-plus/
ColorZilla
ColorZilla es una sencilla pero útil extension que ayuda tanto a desarrolladores como diseñadores web con tareas relacionadas con colores, tanto básicos como avanzados, con ColorZilla se puede obtener una lectura de color desde cualquier punto del navegador web, captura el color y nos permite pegarlo en cualquier otro programa, también tiene la opción de analizar una página entera y generar su paleta de colores, tiene características que nos permite obtener información del DOM y muchas opciones más.
También disponible en Google Chrome.
Enlace: https://addons.mozilla.org/es/firefox/addon/colorzilla/
CSS Reloader
Muy útil al momento dar estilos a nuestras aplicaciones web, CSS Reloader nos permite recargar todo el CSS de cualquier sitio sin tener que recargar la página en si, su funcionalidad es bastante fácil, una vez instalada la extensión nos dirigimos a la página en concreto que queramos recargar el css y dándole click sobre dicha página encontraremos la opción “Reload CSS”.
También disponible en Google Chrome.
Enlace: https://addons.mozilla.org/es/firefox/addon/css-reloader/
Self-Destructing Cookies
Esta extensión elimina las cookies y el LocalStorage de un sitio web tan pronto es cerrada la pestaña, esto con fines de protección contra los seguidores maliciosos y métodos de rastreo no convencionales, también ayuda a proteger contra ataques CSRF poniendo fin a las sesiones tan pronto sea posible, lo interesante de esta extensión es que podemos crear una lista de excepciones (lista blanca) y se complementa bastante bien con la extensión Adblock Plus.
Enlace: https://addons.mozilla.org/es/firefox/addon/self-destructing-cookies/
MeasureIt
Útil extensión que nos ayuda a conocer las medidas exactas con las que trabajamos en sectores específicos de nuestra pagina web, esta extensión dibuja una regla sabre cualquier pagina para comprobar el ancho y el alto en pixeles, tenemos la opción de mover cada 1 pixel con las flechas de teclado y también podemos mover cada 5 pixeles presionando la tecla shift y las flechas del teclado a la vez.
También disponible en Google Chrome.
Enlace: https://addons.mozilla.org/es/firefox/addon/measureit/
Ghostery
Esta extensión nos viene de mucha ayuda para proteger nuestra privacidad, contiene una base de datos de rastreadores de Internet (1927 rastreadores hasta la fecha según su pagina oficial) Ghostery realiza una selección y filtrado de mas de 1900 rastreadores y mas de 2000 patrones de rastreo, se pueden realizar bloqueos rastreador por rastreador, sitio por sitio o pausar el bloqueo en momentos en que se quiera desactivarlo, estos perfiles de rastreadores son muy útiles ya que podemos saber mas sobre las empresas que nos andan rastreando.
También disponible en Google Chrome, Opera y Safari.
Enlace: https://addons.mozilla.org/es/firefox/addon/ghostery/
Flagfox
Flagfox nos muestra un icono de la bandera correspondiente al país donde se encuentra ubicado el servidor de la pagina web que estamos visitando, al hacer click en la bandera arranca una acción predeterminada llamada GeoTool, el cual nos proporciona un mapa detallado con la ciudad en donde se encuentra el servidor y otras características útiles. Esta extensión también tiene otras acciones importantes como comprobaciones de seguridad en webs y malware, traducciones automáticas, Whois e información sobre DNS, Contracción de URLs, Copiar la dirección IP , características de un servidor y muchas acciones más, para mas exactitud esta extensión actualiza su base de datos mensualmente.
Enlace: https://addons.mozilla.org/es/firefox/addon/flagfox/
Awesome Screenshot Plus
Esta extensión tiene la funcionalidad de realizar capturas de pantallas y exportarlos en formato PNG o JPG, puede realizar capturas de partes visibles o de toda la página, también cuenta con un editor básico de imágenes por si quisiéramos añadirle algunos apuntes, recortes, flechas, etc. Cuenta también con una opción para mostrarnos paginas similares a la web que estamos visitando.
También disponible en Google Chrome, Opera y Safari.
Enlace: https://addons.mozilla.org/es/firefox/addon/awesome-screenshot-capture-/
DOM Inspector
DOM Inspector es una extensión muy útil para inspeccionar, examinar y editar el DOM de nuestras aplicaciones web. La jerarquía DOM puede ser navegado utilizando una ventana de dos paneles en donde nos muestra diferentes características sobre el documento y todos los nodos. Generalmente al habilitar estos dos paneles la carga automática puede variar dependiendo el servidor de la aplicación web, de tal forma que se puede hacer una carga manual del documento a inspeccionar.
Enlace: https://addons.mozilla.org/es/firefox/addon/dom-inspector-6622/
Rainbow Color Tools
Esta es una extensión que contiene herramientas para manejo de colores, puede extraer la paleta de colores de la página web actual, también tiene un inspector de colores copiando el color al hacer click sobre un sector en especifico, los valores de colores pueden ser visualizados en formatos hex, rgb y hsl CSS.
Enlace: https://addons.mozilla.org/en-US/firefox/addon/rainbow-color-tools/
FoxGuide
FoxGuide es una extensión que nos muestra unas grillas tanto horizontales como verticales con gran exactitud al estilo Photoshop, estas guillas nos ayudan al momento de colocar elementos simétricos en la página web, así poder obtener un diseño más estructurado, podemos quitar las grillas que queramos, se puede modificar la transparencia de su regla de tal forma que no sea perjudicial al momento de usarlos, estas grillas vienen con un color por defecto pero pueden ser cambiados acorde a la página web que lo apliquemos, entre otras opciones más.
Enlace: https://addons.mozilla.org/es/firefox/addon/foxguide/
Server Switcher
Server Switcher es una herramienta que nos permite trabajar fácilmente en nuestros sitios de desarrollo, es decir, nos permite probar nuestras aplicaciones tanto en un servidor local como en un servidor real en la web. Por ejemplo podemos estar trabajando en la siguiente dirección: http://localhost/mi_sitio (es decir servidor local), haciendo click en el icono de Server Switcher inmediatamente realiza una re dirección a http://www.mi_sitio.com (es decir el servidor en vivo) y viceversa, estos nombres del servidor local y real tienen que ser previamente configurados y desde luego pueden ser modificados.
Enlace: https://addons.mozilla.org/es/firefox/addon/server-switcher/
SeoQuake
SeoQuake es una extensión de SEO que ayuda a los webmasters que se ocupan de la optimización en motores de búsqueda (SEO) esta extensión permite obtener muchos parámetros de SEO importantes sobre un proyecto web en estudio y compararlos con los resultados obtenidos para otros proyectos competitivos. SeoQuake es bastante útil para estimar la eficiencia y la capacidad competitiva de los esfuerzos invertidos en la aplicación web.
SeoQuake consiste en dos partes funcionales. La primera es SeoBar. La segunda parte es el cálculo de los parámetros de resultados de búsqueda y su inclusión en las páginas de resultados de búsqueda (SERPs) para los motores de búsqueda más populares.
Enlace: https://addons.mozilla.org/es/firefox/addon/seoquake-seo-extension/
Nimbus Screen Capture
Nimbus Screen Capture es una extensión que nos sirve para realizar capturas de pantalla, incluso se pueden capturar áreas especificas de la pagina web seleccionando la región de interés, estas imágenes pueden ser almacenadas (en formatos JPG, PNG, BMP) localmente o también a Google Drive, cuenta con herramientas para edición de imágenes lo que hace mas fácil de tal forma se evita usar programas externos a Nimbus Screen. Existen tres caminos para realizar la captura de pantalla, una mediante un botón que se encuentra en la barra de direcciones, otra desde el menú contextual y por ultimo se lo puede realizar con una tecla de acceso rápido previa asignación al momento de configurar la extensión.
También disponible en Google Chrome (La extension se encuentra con el nombre Nimbus Screenshot).
Enlace: https://addons.mozilla.org/es/firefox/addon/nimbus-screenshot/
colorPicker
Otra opción a ColorZilla, esta extensión es muy útil para encontrar el código del color exacto en formatos hexadecimal o RGB de cualquier página web, su función es bastante sencilla, al momento de presionar el botón de colorPicker que se encuentra en la barra de direcciones del navegador nos abrirá una especie de ventana emergente donde nos da opciones a elegir si es que queremos capturar el color en RGB o hexadecimal, mediante movemos el cursor a cualquier parte de la página los colores de dicha página se irán mostrando en esta ventana emergente, si queremos obtener el código de color de alguna parte en especifico solo presionamos la tecla “escape” y automáticamente copiará el código en el portapapeles para posteriormente pegarlo en cualquier otro programa.
Enlace: https://addons.mozilla.org/es/firefox/addon/colorpicker/
Form History Control
Una extensión que nos ayuda a administrar la información de las entradas a formularios, nos permite también eliminar esta información para que no afecte en nuestra privacidad sin necesidad de borrar todo el historial, con la ayuda de expresiones regulares se puede recuperar y/o borrar la información de forma sencilla, podemos incluir su botón en la barra de direcciones de nuestro navegador y cada vez que llenemos un formulario de registro, por ejemplo un formulario para darse de alta en una aplicación, tendremos la opción de guardar los valores de todos los campos esto con el fin de que si en algún otro momento nos topamos con otro formulario directamente la extensión nos rellenara con los campos que vea apropiado, estos datos podemos gestionarlos desde su ventana de control de formularios y podemos eliminar como también agregar nuevos campos.
Desde el punto de vista del desarrollador si queremos probar el llenado de grandes formularios esta aplicación nos facilitará la vida y desde el punto de vista de usuario esta extensión cuidará nuestra privacidad borrando por completo todos nuestros datos personales que ingresamos en algún llenado de formulario.
Enlace: https://addons.mozilla.org/es/firefox/addon/form-history-control/
Font Finder
Font Finder es una extensión que esta orientada no solo para desarrolladores y diseñadores web, sino también para tipógrafos ya que permite analizar las fuentes de cualquier elemento de la página web y nos muestra todas las características de la fuente seleccionada, también tiene otras funciones muy útiles como modificar el tipo de fuente seleccionado, color, tamaño, espacios, etc. Es fácil de usarlo, solo basta seleccionar la fuente a analizar y haciendo clic derecho nos encontraremos con la opción Font Finder y las opciones anteriormente mencionadas. Si quieres ser bastante minucioso con tus diseños o analizar que tipos de fuentes utilizan otras páginas potenciales esta es una extensión que no debe faltar en tu navegador.
Enlace: https://addons.mozilla.org/es/firefox/addon/font-finder/
FireFTP
Es una extensión que nos permite integrar un cliente FTP al navegador, bastante intuitivo para conectarnos a nuestro servidor, entre sus principales características FireFTP mantiene los directorios sincronizados durante la navegación, cuenta con la opción de exportar e importar cuentas, también tiene soporte SSL / TLS / SFTP, soporte de cualquier codificación de caracteres incluido UTF8, búsqueda y filtrado, drag & drop y muchas opciones más. Sin duda es una extensión bastante práctica y sobre todo es gratuita, multiplataforma y cuenta con mas de 20 idiomas.
Enlace: https://addons.mozilla.org/es/firefox/addon/fireftp/
FireSSH
Desarrollado netamente en Javascript y del mismo desarrollador de la extension FireFTP, Mime Cuvalo tambien nos ofrece la extensión FireSSH, que es un cliente para conectarnos a nuestro servidor de forma segura mediante el protocolo SSH. Podemos añadir un boton en la barra de direcciones del navegador (es necesario reiniciar Firefox despues de haberlo instalado). Básicamente para conectarnos debemos introducir nuestro datos de cuenta, host, login y password, podemos también iniciar la sesión de manera anónima seleccionando la opción “Anonymous”, sin embargo la mayoría de veces se tendrá que introducir nombre de usuario y contraseña, para copiar debemos hacer uso de las siguientes teclas: Ctrl-Shift-C (Command-Shift-C en Mac) y para pegar Ctrl-Shift-V (Command-Shift-V en Mac). Fire SSH tiene varias opciones así es que te recomiendo que visites su página oficial para recabar mas información y conocer sus otras funcionalidades.
También disponible en Google Chrome.
Enlace: https://addons.mozilla.org/es/firefox/addon/firessh/
Por lo tanto…
Tener extensiones tan útiles como los que acabamos de mencionar ya que son imprescindibles en nuestro navegador y nos facilita en muchos aspectos el proceso de desarrollo de nuestras aplicaciones web. Si eres de mas afecto a otros navegadores como Google Chrome te habrás dado cuenta que gran parte de estas extensiones también las puedes encontrar en el chrome web store.
Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
