FirebugNext
¿Qué se viene en la nueva
versión de Firebug?
JRSL, Santiago de Chile, Octubre 2009
Hernán Rodríguez Colmeiro
http://getfiregbug.com/
1

Antes que nada...
¿Qué es Firebug?
●
Es una extensión de Mozilla Firefox
●
Todo hecho en XUL, HTML y JavaScript
●
Orientado a:
●
Desarrolladores Web
●
Diseñadores Web
2

Depurador de JavaScript
3

Editor en Tiempo Real
del DOM y CSS
[Screenshot!]
4

Monitor de pedidos AJAX
[Screenshot!]
5

Consola para probar
y loguear JavaScript
[Screenshot!]
6

¿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
7

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
8

¿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/
9

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

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 11

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. 12

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.
13

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 14

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

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)
16

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
17

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/ 18

Extensiones
Demos!
19

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 20

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...
21

22

FBLite
●
Y si no estoy usando un navegador decente pero necesito
al Firebug?
●
Firebug Lite al Rescate!
●
http://getfirebug.com/lite.html
23

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
24

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
25