![Page 1: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/1.jpg)
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/
![Page 2: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/2.jpg)
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?
![Page 3: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/3.jpg)
3
Depurador de JavaScript
![Page 4: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/4.jpg)
4
Editor en Tiempo Realdel DOM y CSS
[Screenshot!]
![Page 5: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/5.jpg)
5
Monitor de pedidos AJAX
[Screenshot!]
![Page 6: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/6.jpg)
6
Consola para probar y loguear JavaScript
[Screenshot!]
![Page 7: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/7.jpg)
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
![Page 8: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/8.jpg)
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
![Page 9: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/9.jpg)
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/
![Page 10: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/10.jpg)
10
Mejoras UI
● Nuevos Íconos (por Austin Andrews)● Las pestañas apuntan hacia arriba (por Curtis Bartley)● Minimizar != Cerrar● Una única instancia
![Page 11: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/11.jpg)
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
![Page 12: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/12.jpg)
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.
![Page 13: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/13.jpg)
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.
![Page 14: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/14.jpg)
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
![Page 15: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/15.jpg)
15
Inspect Desviado
● Arreglada la desviación del inspeccionador (Mike Radcliffe)● En la mayoría de los casos● En algunos todavía falla.
![Page 16: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/16.jpg)
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)
![Page 17: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/17.jpg)
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
![Page 18: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/18.jpg)
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/
![Page 19: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/19.jpg)
19
Extensiones
Demos!
![Page 20: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/20.jpg)
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
![Page 21: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/21.jpg)
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...
![Page 22: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/22.jpg)
22
![Page 23: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/23.jpg)
23
FBLite
● Y si no estoy usando un navegador decente pero necesito al Firebug?
● Firebug Lite al Rescate!● http://getfirebug.com/lite.html
![Page 24: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/24.jpg)
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
![Page 25: FirebugNext ¿Qué se viene en la nueva versión de Firebug?](https://reader036.vdocuments.co/reader036/viewer/2022070323/5597954c1a28abf3108b4816/html5/thumbnails/25.jpg)
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