FirebugNext
¿Qué se viene en la nueva
   versión de Firebug?

 JRSL, Santiago de Chile, Octubre 2009
        Hernán Rodríg...
Antes que nada...
               ¿Qué es Firebug?
●
    Es una extensión de Mozilla Firefox
    ●
      Todo hecho en XUL,...
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:
    ●
      Jo...
Versiones para todos los
                    gustos
●
    Firebug tiene un ciclo muy corto de releases
    ●
      Hay Alp...
¿En dónde estamos?

●
    Última Versión Estable:
    ●
      1.4.3 en AMO
      https://addons.mozilla.org/en-US/firefox/...
Mejoras UI
●
    Nuevos Íconos (por Austin Andrews)
●
    Las pestañas apuntan hacia arriba (por Curtis Bartley)
●
    Min...
Nuevas Funcionalidades

●
    Búsqueda Múltiple
●
    Búsqueda por selectores CSS (À la jQuery)
●
    BrakeOnNext
●
    In...
Cambios en la Activación
●
  1.0
   ●
     Blacklist simple y sensillo
●
  1.2
   ●
     Blacklist
   ●
     Control de qu...
Nuevo Método de Activación

●
  Estados
   ●
      Activado/Desactivado y/o Minimizado
●
   Instancias de Firebug atadas a...
Proximos Cambios
●
    Activate Same Origin
    ●
      Para activar Firebug en sitios pertenecientes al mismo
      domin...
Inspect Desviado




●
    Arreglada la desviación del inspeccionador (Mike Radcliffe)
    ●
      En la mayoría de los ca...
Cambios al Inspect


●
    4 tipos distintos de implementaciones del inspector
    ●
      La original de Hewitt, con algu...
Consola

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

●
    Extensiones de una Extension?
●
    Para que Sirven?
    ●
      JSONViewer
    ●
      FireDiff
    ●
...
Extensiones




 Demos!


              19
Extensiones de la Casa
●
    Algunas extensiones se desarrollan desde Firebug
    ●
      FireStarter
      ●
        Méto...
EventBug


●
    Extensión para listar los Listeners a los deistintos eventos
●
    Es muy nueva
     ●
       Depende de ...
22
FBLite

●
 Y si no estoy usando un navegador decente pero necesito
al Firebug?
 ●
   Firebug Lite al Rescate!
     ●
     ...
Desarrollo a Futuro

●
    UI
    ●
      Muchas cosas a mostrar en poco lugar!
●
    Crossbrowser quizás?
●
    BreakOn[L...
Cómo puedo ayudar?

●
    Reportando Bugs
    ●
      http://code.google.com/p/fbug/issues/list
●
    Haciendo Casos de Te...
Upcoming SlideShare
Loading in …5
×

FirebugNext ¿Qué se viene en la nueva versión de Firebug?

969 views

Published on

En esta presentación voy a presentar en sociedad las nuevas mejoras realizadas en Firebug 1.5.
Un repaso sobre las mejoras funcionales, de UI, optimizaciones y la presentación del nuevo
sistema de extensión de Firebug. También mencionaré como se puede ayudar al desarrollo de
próximas versiones de Firebug.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
969
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

FirebugNext ¿Qué se viene en la nueva versión de Firebug?

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

×