Clicky

10 Add-Ons de Firefox fundamentales para desarrolladores

Add-ons para Firefox

1. Firebug

Uno de los más populares y potentes add-ons para Firefox, considerado por muchos la mejor herramienta para desarrolladores. Firebug ofrece una gran cantidad de tareas de desarrollo a su alcance: Puedes editar, depurar y monitorear CSS, HTML y JavaScript en vivo en cualquier página web.

Es extremadamente potente y puede ayudarte a encontrar rápidamente los errores, la actividad de monitor de red, explorar objetos DOM e incluso ver y administrar las cookies. La ficha Diseño también cuenta con reglas y guías, particularmente útiles al trabajar con CSS, donde la precisión es clave.

Firebug se puede ampliar más con una gran cantidad de extensiones disponibles que, como FirePHP, cuando se utiliza con Firebug puede ayudarte a crear un entorno de desarrollo con todas las funciones.

Firebug add-on para Firefox

2. Web Developer

Web Developer agrega un conjunto de herramientas y menús personalizados. Se usa en conjunto con Firebug para una máxima funcionalidad y control sobre el código y analizar, validar y optimizar las páginas web. Una característica principal de la barra de herramientas de Web Developer es la posibilidad de editar el código CSS sobre la marcha, lo que le permite probar diferentes tipos de letra, revisar y editar el fondo, bordes, relleno, márgenes y mucho más - y los cambios aparecen al instante.

Las tareas están convenientemente agrupadas en categorías intuitivas, como "CSS" o "Imágenes", con opciones para mostrar una regla y caminos de imagen, y cambiar el tamaño de la ventana actual en varias resoluciones. Se usa para comprobar el cumplimiento de sitio web a los estándares web y pautas de accesibilidad.

Web Dewelopper

3. FireFTP

FireFTP es un cliente FTP basado en navegador que proporciona un acceso fácil e intuitivo a su servidor a través de Firefox, y tiene todas las características que esperarías de la mayoría de aplicaciones independientes de FTP. Puede manejar múltiples cuentas, apoyar transferencias seguras y cuenta una interface bien organizada de arrastrar y soltar. Es multiplataforma y permite a los usuarios importar y exportar la configuración de la cuenta, y lleva soporte para la sincronización y la comparación de directorios, sello de tiempo y reconexión automática.

Una vez instalado, es muy fácil utilizarlo. Ingresa tus credenciales FTP, arrastra y suelta desde el ordenador al servidor o haz clic derecho en un archivo alojado y editar dentro de Firefox, a continuación, actualizar el archivo directamente en el servidor.

NOTA: Después de 13 años y 25 millones de descargas más tarde, Firefox ha eliminado oficialmente del navegador la compatibilidad con FireFTP y FireSSH. Por lo tanto, se ha terminado el soporte/desarrollo de los complementos. FireFTP recomienda cambiar a Waterfox para continuar usando esos complementos.

FireFTP

4. YSlow

YSlow de Yahoo se integra con Firebug para analizar las páginas web y afinar su rendimiento. Sus grados de páginas web están basados en uno de los tres conjuntos de reglas predefinidas, o un conjunto de reglas personalizadas definidas por el usuario, y ofrece sugerencias y herramientas (tales como Smush.it o JSLint) para mejorar el rendimiento de la página. Con Google, Page Speed "‹"‹cuenta ahora como un factor de clasificación, es esencial para optimizar tu sitio web para asegurar una respuesta y tiempos de carga rápidos.

YSlow funciona mediante el rastreo de la DOM para encontrar todos los componentes, recuperar información acerca de cada componente y luego toma los datos recogidos y genera un grado para cada norma, que produce la calificación global.

YSlow

5. Greasemonkey

GreasemonkeyGreasemonkey es un único complemento que te permite añadir JavaScript a cualquier página web, lo que le permite realizar cambios rápidos a los contenidos de una página web (denominado "navegación aumentada"). Ejecutar scripts (de usuario) que alteran un determinado sitio web y, luego cada vez que posteriormente se visita la página, Greasemonkey aplicará el script(s) activo, haciendo el cambio con eficacia permanente. Puedes editar tus sitios web favoritos para adaptarlos a sus necesidades particulares y estéticas.

Al igual que el CSS te permite tomar el control de estilo de una página web, los scripts de usuario de Greasemonkey permiten controlar cualquier aspecto de su apariencia. Si no deseas crear tu propio recurso dedicado UserScripts.org tiene miles de scripts que se pueden descargar y guardar en tu propia biblioteca.

6. JSONView

