Eventbug (alfa) Liberado
Esta es una traducción de un post realizado por Jan "Honza" Odvarko, uno de los desarrolladores principales de Firebug y padre del panel de Red. El artículo original se encuentra aquí.Hemos hecho un gran avance con John J. Barton en una nueva extensión para Firebug llamada Eventbug. Un agradecimiento enorme a Olli Pettay (smaug) por arreglar los bugs #448602 + #506961 y por brindar la nuevas API de Firebug que permiten enumerar los event listeners en una página web!
Tengan en cuenta que estas APIs están disponibles en Firefox 3.7a1pre (espero que puedan lograr entrar en Firefox 3.6) y también van a necesitar Firebug 1.5 para poder hacer las pruebas.
Esta extensión trae un nuevo panel de Eventos que lista todos los manejadores de eventos de una página, agrupados por tipo de evento. El panel también se integra de una manera prolija con otros paneles de Firebug, y permite buscar rápidamente que elemento HTML está asociado con un event listener específico o ver su código fuente JavaScript.
Así que, veámoslo en acción!
Panel de Eventos
La captura de abajo muestra el contenido del panel de Eventos y los tres paneles de costado (click para ver la imagen en tamaño original).
Los paneles de costado son sincronizados con el listener que haya sido seleccionado en el área principal de contenido.
- Targets Muestra la lista de targets de eventos que serían usados como DOMEvent.currentTarget cuando el evento burbujee (bubblee). Todos los targets son clickeables y dirijen al usuario al panel de HTML
- Script Muestra el código fuente del listener seleccionado.
- HTML Muestra el código HTML del elemento que está asociado con el listener seleccionado.
Panel HTML
La extensión también registra un nuevo panel de costado para Eventos en el panel de HTML.
En este caso, el panel lateral de Eventos muestra todos los event listeners registrados para el elemento HTML seleccionado.
Configuración Recomendada
Firefox 3.7a1pre
Firebug 1.5b1
Eventbug 0.1a2
Errores Conocidos
Eventbug todavía está en una etapa alfa, y hay algunos errores conocidos..
- El panel no es actualizado si los listeners son agregados o eliminados dinámicamente dependiendo de acciones del usuario. Tu tienes que hacer click manualmente en el botón de Actualizar (Refresh, en la barra de herramientas). esto va a ser arreglado tan pronto como se solucione el bug #524674 (gracias Smaug!
) - Si un listener es definido usando un atributo HTML (i.e.
click="alert('Hola Mundo!')") el código fuente no es compilado hasta que el listener es efectivamente ejecutado (es una optimización de Firefox). La UI de Eventbug no indica esto, y puede pasar que el link que lleva al código fuente de un listener no funcione. El link debería ser deshabilitado si el objeto script no está disponible. - El panel lateral de Script todavía no deja crear puntos de interrupción.
Y por cierto, como es usual, si tienes cualquier idea acerca de cómo mejorar esta característica, háznoslo saber dejando un comentario aquí o en el grupo oficial (en inglés). Si encontrás un bug, por favor reportalo.
Gracias!
Firebug 1.5b1
Ok, nuestro trabajo en las características para Firebug 1.5b1 está terminado! Pasamos todas nuestras pruebas en Firefox 3.5.4, uno falla en Firefox 3.6b y Firefox 3.7a. Esa prueba es para una de nuestras nuevas características para interrupciones, y tendremos que trabajar con el equipo de Firefox para arreglarla.
Agradecimientos Especiales a Mike Sabine Radcliffe por sus nuevas mejoras para el inspeccionador! Mike realizó unas impresionantes investigaciones y soluciones para los errores del inspeccionador. Ahora el inspeccionador de la 1.5 es muy sólido.
Ahora estamos a la espera de comentarios de los usuarios y reportes de errores. Esperamos tener alrededor de seis a ocho semanas para arreglar los errores en la 1.5. Una vez que Firefox 3.6 esté disponible, ya vamos a tener lista la mayor parte del trabajo en la 1.5 excepto por unos pocos ajustes o arreglos. Así que ahora es el momento para probar 1.5 en tu sitio web y hacérnoslo saber.
Al final aplicamos un montón de cambios para esta beta, así que voy a cubrir los cambios desde la 1.5a26 en un principio, luego en otro post haremos una descripción más en detalle del resto de las características.
Nota: Lo siguiente lo dejo en inglés ya que es un listado de los bugs que fueron arreglados de la 1.5a26 a la 1.5b1
- Locale is-IS, Icelandic (Iceland), contribution by Kristjan
- vi-VN locale (contribution by loveleeyoungae)
- Issue 2371: Placement of numbers indicating offset/margin/border/padding prevents display of more than 3 digits in the value
- Issue 2373: inspect hightlight wrong when scrolling
- Issue 1652: Negative Margins Show As Positive
- Issue 1897: Add indicator for position:relative (like margin and padding indication).
- Issue 2242: [req] hover overlay enhancements: negative margins and positioning
- Issue 2403: Universal CSS selector can cause issues with inspect
- Issue 1896: FB Panels with no options should disable selection of the options pulldown
- Issue 2378: Inspector is slightly slower now that the quick info box has been added
- Issue 2382: Search field hidden by ‘next previous’ popup when firebug in new window that is maximised
- Issue 1909: DOM – Copy field name contribution by blindwanderer
- Issue 2061: ‘Net’ tab shows requests under the wrong file type
- Issue 2383: Show Quick Info Box stays on top of element to inspect
- Issue 2390: “Inspect Element” doesn’t activate HTML tab in Firebug window
- Issue 2392: Object in DOM tab doesn’t refresh properly
- Issue 206: UI gets stuck with both Edit and Inspect buttons pushed on CSS panel
- Issue 1172: Enhancement: Display Firebug icon next to “Inspect Element” context menu item
- Issue 2393: Quick Info Box needs a keyboard shortcut
- Issue 2394: Layout information shows the wrong values
- Issue 2396: Inspector options difficult to find in the Firebug options menu
- Issue 425: On RTL Systems the console text box is RTL too. It should allways be LTR.
- Issue 594: Classin skin: warning icon looks weird
- Issue 2399: Open with editor does nothing on Vista
- Issue 1009: Firebug improperly retains scroll position in “Style” pane
- Issue 1017: “Show functions defined by the user” in DOM tab includes internal functions
- Issue 2401: HTML mutate flag is not always removed
- Issue 1721: Tries to “display” -moz-binding url
- Issue 2402: Cannot overlay the fbToolbox as there are two elements with that ID in the DOM
- Issue 2403: Universal CSS selector can cause issues with inspect
- Issue 2406: Quick Info Box stays visible when changing Firebug Tabs
- Issue 2407: Quick Info Box does not always move on mouseover
- Issue 2063: Error message “The resource from this URL is not text”
- Issue 1966: Error traceback no longer always picks up the right function names.
Ver el post Original.
Encuesta Sobre Características de Firebug ~ Parte 2
Lo siguiente es una traducción de un post de Rob Campbell (Aquí está el original), uno de los desarrolladores de Firebug.
Esta es la segunda parte de la Encuesta sobre Características de Firebug (acá está la primer parte). Esta vez, enfocándome en las respuestas a la pregunta: ¿Cual es la característica de Firebug que menos te gusta? ¿Y la que nunca usás? No se si la pregunta estaba mal formulada o si la gente tenía ganas de expresarse, pero muchos de los encuestados no se limitaron a sólo una cosa. Como resultado, tuve que modificar un poco mi para nada científica metodología y contar las características mencionadas como votos, en vez de sólo clasificarlas en categorías.
Como en la encuesta anterior, agregué una columna de "Basura" para las respuestas que realmente no tenían sentido. Es muy bueno escuchar "Yo <3 Firebug!" (y Firebug te <3 a vos también!) pero no ayudaba mucho en los objetivos de esta encuesta. Complementando esta columna, creé otra categoría para las respuestas lamentándose por la estabilidad de Firebug o la ausencia de ciertas características específicas. Esta categoría empató en el primer puesto, con la mayor cantidad de votos.
Los Ganadores
Tercer puesto – Empate!
• La Búsqueda
• Consola. Me sorprende que haya algunas personas a las que no les gusta la consola, pero dos de ustedes piensan de esa manera. Una persona mencionó que aparecen un montón de excepciones provenientes del navegador, degradando la calidad de la información. Estas excepciones por lo general pueden reducirse de-seleccionando la opción "Mostrar Errores de Chrome" y las opciones de mensajes en el mini-menu del panel de Consola.
Segundo puesto – Empate!
Estos tienen la sospechosa distinción de tener la misma cantidad de respuestas que la columna de Basura (Junk).
• Panel CSS
• Panel DOM
• Perfilador
Primer Puesto
• Panel de Script — Las respuestas variaron desde "No se cómo utilizar las interrupciones" hasta usuarios que prefieren usar la consola para hacer depurado interactivo al estilo del printf. Otros encuestados demandaron que el panel de script era demasiado defectuoso.
advertencia: Creo que es probable que exista más de un tipo de usuario de Firebug. Alguno de ellos pueden no estar usando Twitter y esta encuesta no les habrá llegado. Los tipos de usuarios que respondieron y dijeron que su característica favorita era el Inspeccionador de HRML y la edición en vivo de CSS son probablemente el mismo grupo de personas que no hacen un uso extensivo del depurador de Scripts. Si sos un arduo depurador, por favor exprésalo en los comentarios.
Menciones Honorables
• Editor de nodos HTML – Si haces doble click en un tag en la vista HTML, verás un editor de nodos. Haciendo click en el boton "Editar" o usando la tecla Escape te sacarán de ahí.
• Registración de Eventos – haz click derecho en un nodo en el panel HTML y selecciona "Registrar Eventos". Ahora cada mousemove, click y keytroke en ese nodo será registrado en la Consola. Cómo puedes no amar eso?
No hubo ningun voto(!) para el panel de Red, así que claramente todo el mundo lo ama y piensa que es alucinante.
Conclusiones
• Necesitamos trabajar más duro en arreglar errores y problemas de estabilidad. Emplear un montón de esfuerzo en estabilidad y usabilidad probablemente sea una muy buena manera de hacer de Firebug una mejor y más placentera pieza de software.
• Las pestañas de CSS y DOM no son muy queridos. Agregar una mejor navegación a la página de DOM, o rehacerla por completo puede ser útil. Deshacerse por completo de él y el panel de CSS puede ser otra opción, pero no una que queramos considerar sin ver una fuerte devolución desde la comunidad.
• El Perfilador va bastante bien con el panel de Script. Si no estas haciendo una fuerte depuración de JavaScript, puede que no necesites el perfilador. Es una herramienta de un uso bastante específico para medir la performance del JavaScript de una página.
• La Búsqueda fue casi una sorpresa, pero la estamos mejorando para la versión 1.5 así con un poco de suerte se vuelve más sencilla de usar.
Al igual que antes, por favor déjanos tus comentarios si piensas que algo se nos pasó por alto.
Encuesta sobre Características de Firebug ~ parte 1
Lo siguente es una traducción de un post de Rob Campbell (Aquí está el original), uno de los desarrolladores de Firebug. Espero que les resulte tan interesante como a mí.
La semana pasada hice una encuesta un poco informal mediante Twitter y Rypple, preguntandole a los usuarios cuales eran las características de Firebug que más querían y cuales menos. Yo voy a ser la primer persona en admitir que esta encuesta no es exactamente de una rigurosidad científica, dado que sólo tuvimos un numero limitado de encuestados de un espacio muestral posiblemente limitado (más que nada usuarios de Twitter de habla inglesa, a lo sumo conectados a mi con sólo unos pocos niveles de indirección). De todos modos los resultados fueron interesantes, dado que confirmaron lo que sospechaba acerca de la mayoría de la gente usando Firebug. Espero completamente que haya otros tipos de usuarios que graviten más fuertemente hacia otras características.
El desglose de los datos de esta torta 3D muestra que el 55% de los usuarios llaman por lejos al Inspeccionador su característica favorita. En realidad, esto es probablemente cercano al 73% si lo combinas con el 18% que indicó al tab HTML como su favorito. Cuando que la mayoría de la gente piensa "inspeccionar" o "html", la siguiente característica que describen es "ser capaz de modificar el CSS o ver la maquetación de tal nodo en el panel HTML".
La siguiente característica favotira es un empate entre el Panel de Red y la Consola. Es posible que desde que recolecté las respuestas ese empate se haya roto, pero ciertamente no por mucho, y probablemente no dentro de un apropiado margen de error. El restante 9% de las respuestas era ruido incompresible de la internet. La estática cósmica de fondo tomando consciencia propia.
Cómo ayuda esto? Bueno, desde luego que nos dice donde necesitamos enfocar nuestros esfuerzos. Hemos visto unos cuantos errores en el Inspeccionador durante el último par de años y creemos que en la versión 1.5 vamos a tener a la mayoría de ellos arreglados. El molesto resaltado desfasado y los raros errores con el z-index deberían ser cosa del pasado gracias al trabajo del colaborador Mike Ratcliffe, que llego a nosotros a través del poryecto Firebug Lite.
Pienso continuar un poco más tarde con los resultados de pregunta acerca de "la característica ménos querida". Esos son un poco más de difíciles de encontrarle el sentido, dado que las respuestas no fueron tan obviamente claras. Por favor haznos saber si este gráfico de torta coincide ( o no ) con lo que tu piensas es tu categoría favorita. Éste no es el fin de la cuestion, recién estamos empezando.