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

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?

Companion.JS, es una de esas maravillas que todos los desarrolladores web estamos deseando encontrarnos un día, ya que gracias a ella puede mejorar nuestra calidad de vida en nuestro trabajo o no.

Si para Firefox disponemos de Firebug, Companion.JS viene a ser una versión limitada pero para Internet Explorer.

Características

• Reporte de errores javascript detallados.
• API para consola, similar a la de Firebug
• Consola Javascript para inspeccionar objetos en tiempo real
• Icono en el Toolbar para lanzar el panel. 

Requerimientos 

• Microsoft Script Debugger
• Companion.JS
  

Instalación

1) Descargamos Microsoft Script Debugger y Companion.JS

2) Nos aseguramos que las opciones:

• Disable script debugging (Internet Explorer)
• Disable script debugging (Others)

 estén activadas en Herramientas > Opciones de Internet > Avanzado.

Ejecutar

Curiosidad

La versión actual expira en Enero de 2009, pero seguro que sacan versiones posteriores que aumentarán este periodo, o… ya sabeis 😀