Esta es la continuación del
post de herramientas de desarrollo que puedes utilizar usando add-ons de Firefox.
Firebug (
link) es uno de los add-ons para Firefox mas complejos y mas populares en los círculos de desarrolladores. Te permite modificar a tu antojo la estructura del DOM de cualquier pagina en la que estés navegando, modificar sus clases CSS y depurar sus scripts,
monitorear http requests, ejecutar scripts sobre las paginas web, perfilar los tiempos de carga/ejecución de scripts, etc. aplicando todos los cambios realizados en caliente, visualizándolos al muy estilo WYSIWYG aunque obviamente todos estos cambios que se realizan no se aplican en el servidor. Entre sus usos mas comunes es depurar código javascript o aplicar cambios en el HTML/CSS asegurándose que se verán correctamente ya que estas realizando estos cambios directamente en el navegador.
"Editando en caliente las propiedades CSS de la pagina de google.com desde Firebug"La característica especial que distingue a este add-on es la posibilidad de ser extendido mediante mas add-ons (sub add-ons) los cuales le permiten hacer muchas mas tareas de las que actualmente permite.
CodeBurner for Firebug (
link) Este add-on te muestra una nueva pestaña después de la pestaña DOM, con la palabra "Code Example" en la cual, cuando estas inspeccionando el HTML de un sitio y tienes dudas sobre algún tag, este te muestra una pequeña referencia con la descripción de dicho tag y un sencillo ejemplo.
"Visualizando una referencia sobre el tag desde Code burner, el tag se encuentra en la pagina principal de flickr.com, como se puede ver en la imagen"FireFinder for Firebug (
link) Este add-on te permite hacer búsquedas de cualquier elemento HTML dentro del sitio que estas visitando. Esta búsqueda puede ser del texto contenido dentro de alguna etiqueta o mediante el uso de selectores similares a los usados en
prototype o
jquery. Una vez encontrado el elemento, te lo remarca dentro de la pagina web con lineas punteadas rojas y te muestra un vinculo llamado "inspect" el cual te permite ubicar este elemento dentro de la pestaña "HTML" de Firebug. Como bonus también te permite generar un vinculo para FriendlyFire usando
jsbin, con el cual compartes el código HTML mediante una URL para poder ser visaulizado y editado por otros, muy al estilo de
pastebin.
"FireFinder, remarcando el logotipo de twitter en la pagina de twitter.com, el cual fue buscado usando el selector #header2>a.logo"
(
link) Este add-on de brinda la capacidad de monitorear y modificar las cookies que están siendo ocupadas en los sitios que visitas.
"FireCookie, mostrando las cookies que se almacenan localmente al entrar al sitio delicious.com" (
link) Es un sencillo add-on que te muestra un selector de color (color picker) cuando dentro de una pagina web estas inspeccionando las propiedades css relacionadas con el color de un elemento. De esta forma puedes seleccionar el color de manera visual y este te escribe su respectivo codigo RGB.
"Seleccionando un nuevo color usando FirePicker para la propiedad CSS background-color, en uno de los elementos del sitio deviantart.com" (
link) Con Fireunit puedes escribir
Unit Tests para Javascript y ejecutar/visualizar sus resultados desde una pestaña en Firebug. Esto lo haces desde la nueva pestaña llamada "Tests" que te aparece en Firebug al instalar este add-on. El modelo de código para estos unit tests aparece en el mismísimo código fuente del sitio de fireunit, cuando lo inspeccionas con Firebug. Dicho código se muestra a continuación:
// Some examples of using FireUnit
if ( typeof fireunit === "object" ) {
// Simple true-like/false-like testing
fireunit.ok( true, "I'm going to pass!" );
fireunit.ok( false, "I'm going to fail!" );
// Compare two strings - shows a diff of the
// results if they're different
fireunit.compare(
"The lazy fox jumped over the log.",
"The lazy brown fox jumped the log.",
"Are these two strings the same?"
);
// Compare a string using a regular expression
fireunit.reCompare(
"The .* fox jumped the log.",
"The lazy brown fox jumped the log.",
"Compare a string using a RegExp."
);
// Display the total results
fireunit.testDone();
}
"Visualizando con FireUnit el resultado de los unit tests de ejemplo que vienen en el sitio fireunit.org"
