Avisar de contenido inadecuado

10 Extensiones de Firebug que deberias conocer

{
}

Logo Firebug

Si estas en el mundo del Desarrollo Web, es muy probable que ya conozcas Firebug.

Este popular plugin de Firefox nos permite, entre otras cosas, hacer debug del Javascript, cambiar el CSS de tus paginas en tiempo real y ver el trafico de red de tu pagina.

Pero aparte de lo que viene de serie, Firebug nos permite añadirle funcionalidades a traves de extensiones. Algunas de estas extensiones se estan convirtiendo en imprescindibles para muchos diseñadores y programadores web.

Asi que aquí os dejo una lista de las 10 extensiones para Firebug que considero más interesantes:

1.- PixelPerfect

Screenshot de PixelPerfect

La herramienta perfecta para los diseñadores y para los obsesivos del pixel perfectamente colocado (conozco yo a unos cuantos).

Te permite poner como fondo semi-transparente el diseño de tu página web, de forma que luego puedes ajustar el CSS para hacer tu maquetado “pixelarmente” perfecto.

Descargar PixelPerfect

2.- YSlow

Screenshot YSlow

YSlow analiza tu sitio web y te muestra un informe de su rendimiento. En este informe sugiere mejoras que puedes acelar para acelerar la carga de tu página.

El analisis que hace YSlow está basado en las reglas que sugiere Yahoo para webs de alto rendimiento desde su Developer Network.

Descargar YSlow

3.- CodeBurner

Screenshot CodeBurner

CodeBurner te permite acceder desde Firebug al material de referencia de HTML y CSS de SitePoint.

Te muestra un pequeño informe con la posibilidad de acceder a la descripción detallada de la propiedad CSS  o del tag HTML  seleccionado

Descargar CodeBurner

4.- FireQuery

Screenshot FireQuery

Con este complemento de FireBug podras ver desde la consola o desde el inspector de DOM tus expresiones jQuery (eventos, data, colecciones).

Imprescindible si quieres depurar Javascript bajo jQuery.

Descargar FireQuery

5.- Widerbug

Screenshot Widerbug

Con esta extensión instalada podras ver Firebug como panel lateral del browser lo que nos permite aprovechar el ancho de las pantallas panorámicas.

Simple pero efectivo, no?

Descargar Widerbug

6.- FireCookie

Screenshot de FireCookie

Con esta extensión podras ver y manejar las cookies desde Firefox de una manera sencilla.

Descargar FireCookie

7.- FireRainbow

Screenshot de FireRainbow

FireRainbow colorea tu codigo y te permite aplicar diferentes temas. Muy util sobre todo para la lectura del código JavaScript desde Firebug.

Descargar FireRainbow

8.- FirePHP

Screenshot FirePHP

Te permite comunicarte con la consola de Firebug desde PHP. Ideal para debuggear desarrollos PHP con llamadas AJAX.

Descargar FirePHP

9.- Jiffy

Screenshot de Jiffy

Esta extensión añade un panel a Firebug que te muestra de forma visual los tiempos de ejecución del JavaScript. Perfecto para analizar el rendimiento de tu JS.

Descargar Jiffy

10.- FireFinder

Screenshot de FireFinder

Con esta herramienta podras localizar rapidamente los elementos HTML de tu paginas mediante selectores CSS o expresiones XPath.

Tambien te puede servir para chequear que tus selectores CSS estan accediendo a los elementos correctos.

Descargar FireFinder

Y hasta aqui la lista...

¿Que opinas de Firebug? ¿Y de estas extensiones? ¿Las has probado? ¿Alguna extension que no esté en la lista y que nos quieras recomendar?

Esperamos vuestros comentarios.

Enlaces y mas

{
}

Álbum de fotos de 10 Extensiones de Firebug que deberias conocer

4 about 11

Ver fotos de 10 Extensiones de Firebug que deberias conocer

{
}

Comentarios 10 Extensiones de Firebug que deberias conocer

[...]rgin-right: 340px; min-height: 0;"> 10 Extensiones de Firebug que deberias conocer pixelovers.com/10-extensiones-firebug-deberias-conocer-1158533 –[...]

Muy bueno e interesante el post. De todas las que hablaron me llevo Fire Query, a ver que tal.


Ojalá sigan escribiendo de manera más regular :P

PixelPerfect - es la herramienta ideal para el maquetador con el fin de obtener un resultado fiable al pixel. 7/10


  El principal problema es que para eliminar las imágenes añadidas no funciona correctamente desde el plugin. Cuando arrancamos vuelven a aparecer. Hemos de eliminar las imágenes de un directorio del plugin.


YSlow - es imprescindible para el analisis del rendimiento de carga de la página. 8/10


CodeBurner - como herramienta de consulta es muy util pero mi experiencia me dice que es uno de los plugins de los que te cansarás enseguida. 4/10


FireQuery - muy bueno si trabajas con jQuery. Lo mejor la gestión de eventos que nos muestran todo lo que se ha añadido por jQuery. Tiene un pequeño problema cuando quieres mostrar la función de un evento. Hay veces que te muestra la posibilidad y otras no, sin patron aparente. 8/10


WiderBug - no lo he probado nunca, pero me parece muy interesante, me comprometo a probarlo y te cuento.


FireCookie - muy util si necesitas ver las cookies, lo peor es tal y como muestra los cambios de cookies en la consola, hace imposible un debugado normal. 6/10


FireRainbow - es muy util si estas acostumbrado a los IDE que colorean los textos. Añade sólo estilos al código. 5/10


FirePHP - jamás he conseguido hacerlo funcionar, además no he encontrado ningún tutorial que muestre todo el proceso. 2/10


Jiffy - muy bonito pero no es necesario. Firebug tiene su propio profiler y da muchísima información más que el propio Jiffy. 2/10


Firefinder - un plugin innecesario. Firebug tiene su propio buscador que busca dependiendo de la pestaña que tengamos abierta. 1/10



Muy interesante el post.

Tomás Corral Tomás Corral 25/01/2011 a las 14:59

@Nichitox, gracias :-)

@Tomas, muchas gracias por tu comentario tan completo :-)
Alguna sugerencia para esta lista en sustitución de FireFinder y Jiffy? Me refiero a extensiones que suelas usar y que no esten en esta lista

Muy buen post. Me descargué el de FirePHP, me servirá mucho para mis páginas web hechas con Joomla

Gracias por esta información, desconocía esto aunque había oído hablar de esto, ahora me tocará informarme de una forma más profunda. Gracias por este post!! Un saludo

[...]s="Apple-style-span" style="color: rgb(68, 68, 68); font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20px; ">Fuente: PixelLovers[...]

Muy interezantes, mi duda es ¿qué tal funcionan esas extensiones en una pc con 1gb de ram? Hace poco léi un articulo sobre las extensiones que ponian más lento al Firefox y Firebug era el primero, supongo que después de ponerle más extensiones, se pondrá peor.

Deja tu comentario 10 Extensiones de Firebug que deberias conocer

Identifícate en OboLog, o crea tu blog gratis si aún no estás registrado.

Avatar de usuario Tu nombre