Post on 04-Jul-2015
description
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