1

FirebugNext¿Qué se viene en la nueva

versión de Firebug?

JRSL, Santiago de Chile, Octubre 2009Hernán Rodríguez Colmeiro

http://getfiregbug.com/

2

● Es una extensión de Mozilla Firefox● Todo hecho en XUL, HTML y JavaScript

● Orientado a:● Desarrolladores Web● Diseñadores Web

Antes que nada...¿Qué es Firebug?

3

Depurador de JavaScript

4

Editor en Tiempo Realdel DOM y CSS

[Screenshot!]

5

Monitor de pedidos AJAX

[Screenshot!]

6

Consola para probar y loguear JavaScript

[Screenshot!]

7

¿Quiénes lo hacen?● Autor de Firebug: Joe Hewitt (Facebook iPhone App)

● Desarrolladores Activos:● John J. Barton (IBM)● Jan Odvárko (Mozilla)● Rob Campbell (Mozilla)● Hans Hillen (Paciello Group)● Kevin Decker

● Otros: http://groups.google.com/group/firebug-working-group

8

Versiones para todos los gustos

● Firebug tiene un ciclo muy corto de releases● Hay Alphas, Betas y recién entonces Estables

● Addos.Mozilla.Org (AMO) suele tardar mucho● Es mejor usar las Betas y Alphas para los ultimos Fix

● Esto lleva a tener una actualización por semana...● Y algún que otro posible error, son alphas o betas ;)

● A veces, los bugs de Firefox retrasan algunos de Firebug● No queda solución más que esperar en estos casos

9

¿En dónde estamos?

● Última Versión Estable:● 1.4.3 en AMO

https://addons.mozilla.org/en-US/firefox/addon/1843/

● Última Alpha:1.5.0a25 en getfirebug.com

http://www.getfirebug.com/releases/

10

Mejoras UI

● Nuevos Íconos (por Austin Andrews)● Las pestañas apuntan hacia arriba (por Curtis Bartley)● Minimizar != Cerrar● Una única instancia

11

Nuevas Funcionalidades

● Búsqueda Múltiple● Búsqueda por selectores CSS (À la jQuery)● BrakeOnNext● Inspector● Métodos de Activación● Optimizaciones de Código● Computed Style● Accesibilidad (A11y)

● Modificar Hotkeys● Se agregaron más Hotkeys para mejorar la A11y

12

Cambios en la Activación●1.0

● Blacklist simple y sensillo●1.2

● Blacklist● Control de que partes de Firebug estan habilitadas.

●1.3● Se agrega botón para suspender/iniciar firebug (una x)● La usabilidad seguía siendo reducida

●1.4● Nuevo método de activación● Casi a pedido de Steve Souders, se buscó hacer algo más

simple.

13

Nuevo Método de Activación

●Estados● Activado/Desactivado y/o Minimizado

● Instancias de Firebug atadas a la Ventana, no a la Pestaña● Si la instancia de Firebug no está en foco, está suspendida.● No hay más blacklist

● La activación se guarda automáticamente.

14

Proximos Cambios

● Activate Same Origin● Para activar Firebug en sitios pertenecientes al mismo

dominio:● bar.foo.com == foo.com == tras.foo.com

● Una nueva extensión de Honza para Activación Avanzada● FireStarter (Acá)

● Actualizar la página automáticamente● En 1.3 esto se hacía automático y llevaba a algunos

problemas

15

Inspect Desviado

● Arreglada la desviación del inspeccionador (Mike Radcliffe)● En la mayoría de los casos● En algunos todavía falla.

16

Cambios al Inspect

● 4 tipos distintos de implementaciones del inspector● La original de Hewitt, con algunos retoques (1.3)● La versión 'body-tag' de Mike Radcliffe (1.4)● La versión 'Joe-fix-Pack' de Mike Radcliffe (1.5)● Canvas Special Recipe (Coming Soon)

17

Consola

● Nueva Funcionalidad: Persistencia● Cuando se selecciona, el contenido de la consola se copia

cuando se actualiza la pestaña

[Demo]

● Se arreglo un leak de memoria, en los sitios con muchos errores

18

Extensiones

● Extensiones de una Extension?● Para que Sirven?

● JSONViewer● FireDiff● FireCookie● Yslow● FireQuery

● Cómo se instalan? (Link)● Para Aventureros: Cómo se crean?

● http://www.softwareishard.com/

19

Extensiones

Demos!

20

Extensiones de la Casa

● Algunas extensiones se desarrollan desde Firebug● FireStarter

● Métodos Avanzados de Activación● NetExport

● Exportar datos del panel de Net● FBTest

● Tests Automaticos para Firebug● Chromebug

● Un Debugger de un Debugger...● Eventbug

● Para listar los eventos

21

EventBug

● Extensión para listar los Listeners a los deistintos eventos● Es muy nueva

● Depende de código que todavía no está en el navegador!

● Screenshot...

22

23

FBLite

● Y si no estoy usando un navegador decente pero necesito al Firebug?

● Firebug Lite al Rescate!● http://getfirebug.com/lite.html

24

Desarrollo a Futuro

● UI● Muchas cosas a mostrar en poco lugar!

● Crossbrowser quizás?● BreakOn[LoQueGustes]● Integración con algunas cosas de Bespin● Inspector hecho en Canvas● Enjambre (Swarm) de Extensiones● Depuración Remota

25

Cómo puedo ayudar?

● Reportando Bugs● http://code.google.com/p/fbug/issues/list

● Haciendo Casos de Test para los bugs que los necesiten● Localización y Traducción

● Se hace mediante BabelZilla● Ayudando con la Documentación● Enviando Parches● Ayudando en el grupo de Google

● http://groups.google.com/group/firebug