Si alguna vez te preguntaste cómo están hechos todos esos complementos de Firefox, probablemente hayas descubierto (quizás con alguna decepción) que no son tan fáciles de programar. Tenés que aprender un lenguaje llamado XUL para la UI, asimilar un montón de nuevos términos como Overlays, XPI, XPCom... Pero che, no estoy diciendo que todo esto es imposible de aprender (de hecho hay un montón de documentación y tutoriales disponibles), sino que simplemente hay que aprender algo nuevo.

Así que Mozilla pensó sobre esto por un tiempo, y salieron con una idea bastante piola: lo más probable es que vos ya conozcas JavaScript, CSS y HTML. Por qué deberías tener que aprender algo nuevo? Y así nació Jetpack, una nueva forma de programar complementos, en tan sólo un archivo y completamente programados en JavaScript, CSS y HTML.

Firebug y Jetpack

Y qué relación tiene Jetpack con Firebug? Bueno, bastante. Como dicen en el sitio de Jetpack, "para no reinventar la rueda" usaron Firebug para depurar y loguear. Hasta ahora todo perfecto: una manera simple para desarrollar complementos, un lindo depurador... qué más se podría pedir?
Quizás que ambos funcionen juntos ni bien los instalamos?

Como algunos se han dado cuenta, las últimas versiones de Firebug y de Jetpack no funcionan bien juntas de entrada. Esto es porque la versión actual de Jetpack (0.6.2) usa una vieja llamada a la API para comunicarse con Firebug, que cambió en la versión 1.4.3. Al parecer desarrollaron toda la interacción con Firebug usando Firebug 1.4.2, con lo cual nunca se enteraron del cambio en la API de Firebug. Pero a no desesperar! Hay una solución para esto, y es tan simple como cambiar una sóla palabra en una sóla linea de código.

Haciendo que ambos vuelvan a llevarse bien

Nota importante:
Al momento de escribir este artículo el bug abierto para este problema ya está en "Verified and Fixed", lo cual siginifica que el arreglo estará disponible en la próxima versión de Jetpack. Mientras tanto, vas a tener que hacer la siguiente modificación a mano para poder usar Jetpack con un Firebug 1.4.3 o posterior.

Primero que nada, vas a tener que ubicar tu perfil de Firefox. Esto depende de tu sistema, pero acá están algunas de las ubicaciones más comunes:

• Linux:
  ~/.mozilla/firefox/<profile folder>

• Mac OS X:
  ~/Library/Mozilla/Firefox/Profiles/<profile folder>
  Ó
  ~/Library/Application Support/Firefox/Profiles/<profile folder>

• Windows XP:
  C:\Documents and Settings\<Windows login/user name>\Application Data\Mozilla\Firefox\Profiles\<profile folder>

• Windows 7:
  C:\Users\<Windows login/user name>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile folder>

Si estás usando Firefox 3.6, podés ir a la URL "about:support" y ahí hay un botón que te lleva a la carpeta con tu perfil.

Una vez encontrada la carpeta de tu perfil, vas a tener que ir a esta carpeta que se encuentra dentro del mismo:

extensions/jetpack@labs.mozilla.com/content/js/xul

y editar el siguiente archivo:

firebug-extension.js

Cambiando la línea 19 de:

Firebug.URLSelector.watchBrowser(browser);

A:

Firebug.Activation.watchBrowser(browser);

Guarda el archivo, reinicia Firefox, y voilà, ahora Firebug y Jetpack deberían estar trabajando juntos!

Probando si Firebug está funcionando

Si querés saber si Firebug está funcionando como lo esperado, copiá el siguiente código en la parte de "Develop" en Jetpack:

jetpack.future.import("menu");

jetpack.menu.context.page.add({
    label: "LoguearEsto!",
    command: function(){
        console.log("Firebug está Andando OK");
    }
});

Ahora apretá el botón "Try out this code", habilitá Firebug y actualizá la página. Si todo salio bien, ahora debería haber una nueva entrada en el menú de contexto de la página, llamada "LoguearEsto!". Si hacés click en la misma, y en la consola aparece el texto "Firebug está andando OK", entonces Firebug está andando correctamente.

Hemos hecho un gran avance con John J. Barton en una nueva extensión para Firebug llamada Eventbug. Un agradecimiento enorme a Olli Pettay (smaug) por arreglar los bugs #448602 + #506961 y por brindar la nuevas API de Firebug que permiten enumerar los event listeners en una página web!

