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.

If you ever wondered how all those Firefox extensions are made, you probably discovered (maybe with some disappointment) that they're not that easy to code. You have to learn a language called XUL for the UI, assimilate a lot of new terms like Overlays, XPI, XPcom... But hey, I'm not telling this stuff is impossible to grasp (in fact, there's a lot of documentation and tutorials available), just that you have to learn something new.
So Mozilla thought about that for a while, and came up with a pretty cool idea: you are most likely to allready know JavaScript, CSS and HTML. Why you should have to learn something new? And thus born Jetpack, a new way to code Add-Ons in just a single file and entirely coded in JavaScript, CSS and HTML.

Firebug and Jetpack

And what has Jetpack to do with Firebug? Well, pretty much. As stated on Jetpack's site, "not wanting to reinvent the wheel" they used Firebug for debugging and logging purposes. So for now everything's great: a simple way to develop add-ons, and a nice debugger... what else could I ask for?
Maybe for them to work together out of the box?

As some people has noticed, the latest versions of Firebug and Jetpack won't work together right after installing them. This is because the current version of Jetpack (0.6.2) uses an old API call to communicate with Firebug that changed in version 1.4.3. It seems that all the Firebug interaction was developed using Firebug 1.4.2, so they never noticed the change in the API. But don't panic! There is a way to fix this, and is as simple as changing a single word on a single file.

Making them play nice together again

Important Notice:
As I write this article the bug opened for this issue is already Verified and Fixed, so that means that the fix will be on the next Jetpack release. Meanwhile, you'll have to do the following patch by hand to use Jetpack with Firebug 1.4.3 or later.

First of all, you have to locate your Firefox profile. This depends on your system, but this are some of the most common locations:

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

• Mac OS X:
  ~/Library/Mozilla/Firefox/Profiles/<profile folder>
  OR
  ~/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>

If you are using firefox 3.6, you can go to the address "about:support" and there's a link to your profile folder.

After finding your profile folder, you'll have to go to the following folder inside it.

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

and edit this file:

firebug-extension.js

Changing the line 19 from:

Firebug.URLSelector.watchBrowser(browser);

To:

Firebug.Activation.watchBrowser(browser);

Save that file, restart Firefox, and voilà, Firebug and Jetpack are working together now!

Testing if Firebug is now working

If you want to test if Firebug is working as expected, then paste the following into the develop area of Jetpack:

jetpack.future.import("menu");

jetpack.menu.context.page.add({
    label: "LogThis!",
    command: function(){
        console.log("Firebug is Working OK");
    }
});

Now hit the "Try out this code" button, enable Firebug and refresh the page. If everything went right, you should have a new entry on the context menu of the webpage, called "LogThis!". If you click on that entry and the text "Firebug is Working OK" appears on the console, you have it working.

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!

Agradecimientos Especiales a Mike Sabine Radcliffe por sus nuevas mejoras para el inspeccionador! Mike realizó unas impresionantes investigaciones y soluciones para los errores del inspeccionador. Ahora el inspeccionador de la 1.5 es muy sólido.

Ahora estamos a la espera de comentarios de los usuarios y reportes de errores. Esperamos tener alrededor de seis a ocho semanas para arreglar los errores en la 1.5. Una vez que Firefox 3.6 esté disponible, ya vamos a tener lista la mayor parte del trabajo en la 1.5 excepto por unos pocos ajustes o arreglos. Así que ahora es el momento para probar 1.5 en tu sitio web y hacérnoslo saber.

Al final aplicamos un montón de cambios para esta beta, así que voy a cubrir los cambios desde la 1.5a26 en un principio, luego en otro post haremos una descripción más en detalle del resto de las características.

Nota: Lo siguiente lo dejo en inglés ya que es un listado de los bugs que fueron arreglados de la 1.5a26 a la 1.5b1

• Locale is-IS, Icelandic (Iceland), contribution by Kristjan
• vi-VN locale (contribution by loveleeyoungae)
• Issue 2371: Placement of numbers indicating offset/margin/border/padding prevents display of more than 3 digits in the value
• Issue 2373: inspect hightlight wrong when scrolling
• Issue 1652: Negative Margins Show As Positive
• Issue 1897: Add indicator for position:relative (like margin and padding indication).
• Issue 2242: [req] hover overlay enhancements: negative margins and positioning
• Issue 2403: Universal CSS selector can cause issues with inspect
• Issue 1896: FB Panels with no options should disable selection of the options pulldown
• Issue 2378: Inspector is slightly slower now that the quick info box has been added
• Issue 2382: Search field hidden by ‘next previous’ popup when firebug in new window that is maximised
• Issue 1909: DOM – Copy field name contribution by blindwanderer
• Issue 2061: ‘Net’ tab shows requests under the wrong file type
• Issue 2383: Show Quick Info Box stays on top of element to inspect
• Issue 2390: “Inspect Element” doesn’t activate HTML tab in Firebug window
• Issue 2392: Object in DOM tab doesn’t refresh properly
• Issue 206: UI gets stuck with both Edit and Inspect buttons pushed on CSS panel
• Issue 1172: Enhancement: Display Firebug icon next to “Inspect Element” context menu item
• Issue 2393: Quick Info Box needs a keyboard shortcut
• Issue 2394: Layout information shows the wrong values
• Issue 2396: Inspector options difficult to find in the Firebug options menu
• Issue 425: On RTL Systems the console text box is RTL too. It should allways be LTR.
• Issue 594: Classin skin: warning icon looks weird
• Issue 2399: Open with editor does nothing on Vista
• Issue 1009: Firebug improperly retains scroll position in “Style” pane
• Issue 1017: “Show functions defined by the user” in DOM tab includes internal functions
• Issue 2401: HTML mutate flag is not always removed
• Issue 1721: Tries to “display” -moz-binding url
• Issue 2402: Cannot overlay the fbToolbox as there are two elements with that ID in the DOM
• Issue 2403: Universal CSS selector can cause issues with inspect
• Issue 2406: Quick Info Box stays visible when changing Firebug Tabs
• Issue 2407: Quick Info Box does not always move on mouseover
• Issue 2063: Error message “The resource from this URL is not text”
• Issue 1966: Error traceback no longer always picks up the right function names.

Ver el post Original.

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.

In this version the UI has changed a little. Now multiple filtering rules can be set, although the system for setting them is a little archaic.  As can be seen in this screenshot:

Multiple Rules alowed

The activation mechanism stays the same, and so the quick search in the net tab. But now there are two buttons, to remove the applied filters (in case you want to view all the results) and one to apply the stored rules.

New buttons in the net panel

You can grab this release from the releases folder. Also keep in mind that I'm trying to set up an upgrade channel in this webpage, so you can install once and then get the updates automatically.

The aim of this extension is to let you add custom filters to the requests listed in the Net Panel. Right now this is the first... nightly. It isn't even an alpha, I just made it work, and then packed and uploaded it. So don't expect it to be a lot friendly, it just works.

To use this extension you should have Firebug 1.5.0a21, 1.5X.0a21 or the latest SVN revision, since it depends on a listener added in a21. Just go to releases and install the xpi.

How to use it

• Install the extension and make sure the dependencies are met
• Go to the Net Panel
• Press "Advanced Filters", a prompt should appear
• Enter the desired RegExp pattern against you want the request's URL to be tested.
• Reload the page, now as long as the "Advanced Filters" button is selected, your requests will be filtered. To disable the filtering, press again in "Advanced Filters".
• You can change the applied filter pattern by disabling and then enabling the advanced filtering. Each time you enable the filtering, a prompt will show up in wich you can enter the new pattern. Then it'll be applied to the monitored requests.