FireBug 1.0 Review

Ya he comentado y recomendado FireBug como una excelente addon de FF para el desarrollo Web (mejores extensiones firefox). Pero se acaba de lanzar la nueva beta 1.0 de FireBug y tiene muchas mejoras, que sinceramente la destacan como la mejor. En este post vamos a comentar un poco sobre esta extensión, sus mejoras y como utilizarla con Internet Explorer.

¿Qué es FireBug?

FireBug es una extensión, un software que se integra al navegador Firefox, para añadir herramientas de desarrollo web al alcance de la mano, mientras se navega en cualquier sitio web. Con esta extensión, podemos corregir, eliminar errores, revizar el CSS, HTML y JavaScript en tiempo real a cualquier página web.

¿Qué novedades nos trae FireBug 1.0?

En Anieto2k y Sentido Web nos hablan detalladamente de sus novedades. Aquí puntualizamos algunas de las más saltantes:

Usabilidad

• Posibilidad de abrirlo en una ventana nueva.
• Listas de páginas en las que queremos que esté activo o no Firebug.
• Tecla de acceso directo para abrir Firebug.
• Aumentar o disminuir el tamaño de la letra.

Código HTML

• Visor de código fuente de forma estructurada.
• Ver lo que se está modificando en la página web.
• Editar el código HTML en el momento.
• Seleccionar elementos HTML posicionándonos en ellos con el ratón.
• Búsquedas.
• Más Información.

CSS

• Inspección en cascada.
• Previsualización de colores e imágenes.
• Auto completado.
• Desactivar propiedades en los estilos para ver los cambios.
• Inspeccionar las hojas de estilos.
• Más Información.

Visualización de CSS

• Se puede ver el modelo de caja de los elementos HTML.
• Uso de reglas y guías.
• Modificación de las medidas de las cajas.
• Más Información.

Monitor de red

• Toma los tiempos de carga de del fichero y de los ficheros adjuntos.
• Separar los tiempos por tipo de fichero.
• Distinción entre ficheros de la caché y los que se han descargado de la red.
• Visualizador de la cabecera HTTP.
• Más Información.

Debug

• Permite encontrar ficheros js fácilmente.
• Parar automáticamente la ejecución si encuentra un error.
• Ver la lista de llamadas a funciones que esperan respuesta.
• Uso de tooltips.
• Medición de tiempos de ejecución.
• Logs de las llamadas a funciones.
• Más Información.

Búsqueda de errores

• Los errores se muestran en la barra de estado del navegador.
• Visualización de los errores javascript de la página a la que se accede.
• Información descriptiva de los errores.
• Acceso fácil al debugger.
• Búsquedas rápidas.
• Filtro por tipo de errores.
• Más Información.

Inspector DOM

• Diferenciación entre código estándar y el creado mediante Javascript.
• Edición de los objetos con posibilidad de auto completado.
• Navegación por el código Javascript.
• Más Información.

Ejecución de código Javascript

• Consola para ejecución de código javascript.
• Auto completado.
• El texto de la consola no es tratado como texto plano sino como hipertexto.
• Más Información.

Logging

• Posibilidad de mostrar trazas en la consola desde Javascript.
• Los logs pueden ser de texto, objetos y texto formateado usando variables.
• Distintos colores para distintos tipos de logs (error, warm, debug e info).
• Marcas de tiempo.
• Inspección de objetos.
• Más Información

Con todas estas característica (aunque debo precisar que no son todas) FireBug me ha dejado impresionado. Pero falta más.

¿FireBug para Internet Explorer, Opera y Safari?

Esta herramienta no se limita a Firefox. En el blog de firebug nos comentan el lanzamiento de FireBug Lite, una biblioteca javascript que al embeberla en el HTML de la Web, podremos utilizar la consola de FireBug en cualquiera de estos tres navegadores.

Si todo esto esta en Beta ¿Cómo será cuando salga la versión oficial? Y por cierto, FireBug es Open Source.

Descargar | FireBug (para FF)
Descargar | FireBug Lite (para IE, Opera y Safari)