Tengan en cuenta que estas APIs están disponibles en Firefox 3.7a1pre (espero que puedan lograr entrar en Firefox 3.6) y también van a necesitar  Firebug 1.5 para poder hacer las pruebas.

Esta extensión trae un nuevo panel de Eventos que lista todos los manejadores de eventos de una página, agrupados por tipo de evento. El panel también se integra de una manera prolija con otros paneles de Firebug, y permite buscar rápidamente que elemento HTML está asociado con un event listener específico o ver su código fuente JavaScript.

Así que, veámoslo en acción!

Panel de Eventos

La captura de abajo muestra el contenido del panel de Eventos y los tres paneles de costado (click para ver la imagen en tamaño original).

Los paneles de costado son sincronizados con el listener que haya sido seleccionado en el área principal de contenido.

• Targets Muestra la lista de targets de eventos que serían usados como DOMEvent.currentTarget cuando el evento burbujee (bubblee). Todos los targets son clickeables y dirijen al usuario al panel de HTML
• Script Muestra el código fuente del listener seleccionado.
• HTML Muestra el código HTML del elemento que está asociado con el listener seleccionado.

Panel HTML

La extensión también registra un nuevo panel de costado para Eventos en el panel de HTML.

En este caso, el panel lateral de Eventos muestra todos los event listeners registrados para el elemento HTML seleccionado.

Configuración Recomendada

Firefox 3.7a1pre
Firebug 1.5b1
Eventbug 0.1a2

Errores Conocidos

Eventbug todavía está en una etapa alfa, y hay algunos errores conocidos..

• El panel no es actualizado si los listeners son agregados o eliminados dinámicamente dependiendo de acciones del usuario. Tu tienes que hacer click manualmente en el botón de Actualizar (Refresh, en la barra de herramientas). esto va a ser arreglado tan pronto como se solucione el bug #524674 (gracias Smaug! )
• Si un listener es definido usando un atributo HTML (i.e. click="alert('Hola Mundo!')" ) el código fuente no es compilado hasta que el listener es efectivamente ejecutado (es una optimización de Firefox). La UI de Eventbug no indica esto, y puede pasar que el link que lleva al código fuente de un listener no funcione. El link debería ser deshabilitado si el objeto script no está disponible.
• El panel lateral de Script todavía no deja crear puntos de interrupción.

Y por cierto, como es usual, si tienes cualquier idea acerca de cómo mejorar esta característica, háznoslo saber dejando un comentario aquí o en el grupo oficial (en inglés). Si encontrás un bug, por favor reportalo.

Gracias!

Esta es la segunda parte de la Encuesta sobre Características de Firebug (acá está la primer parte). Esta vez, enfocándome en las respuestas a la pregunta: ¿Cual es la característica de Firebug que menos te gusta? ¿Y la que nunca usás? No se si la pregunta estaba mal formulada o si la gente tenía ganas de expresarse, pero muchos de los encuestados no se limitaron a sólo una cosa. Como resultado, tuve que modificar un poco mi para nada científica metodología y contar las características mencionadas como votos, en vez de sólo clasificarlas en categorías.

Como en la encuesta anterior, agregué una columna de "Basura" para las respuestas que realmente no tenían sentido. Es muy bueno escuchar "Yo <3 Firebug!" (y Firebug te <3 a vos también!) pero no ayudaba mucho en los objetivos de esta encuesta. Complementando esta columna, creé otra categoría para las respuestas lamentándose por la estabilidad de Firebug o la ausencia de ciertas características específicas. Esta categoría empató en el primer puesto, con la mayor cantidad de votos.

Los Ganadores

Tercer puesto – Empate!

• La Búsqueda
• Consola. Me sorprende que haya algunas personas a las que no les gusta la consola, pero dos de ustedes piensan de esa manera. Una persona mencionó que aparecen un montón de excepciones provenientes del navegador, degradando la calidad de la información. Estas excepciones por lo general pueden reducirse de-seleccionando la opción "Mostrar Errores de Chrome" y las opciones de mensajes en el mini-menu del panel de Consola.

Segundo puesto – Empate!

Estos tienen la sospechosa distinción de tener la misma cantidad de respuestas que la columna de Basura (Junk).

• Panel CSS
• Panel DOM
• Perfilador

Primer Puesto

• Panel de Script — Las respuestas variaron desde "No se cómo utilizar las interrupciones" hasta usuarios que prefieren usar la consola para hacer depurado interactivo al estilo del printf. Otros encuestados demandaron que el panel de script era demasiado defectuoso.

