aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Emilio me pasa este enlace en el que nos muestran una recopilación de 4 navegadores y sus 4 versiones de Firebug.

• Safari4 + Web Inspector
• Firefox3 + Firebug
• Internet Explorer8 + Developer Tools
• Opera 9.5 + Dragonfly

¿con cual te quedas?

Gracias Emilio.

Firebug, ya de por sí es (para mí) la mejor extensión existente para Firefox y de la que no podría prescindir en el día a día. Dispone de todas las herramientas necesarias para hacer un debug exhaustivo de nuestras aplicaciones web. Así y todo siempre se puede mejorar, todo se puede mejorar.

Con estas 4 extensiones podremos complementar unas opciones para que Firebug se convierta en “la única” de mi navegador.

1. Jiffy, una extensión que mejora el apartado Net mostrando más detalladamente la información referente a la carga de la página.
2. YSlow, extensión que testea una serie de reglas para comprobar el correcto rendimiento del sitio.
3. FireCookie, integra un apartado extra llamado Cookies en el que podremos gestionar, manipular o eliminar las cookies que intervienen en cualquier página.
4. FirePHP, nos permitirá interactuar desde PHP con nuestra consola Firebug.

via

Actualización

Edusanver nos extiende el listado de extensiones.

Los que me leen a diario saben las maravillas que siempre hablo de Firebug y saben que para mi es la mejor aplicación para Firefox y con la que cada día me ahorro horas de trabajo debugueando aplicaciones.

Lamentablemente no siempre puedo disponer de ella, mucha veces navegadores como IE, Safari, Opera me limitan su uso y he de buscar alternativas. Son muchas las herramientas que hay para todos esos navegadores, pero ninguna tan parecida a Firebug.

pi.debugger, es una herramienta muy completa, desarrollada en Javascript que nos emula el funcionamiento de Firebug. En la imagen vemos las opciones básicas con las que Firebug nos asombraba en aquella versión 0.x. Pudiendo ver la estructura HTML de la página, el contenido CSS y el DOM de la página.

[Descargar][Demo]

Despues de pasar la noche llorando al ver lo que la gente de Microsoft considera “cumplir los estandares” leo en el Twitter de Joe Hewitt una frase que no requiere ser traducida: 

 I couldn’t be happier that Microsoft completely copied Firebug for IE8

Cuando vi esto dije,… me dejé algo ayer por ver y debería haberlo visto. Y en cierta manera es así, resulta que tenemos las páginas blancas sobre el nuevo Developer Toolbar, o como Joe Hewitt lo llama, el IE8 Firebug, y es que no es para menos…

Los parecidos son inevitables y aunque me sepa mal por Joe Hewitt, me alegro de poder disponer de una herramienta como Firebug para Internet Explorer. Pese a ser feo que Microsoft copie una herramienta para su uso sin poner en conocimiento del desarrollador que lo van a hacer (como mínimo), he de ser un poco egoista y pensar que de no ser así, no tendríamos una herramienta competente con la que depurar nuestras páginas.

Algunas imagenes más del nuevo Developer Toolbar

Cuando hablamos de Firebug, vimos que existía una versión lite que podíamos usar en nuestros proyectos para depurar posibles errores en javascript desde navegadores no compatibles con el plugin. En Internet Explorer, me ha salvado la vida más de una vez, y en Safari, aunque menos tambien he contribuido a que llegaran con buen camino algunos proyectos.

Hasta ahora necesitaba modificar el HTML de los proyectos para hacer posible la ejecución de Firebug Lite. Usando un poco de Javascript nos es posible hacer la modificación sobre cualquier página y tener una versión muy limitada de Firebug, pero que nos puede ayudar a depurar esos scripts que nos vuelven locos en Internet Explorer (o cualquier otro navegador).

Código

Añade este marcador a tu listado de marcadores y ejecutaló sobre cualquier página, esto te abrirá la consola de Firebug para que comiences a depurar tu página. Vamos a destripar el código para que veamos que es lo que hace nuestro marcador.

var h=document.getElementsByTagName('html');
h[0].setAttribute('debug', 'true');
if (!document.getElementById('_fb')) {
	var q=document.createElement('script');
	q.setAttribute('id', '_fb');
	q.setAttribute('src', 'http://remysharp.com/wp-content/uploads/2007/03/firebug.js');
	document.getElementsByTagName('body')[0].appendChild(q);
	void(q);
}else{
	void(window.console.open());
}

Como podemos ver, únicamente nos añade el atributo debug igual a true, necesario para que Firebug comienze a trabajar. Una vez añadido, generamos una llamada a un script externo usando un método llamado Javascript on Demand, que nos carga el script y nos permite hacer uso de las funciones de Firebug en nuestra página.

Hoy me he encontrado con este post en el que nos enseñan un código que nos permite detectar si el usuario está usando firebug o no. 

if(window.console && window.console.firebug)  {
 alert("you are using firebug");
}

No he logrado hacer que funcionara bien, pero es que mi Firebug ya tiene mucha batalla y no funciona del todo bien. ¿Alguien me comenta que tal va?