Blog Tecnológico de Azalorea

Joe Hewitt ha puesto manos a la obra y ha sacado la versión beta de Firebug 1.0. Al día de hoy es la beta3 que incorpora funcionalidades que usuarios le han pedido tras haber evaluado beta1 y beta2.

Y estamos de suerte porque Joe ha decidido, tras pensarselo detenidamente y hablar con los usuarios, a seguir con el modelo OpenSource [ver su comentario]. Al parecer ha hecho bien porque los mismos usuarios se han volcado en donar importes de 20 a 100€ para que Joe pueda dedicarle recursos a esta herramienta que ya se ha vuelto indisepnsable para muchos desarrolladores.

El interfaz de Firebug está totalmente renovado y mucho más limpio… cosa que era necesaria porque tiene un sinfin de nuevas funcionalidades. Las más importantes son:

• Poder abrir Firebug en una ventana propia
• Editar HTML (y no solo los parámetros como en la versión 0.4)
• Editar CSS (desde beta3 se puede editar enteramente)
• Monitorizar tráfico de red detallando gráficamente cuando tarda cada elemento en cargarse.
• Perfilar tiempo de ejecución

Aparte del AddOn para Firefox Joe ha creado Firebug Lite… una librería JavaScript para disponer de las funcionalidades (limitadas por momento) de Firebug en Internet Explorer, Opera y Safari. Por momento Firebug Lite está limitado al logging y ejecución de comando JS en la consola.

Happy debugging,
Miguel

Hasta el día de hoy no había hablado de CSS… pues ya es tiempo de dedicarle unas líneas

Navegando por la web un día me encontré con un sitio que tenía una lupa dentro del campo de búsqueda. Eso me inspiró a probarlo por mi cuenta… tengo que decir que hasta ahora nunca se me había ocurrido la idea de ponerle una imagen de fondo a un campo de texto… y resultó ser muy fácil.

Este es el CSS:

.busqueda{
background-image:url(/img/lupa.gif);
background-repeat: no-repeat;
padding-left: 20px;
}

Ya solo queda aplicarle la clase al campo de texto y tenemos.

Ya hace tiempo que no publiqué nada en el Blog debido a la gran cantidad de trabajo que se me ha acumulado. Cómo últimamente hago mucho uso de la búsqueda rápida en Firebug quiero aprovechar para comentarlo aquí.
El inspector de Firebug dispone de un campo de búsqueda rápida situado encima del inspector a la derecha. Este nos permite ejecutar una búsqueda rápida en el código fuente de la página abierta usando selectores CSS.

Se puede hacer uso de todos los selectores que entiende Firefox que incluye CSS1 completo, gran parte de CSS2 y parte de CSS3. Por ejemplo se puede buscar todos los enlaces que tengan asignados un evento onclick buscando por “a[onclick]“.
El resultado se puede clicar para ver las propiedades del elemento y en la página este elemento es remarcado con un borde azul.

El autor de Firebug planea implementar selectores XPath en el futuro.

Hoy he descubierto el blog del programador de firebug. Llevo usandolo desde hace un rato, pero no tenía ni idea de las posibilidades que esconde esta extensión.

Las funcionalidades se podrían definir como una mezcla de la consola de javascript y el inspector de DOM. Pero según he descuebierto hoy incorpora varios detalles que facilitan las cosas a la hora de resolver problemas ya sea con el CSS o con Javascript.

Explicar en detalle todas las funcionalidades me parece demasiado para este post… pero haré un resumen:

• Firebug instala un pequeño iconito en la barra inferior de Firefox, por defecto es verde pero se pone en rojo cuando hay errores de Javascript. Cicando en cualquier momento en el ícono se accede al entorno de FIrebug con todas sus funcionalidades.
• Dispone de un inspector DOM. Muestra un marco alrededor del objeto en la ventana del navegador cuando pasas el ratón por encima del arbol DOM del inspector y viceversa.
• Línea de comandos… dispone de posibilidad de ejecutar comandos Javascript que se ejecutan en el entorno de la página cargada.
• Inspector de Ajax… muestra tanto el request mandado como los datos que devuelve el servidor.
• Posibilidad de mostrar solo los mensajes relacionados con la página abierta.

Mirando el blog de Joe Hewitt descubrimos muchos detalles más… en otro post iré detallando los diferentes “trucos” que se mencionan allí.

Miguel