advertencia: Creo que es probable que exista más de un tipo de usuario de Firebug. Alguno de ellos pueden no estar usando Twitter y esta encuesta no les habrá llegado. Los tipos de usuarios que respondieron y dijeron que su característica favorita era el Inspeccionador de HRML y la edición en vivo de CSS son probablemente el mismo grupo de personas que no hacen un uso extensivo del depurador de Scripts. Si sos un arduo depurador, por favor exprésalo en los comentarios.

Menciones Honorables

• Editor de nodos HTML – Si haces doble click en un tag en la vista HTML, verás un editor de nodos. Haciendo click en el boton "Editar" o usando la tecla Escape te sacarán de ahí.

• Registración de Eventos – haz click derecho en un nodo en el panel HTML y selecciona "Registrar Eventos". Ahora cada mousemove, click y keytroke en ese nodo será registrado en la Consola. Cómo puedes no amar eso?

No hubo ningun voto(!) para el panel de Red, así que claramente todo el mundo lo ama y piensa que es alucinante.

Conclusiones

• Necesitamos trabajar más duro en arreglar errores y problemas de estabilidad. Emplear un montón de esfuerzo en estabilidad y usabilidad probablemente sea una muy buena manera de hacer de Firebug una mejor y más placentera pieza de software.

• Las pestañas de CSS y DOM no son muy queridos. Agregar una mejor navegación a la página de DOM, o rehacerla por completo puede ser útil. Deshacerse por completo de él y el panel de CSS puede ser otra opción, pero no una que queramos considerar sin ver una fuerte devolución desde la comunidad.

• El Perfilador va bastante bien con el panel de Script. Si no estas haciendo una fuerte depuración de JavaScript, puede que no necesites el perfilador. Es una herramienta de un uso bastante específico para medir la performance del JavaScript de una página.

• La Búsqueda fue casi una sorpresa, pero la estamos mejorando para la versión 1.5 así con un poco de suerte se vuelve más sencilla de usar.

Al igual que antes, por favor déjanos tus comentarios si piensas que algo se nos pasó por alto.

La semana pasada hice una encuesta un poco informal mediante Twitter y Rypple, preguntandole a los usuarios cuales eran las características de Firebug que más querían y cuales menos. Yo voy a ser la primer persona en admitir que esta encuesta no es exactamente de una rigurosidad científica, dado que sólo tuvimos un numero limitado de encuestados de un espacio muestral posiblemente limitado (más que nada usuarios de Twitter de habla inglesa, a lo sumo conectados a mi con sólo unos pocos niveles de indirección). De todos modos los resultados fueron interesantes, dado que confirmaron lo que sospechaba acerca de la mayoría de la gente usando Firebug. Espero completamente que haya otros tipos de usuarios que graviten más fuertemente hacia otras características.

El desglose de los datos de esta torta 3D muestra que el 55% de los usuarios llaman por lejos al Inspeccionador su característica favorita. En realidad, esto es probablemente cercano al 73% si lo combinas con el 18% que indicó al tab HTML como su favorito. Cuando que la mayoría de la gente piensa "inspeccionar" o "html", la siguiente característica que describen es "ser capaz de modificar el CSS o ver la maquetación de tal nodo en el panel HTML".

La siguiente característica favotira es un empate entre el Panel de Red y la Consola. Es posible que desde que recolecté las respuestas ese empate se haya roto, pero ciertamente no por mucho, y probablemente no dentro de un apropiado margen de error. El restante 9% de las respuestas era ruido incompresible de la internet. La estática cósmica de fondo tomando consciencia propia.

Cómo ayuda esto? Bueno, desde luego que nos dice donde necesitamos enfocar nuestros esfuerzos. Hemos visto unos cuantos errores en el Inspeccionador durante el último par de años y creemos que en la versión 1.5 vamos a tener a la mayoría de ellos arreglados. El molesto resaltado desfasado y los raros errores con el z-index deberían ser cosa del pasado gracias al trabajo del colaborador Mike Ratcliffe, que llego a nosotros a través del poryecto Firebug Lite.

Pienso continuar un poco más tarde con los resultados de pregunta acerca de "la característica ménos querida". Esos son un poco más de difíciles de encontrarle el sentido, dado que las respuestas no fueron tan obviamente claras. Por favor haznos saber si este gráfico de torta coincide ( o no ) con lo que tu piensas es tu categoría favorita. Éste no es el fin de la cuestion, recién estamos empezando.