Trabajar en el navegador con datos JSON en el desarrollo de servicios web RESTful puede ser un enorme dolor de cabeza, los datos en bruto no tienen formato y se está obligado a descargarlos para verlos en un editor de texto externo. Sin embargo, JSONView añade un tipo de análisis de contenido de los resultados de la aplicación/JSON y luego vuelve a dar formato a los datos en bruto JSON en el navegador junto con las regiones plegables para los objetos. El documento tiene formato similar a XML, resaltar, sangría, e incluso si el documento contiene errores, JSONView seguirá mostrando el texto sin formato.

Puedes seguir utilizando "Ver código fuente" para ver la cadena JSON devuelta, con una opción para enviar la application/JSON en las cabeceras HTTP Accept. Si está trabajando con datos de resultados y usando datos de AJAX y estilos REST y GET en las URLs, JSONView te puede ahorrar bastante tiempo.

JSONwiev

7. RESTClient

Probar y depurar servicios Web puede ser una tarea ingrata y muchas veces significa utilizar un voluminoso IDE (entorno de desarrollo integrado). Sin embargo, RESTClient es una sencillo e intuitivo,add-on para Firefox, una manera fácil de obtener una vista previa de respuestas para las solicitudes HTTP e inspeccionar sus cabeceras de respuesta. Es especialmente útil cuando se trabaja con APIs. Especifica la dirección URL, el método (POST, GET, PUT) y cualquiera de las cabeceras de petición y cuerpo - RESTClient entonces te dirá si la solicitud se realizó correctamente y se puede examinar la respuesta.

También trabaja con los servicios REST y datos JSON, e incluso publicar de nuevo y recibir XML. Si bien es una forma rápida y simple de add-on, es también una herramienta poderosa y muy eficaz que puede ayudar a ahorrar tiempo y agilizar el flujo de trabajo de desarrollo.

RESTclient

8. Empty Cache (Vaciar caché)

Si ya se ha almacenado en caché un nuevo cambio en directo o característica, el navegador podría seguir sirviendo a la versión anterior del archivo en lugar del cambio más reciente. Es por eso que como desarrollador web es tan importante borrar la caché. Con Empty Cache, borras de forma rápida la memoria caché de tu navegador y vuelve a cargar la página con un solo clic, sin necesidad de interrumpir la sesión del explorador. Cuenta con un solo botón para borrar cuatro tipos de caché (memoria, disco, Offline y Favicon), con grano fino, opciones configurables para ocultar o mostrar notificaciones, y lo que debe recargar después de que la caché ha sido borrada.

Mientras que la opción de borrar la memoria caché se encuentra dentro de la barra de herramientas de desarrollador o por varios niveles en los menús, un botón situado en la barra de herramientas principal es una opción rápida y elegante, y más fiable que recarga forzada.

vaciar caché - Empty Cache

9. JS Deminifier

Si has visto el código fuente de cualquier página web en los últimos años, es probable que hayas visto el JavaScript minificado, donde se han eliminado todos los espacios en blanco innecesarios. Reduce el tamaño de los archivos JavaScript y ayuda a mejorar el rendimiento de un sitio web de carga de la página, sin embargo, hace difícil la lectura y la depuración de JavaScript. JSDeminifier se integra en Firebug y utiliza el algoritmo de JSBeautifier.org para embellecer y dar formato a la elegancia del JavaScript. Se puede activar y desactivar desde una pestaña haciendo clic en el texto JSDON/JSDOFF en la barra de estado, pero no se aplicará al JavaScript que ya está cargado.

Está desactivado por defecto hasta que habilita, y es una ingeniosa herramienta de ahorro de tiempo para los desarrolladores y autores de Greasemonkey para ayudar a editar y depurar JavaScript minificados o mal escritos.

JS Deminifier

10. FireShot

Esta gran utilidad add-on puede capturar no sólo el área visible de una página, sino también toda la página, no importa cuán grande. Puede añadir gráficos y notas directamente en la captura de pantalla y guardar el archivo como un archivo BMP, JPG, GIF o PNG. También puede exportar imágenes (al portapapeles), subirlas a las redes sociales, correo electrónico o guardarlas en el servidor FireShot de alojamiento gratuito. Es increíblemente sencillo añadir en la captura anotaciones de texto o elementos de forma rápida de tamaño, recortar, toque de luz, borrar o desenfocar.

Una vez capturada, la captura de pantalla se muestra en una ventana independiente en FireShot, donde se puede hacer edición básica. La barra de herramientas de edición aparece como una ventana flotante, que se puede utilizar para realizar ajustes. La versión Pro añade funcionalidades.

FireShot

 

Jesus_Caceres