Blog Tecnológico de Azalorea

Desde ayer ya está disponible la versión pública de Firebug 1.0 tras 9 betas y unos 2 meses que han pasado desde el primer beta.

La evolución desde el beta1 hasta lo que nos podemos instalar ahora es impresionante. Aparte de arreglar todos los problemas que presenta una nueva versión, Joe se esforzó en implementar el máximo de funcionalidades que han ido pidiendo los usuarios.

Lo podéis descargar en getfirebug.com o la página de addons de mozilla.

Miguel

Joe Hewitt ha puesto manos a la obra y ha sacado la versión beta de Firebug 1.0. Al día de hoy es la beta3 que incorpora funcionalidades que usuarios le han pedido tras haber evaluado beta1 y beta2.

Y estamos de suerte porque Joe ha decidido, tras pensarselo detenidamente y hablar con los usuarios, a seguir con el modelo OpenSource [ver su comentario]. Al parecer ha hecho bien porque los mismos usuarios se han volcado en donar importes de 20 a 100€ para que Joe pueda dedicarle recursos a esta herramienta que ya se ha vuelto indisepnsable para muchos desarrolladores.

El interfaz de Firebug está totalmente renovado y mucho más limpio… cosa que era necesaria porque tiene un sinfin de nuevas funcionalidades. Las más importantes son:

• Poder abrir Firebug en una ventana propia
• Editar HTML (y no solo los parámetros como en la versión 0.4)
• Editar CSS (desde beta3 se puede editar enteramente)
• Monitorizar tráfico de red detallando gráficamente cuando tarda cada elemento en cargarse.
• Perfilar tiempo de ejecución

Aparte del AddOn para Firefox Joe ha creado Firebug Lite… una librería JavaScript para disponer de las funcionalidades (limitadas por momento) de Firebug en Internet Explorer, Opera y Safari. Por momento Firebug Lite está limitado al logging y ejecución de comando JS en la consola.

Happy debugging,
Miguel

Ya hace tiempo que no publiqué nada en el Blog debido a la gran cantidad de trabajo que se me ha acumulado. Cómo últimamente hago mucho uso de la búsqueda rápida en Firebug quiero aprovechar para comentarlo aquí.
El inspector de Firebug dispone de un campo de búsqueda rápida situado encima del inspector a la derecha. Este nos permite ejecutar una búsqueda rápida en el código fuente de la página abierta usando selectores CSS.

Se puede hacer uso de todos los selectores que entiende Firefox que incluye CSS1 completo, gran parte de CSS2 y parte de CSS3. Por ejemplo se puede buscar todos los enlaces que tengan asignados un evento onclick buscando por “a[onclick]“.
El resultado se puede clicar para ver las propiedades del elemento y en la página este elemento es remarcado con un borde azul.

El autor de Firebug planea implementar selectores XPath en el futuro.

Ha salido por fin la la largamente prometida versión 0.4 de Firebug. Lo más impresionante es que esta versión viene con un debugger “básico” pero muy funcional. No es tan completo (o complejo) cómo el Venkman, pero la facilidad y rápidez de uso del Firebug pronto nos hará olvidarnos de Venkman. Además con esta nueva versión el autor ha inaugurado dominio propio para la herramienta. Para la URL ha seguido el estilo de la Mozilla Foundation… www.getfirebug.com

Las funcionalidades nuevas son las siguientes:

• Permite poner breakpoints desde la consola.
• Inspeccionar variables locales.
• Stacktraces en los errores… para saber en que circunstancia se dispara el error.
• Break on error… (opcional) para para la ejecución cuando hay un error y llevarnos a la fuente del mismo.
• console.log… ya no necesitamos la función printfire()… Firebug pone a disposición de las páginas el objeto console para ello.
• Los mensajes de logging ahora se pueden clasificar (debug, error, warning, info)… parte del objeto log.
• Aserciones… podemos testear aserciones con el objeto log.
• Uso de funcionalidad tipo prinf (PHP) para los mensajes del objeto log. Esto nos permite incluir una referencia a un objeto e inspeccionarlo con un solo click.

Para un listado completo de cambios ir a los release notes.
Documentación para las nuevas funcionalidades se encuentra aquí.

Feliz debugging

Cómo prometí en un post anterior aquí va mi el primer artículo sobre trucos en Firebug. Tengo que aclarar que no son cosas que descubrí yo, sino que el mismo autor los publica en su web… pero aquí lo tenéis en castellano.

Si escribimos una referencia a un objeto en Firebug, este objeto será un enlace clicable. Este enlace nos lleva al Inspector con el objeto en cuestión preseleccionado. Esto no solo es aplicable a referencias metidas por la línea de comando, sino también a referencias recibidas por la función printfire().

Al pasar el ratón por encima del enlace el objeto en cuestión es resaltado con un borde azúl en la ventana del navegador (ver imagen). Estando en el Inspector con el objeto seleccionado podemos acceder (ver pestañas abajo a la derecha en el Firebug) a las siguientes características del objeto seleccionado:
- Código fuente (Source)
- CSS aplicado (Style)
- Layout aplicado (Layout)
- Eventos enlazados (Events)
- Dom

Hoy he descubierto el blog del programador de firebug. Llevo usandolo desde hace un rato, pero no tenía ni idea de las posibilidades que esconde esta extensión.

Las funcionalidades se podrían definir como una mezcla de la consola de javascript y el inspector de DOM. Pero según he descuebierto hoy incorpora varios detalles que facilitan las cosas a la hora de resolver problemas ya sea con el CSS o con Javascript.

Explicar en detalle todas las funcionalidades me parece demasiado para este post… pero haré un resumen:

• Firebug instala un pequeño iconito en la barra inferior de Firefox, por defecto es verde pero se pone en rojo cuando hay errores de Javascript. Cicando en cualquier momento en el ícono se accede al entorno de FIrebug con todas sus funcionalidades.
• Dispone de un inspector DOM. Muestra un marco alrededor del objeto en la ventana del navegador cuando pasas el ratón por encima del arbol DOM del inspector y viceversa.
• Línea de comandos… dispone de posibilidad de ejecutar comandos Javascript que se ejecutan en el entorno de la página cargada.
• Inspector de Ajax… muestra tanto el request mandado como los datos que devuelve el servidor.
• Posibilidad de mostrar solo los mensajes relacionados con la página abierta.

Mirando el blog de Joe Hewitt descubrimos muchos detalles más… en otro post iré detallando los diferentes “trucos” que se mencionan allí.

Miguel