Contenido

Firebug Lite 1.2, Buscando las 7 diferencias

25 Jul

+ 8

A ver si alguien puede decirme, que hay de diferente entre estas imagenes:

Imagen A

imagen-4

Imagen B

firebug-lite-776x656

Imagen C

opera_html

Imagen D

safari_dom

Es dificil, ¿verdad? Es normal que sea complicado ya que la gente de Firebug ha conseguido algo realmente sorprendente. Si nos fijamos bien, la imagen A es Firebug 1.2 desde Firefox 3 en MacOs, las demás son Firebug Lite 1.2 sobre Internet Explorer 7 (B), Opera (C), Safari (D).

El resultado es soprendente y es que esta nueva versión de Firebug Lite ha revolucionado el concepto de debug de aplicaciones web. Da igual en que navegador estes desarrollando o teniendo problemas, con Firebug Lite creerás que estás en Firefox, con la confianza y seguridad que eso conlleva.

Recordemos como instalarlo en nuestra aplicación:

  • Añadimos entre nuestros tags <head></head> el siguiente código.
    <script type='text/javascript'
        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

o podemos tener un acceso directo en nuestro navegador para poder añadir la funcionalidad a cualquier página.

Firebug Lite 1.2

Firebug pasa a ser parte del Proyecto Mozilla

18 Jul

+ 10

Han tardado, pero por fin se ha anunciado, atraves de John Resig,  que Firebug pasa a ser un proyecto de la compañía Mozilla, al igual que Dragonfly en Opera, Firefox tendrá su aplicación de debugueo propia de la casa, lo que seguro nos aportará importantes y interesantes sorpresas :D

Un firebug para cada navegador ¿con cual te quedas?

2 Jul

+ 18

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

safariwebinspector1firefoxfirebug1

ie8devtools1operadragonfly1

¿con cual te quedas?

Gracias Emilio.

4 extensiones para complementar Firebug

1 Jul

+ 9

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.

Opera DragonFly alpha 2, firebug para Opera cada vez más cerca

27 Jun

+ 0

Opera ha lanzado la versión alpha 2 de Opera DragonFly, lo que será el “Firebug” para este navegador. Recomendado echarle un vistazo.

Por fin!, Firebug en Mozilla Firefox 3.0

22 May

+ 3

Por fin podemos disfrutar de Firebug en la próxima versión de Firefox (la 3.0). Hasta el momento podiamos usarlo pero con alguna que otra limitación que hacía que su uso no fuera para nada el esperado. Ahora con esta nueva versión además de funcionar más o menos completamente encontramos las siguiente correcciones que pasarán a formar parte de la próxima versión de Firebug (la 1.2).[Descargar]

pi.debugger, el mejor sustituto de Firebug

10 May

+ 6

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.

pidebugger

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]

Developer Toolbar para Internet Explorer 8

6 Mar

+ 12

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…

ie8_developer_toolbar_firebug.JPG

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

ie8_developer_toolbar_javascript.JPGie8_developer_toolbar_javascript3.JPG
ie8_developer_toolbar_javascript2.JPGie8_developer_toolbar_html_code.JPG
ie8_developer_toolbar_css.JPGie8_developer_toolbar_console.JPG

Firebug sin Firefox en cualquier página

14 Ene

+ 3

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.

Detecta si Firebug está activo

27 Nov

+ 8

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?

¿Detectar Firebug?