10 buenas razones para usar Firebug
Por Yëco en Web Dev28 de Diciembre, 2009 | 12:14 am | CompartirFirebug una de las herramientas que ha revolucionado la forma en que hacemos web hoy en día, su uso nos es indispensable para muchos y en lo personal es la herramienta que más utilizo para trabajar después de Textmate.
La idea con este post, es recorrer diez de las mejores caracteristicas de Firebug. Así quienes no lo usan lo conocen y quienes lo conocen de repente puedan encontrarse con algo nuevo.
1. Consola
La primer cosa que vas a ver cuando abrís firebug va a ser el panel de consola . Después de verlo un momento podrías darte cuenta que es una versión alternativa de la consola de errores de Firefox que básicamente nos sirve para:
- Registro de errores, advertencias y avisos
- Habilidad para ejecutar código JavaScript
Pero firebug lo extiende un poco más, así que en su consola podés hacer cosas mucho más complejas como:
- Registrar errores de Javascript, CSS, XML, XMLHttpRequest (AJAX) y de Chrome (no el browser… Si no de funcionalidad interna de firefox)
- Ejecutar JavaScript en la página web actual
- Usar el objeto console para hacer output desde tu scripts
<html>
<head>
<script type="text/javascript">
console.time(1);
console.log('la seccion de scripts comenzo a ejecutarse');
console.warn('mensaje warning');
console.error('mensaje error');
console.info('mensaje info');
console.log(
'terminando la ejecucion del script\n',
'la ejecucion tardo:'
);
console.timeEnd(1);
</script>
</head>
</html>
Fijate en el código arriba, tiene algunos ejemplos de uso del objeto console de firebug, imaginate que abrís que ejecutás ese HTML. Eso te va a mostrar algo como esto en la consola:
2. HTML
El segundo panel – y en el que creo que vas a pasar mucho tiempo – se divide en varias secciónes que vamos a revisar acá.
- Este botón es equivalente al “Inspect Element” que aparece en el menú contextual. Aparte de ser muy útil para seleccionar elementos en la página, también destaca el elemento seleccionado con un borde.
- En esta sección tenemos la jerarquía del elemento que tenemos seleccionado y la habilidad de efectuar una serie de acciones en cada uno de los componentes de la jerarquía como:
- Copiar el inner HTML
- Crear expresiones de XPath
- Adjuntarle un observador de eventos (y registrarlos en la consola)
- Borrar el elemento
- Editar el elemento y sus nodos hijos.
- Mover el elemento a la pestaña DOM para inspeccionarlo.
- Es la ventana principal del panel; util para recorrer todo el html, hacer modificaciónes rápidas al código y encontrar errores (Como cerrar un div muy pronto). El menú contextual tiene las mismas opciones que la sección 2
- En esta sección se muestran los estilos computados por el browser. La posibilidad de hacer modificaciones en tiempo real al estilo y la habilidad inspeccionar herencias me parecen que son las caracteristicas más importantes.
- En esta sección podés examinar fácilmente el box model de un elemento: tamaño del contenido, padding, offsets, márgenes y bordes.
-
- La sección DOM genera una lista con todos los métodos y propiedades del elemento seleccionado.
-
3. CSS
La principal diferencia entre este panel y el que está como sección dentro de la pestaña HTML es que acá podés trabajar con estilos que no han sido interpretados por el browser aún, o sea que no han sido computados. De nuevo voy a destacarte y numerar las secciones (y características esta vez).
- Si la página en la que estás trabajando contiene múltiples hojas de estilo podés seleccionar solo la que te interese ver La región principal donde se muestra el código
- Modifica fácilmente las propiedades del CSS.
- Podés deshabilitar el CSS desde ahí.
4. Script
A veces, cuando escribís JavaScript tenés que ensuciarte un poco las manos. La mayor parte del tiempo te vas a ver trabajando con la consola; Pero en condiciones extremas vas a tener que pasarte al script panel. Dadas esas condiciones extremas (que ocurren comúnmente), te presento este panel, así te empezás a familiarizar con él.
- Un Dropdown para escoger el script que querés trabajar.
- Funciones para Debugging: continue, step in, step over y step out. Estas se habilitan solamente cuando el código en ejecución llega a un breakpoint.
- Sección principal. Acá colocás (y quitás) los breakpoints, también sirve para inspeccionar el código Javascript.
- Similar al panel DOM panel, la sección Watch muestra los métodos y parametros para el código que se está debuggeando.
- Muestra el stack de funciones en tiempo real.
- Lista los breakpoints que se encuentran activos con un link a la línea donde se encuentra. Desde acá solo podés eliminarlos.
5. DOM
Es lo mismo que HTML->DOM. Dado que nada cambia de lo que te mencioné anteriormente, pasemos a la siguiente sección.
6. Net
Curioso de cuanto tiempo tarda la página en cargar? O querés saber cual pedido tarda más tiempo en completarse? Afortunadamente, todo eso puede hacerse en el panel Net.
- Los pedidos pueden filtrarse de acuerdo a su tipo.
- Todo pedido es mostrado en esta sección. Al final de la lista vemos un sumario que contiene: Numero de pedidos, tamaño, cuanto fué guardado en caché y el tiempo total que tomó completarlos.
- Revela más detalles como: HTTP headers, respuesta y cache.
Pruebas de desempeño (Performance Testing)
Quedés probar el desempeño de una función o un bucle específico? Podés usar el “timer” de Firebug.
function medirTiempo(){
console.time("MiTimer");
for(x=5000; x > 0; x--){}
console.timeEnd("MiTimer");
}
Tres pasos. Empezá por llamar “console.time” y le pasás un único key. Luego de esto ponés el código que necesitás probar. Finalmente, llamás “console.timeEnd”, y de nuevo como único parámetro, le pasás el key que utilizaste anteriormente. Voilá.
7. Reference
Este es un panel adicional, un add-on creado por CodeBurner. Como el nombre lo indica, con este panel tenés acceso rápido a las referencias de HTML y CSS. Me parece que el panel se explica solito.
8. PixelPerfect
Si has hecho slicing de un PSD, ya sabés el tiempo que nos quita en cada elemento de la composición. Y es ahí donde PixelPerfect demuestra su poder. Este add-on te ayudará bastante en esa tediosa tarea mostrandote cómo deben ir colocados los elementos con la ayuda de imagenes superpuestas al html.
- Con este botón podés agregar varias imágenes superpuestas para la página actual.
- Lista de superposiciones, desde acá podés agregar o quitar las imágenes.
- Configuración de las superposiciones.
9. YSlow
Un buen add-on creado por Yahoo!. Este te sugiere mejoras basado en una serie de test de velocidad que hace. Con YSlow, podés obtener el grado de desempeño de un website. Podés identificar fácilmente los puntos que pueden ser mejorados, además de una serie de recomendaciones para hacerlo.
Aparte de las estadisticas que te muestra YSlow, te recomiendo JSLint.com para evaluar el JavaScript y Smush.it para las imágenes.
10. FirePHP
Y por último, pero no menos importante, FirePHP. Con este add-on, podés enviar información (warnings, errors, logging, info) transparentemente a la consola desde tu código PHP. Un ejemplo sería:
<?php
FB::log('Log message');
FB::info('Info message');
FB::warn('Warn message');
FB::error('Error message');
?>
Conclusión
Y dale con las conclusiones… Meh… Bueno ok… Va.
La idea con esta pequeña lista de paneles/add-on es que se te haga la vida como developer un poco más fácil — tal como me lo ha hecho a mi.
Al final, los bugs siempre pasan, lo realmente malo es no estar preparado para resolverlos.
Acá la lista de links para los add-ons:
Firebug,
CodeBurner,
PixelPerfect,
YSlow,
FirePHP
Que te sirva.
-
xRommelx
-
Jonathan Javier
-
xRommelx
-
Yëco
Quién?
