Bookmarklets: FireBug Lite y DOM Monster

martes, 31 de mayo de 2011

2 Bookmarklets para la barra de favoritos del desarrollador web.
con bookmarklets la barra de favoritos puede ser tu Baticinturón

Firebug Lite


http://getfirebug.com/firebuglite

Firebug Lite es una versión de Firebug (herramientas de desarrollo para FireFox) escrita totalmente en javascript que puede ser cargada en cualquier browser, particularmente aquellos que no carecen de tales herramientas, por ej. IE6

Firebug Lite puede agregarse como bookmarklet:


y al hacer click en el bookmarklet:


Genial! Inspección de HTML, CSS y Javascript, edición en tiempo real de estilos, consola javascript. Lamentablemente la magia no existe y no es posible debuggear javascript, monitorear requests, y otras features que no son posibles sin una mayor integración con el browser.

Con la inspección de HTML y CSS es posible encontrar rápidamente esas inconsistencias tan divertidas en IE6 o IE7 como por ejemplo: En IE6 y 7 los divs vacíos no respetan el atributo height si tienen width


DOM Monster

http://mir.aculo.us/dom-monster/

otro Bookmarklet interesante (y totalmente diferente) es DOM Monster, al invocar el DOM Monster en cualquier página, éste ejecuta una serie de evaluaciones y muestra un reporte bastante interesante sobre posibles optimizaciones a HTML y Javascript.
Los creadores promocionan una trilogía de libros sobre la optimización de Javascript como complemento, pero DOM Monster es open source. Podemos inclusive "forkearlo" y agregar nuestras propias reglas, no es más que un gran archivo Javascript.

Si bien tienen algunos puntos en común con herramientas como PageSpeed o YSlow, DOM Monster hace un análisis estático (por eso puede funcionar como bookmarklet) y pone el foco en la estructura del HTML+ CSS y el código Javascript.

CUIDADO: La ejecución por primera vez de este tipo de herramientas puede herir sentimientos :)

buuuuuuuh!
Un reporte de ejemplo: