En este post vamos a explicar cómo realizar Debug de nuestro código Javascript usando el complemento de Firefox llamado Firebug.

El contenido de este tutorial ha sido escrito por el blog “El caminillo” quien nos ha dado el permiso para compartir este magnífico tutorial en nuestro blog. Fuente del tutorial: aquí

Como se comentaba al principio, Firebug es un complemento para Firefox. Con Firebug podemos tener una consola de errores o bien comprobar el css y el html de cada elemento que pinchamos… editarlo, a la vez que lo vemos, sin necesidad de recargar la página…

Pero, personalmente, la funcionalidad que más me agrada de Firebug es poder hacer debug de Javascript.

Haciendo debugging con Firebug

Firebug es un complemento de Firefox y se instala de la misma manera que el resto de los complementos. Menú: Herramientas/Complementos o bien Ctrol+Mayus+A buscamos Firebug en “Buscar complementos” y lo instalamos.

Lo primero es poner en marcha firebug.
Después de instalar el complemento veremos como nos ha salido un bichito en la parte superior derecha del navegador. Con pinchar en el veremos como pasa de gris a color… y eso nos indicará que el complemento esta activo.

%name Firebug   Debug de Javascript

Si en algún momento tenemos algún error nos lo indicará en ese icono. Por ejemplo en este caso habían dos errores. Y me indica un dos y los errores los podemos ver en la pestaña consola

%name Firebug   Debug de Javascript

Si pinchamos en él nos saldrá los siguientes menús, seleccionamos en Script y le damos a Recargar

%name Firebug   Debug de Javascript

Veremos como nos sale una lista con los ficheros que utilizan javascript de una página html.

%name Firebug   Debug de Javascript

Vamos donde queramos poner el punto de interrupción y pinchamos en la línea.

%name Firebug   Debug de Javascript

Lo siguiente es recargar la página.

Y comprobaremos que el script se detiene en nuestro punto de interrupción.

%name Firebug   Debug de Javascript

Tenemos las típicas funciones que hay en el debug de ir paso a paso o saltando funciones, recargar, continuar o salir.

%name Firebug   Debug de Javascript

Podemos observar el valor de las variables (Pestaña Observar) o pasando el ratón por una de nuestras variables.

Ver la pila de llamadas que hemos recorrido (Pestaña Pila)

O ver los puntos de ruptura que tenemos puesto  (Pestaña Puntos de ruptura)

Dime qué te ha parecido el artículo...

rating off Firebug   Debug de Javascriptrating off Firebug   Debug de Javascriptrating off Firebug   Debug de Javascriptrating off Firebug   Debug de Javascriptrating off Firebug   Debug de Javascript (Ninguna valoración todavía)
loading Firebug   Debug de JavascriptCargando…
Advertisements

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Veo que te gusta mi Blog...

Si te ha parecido interesante este artículo, no esperes a suscribirte a mi blog. Cuando vuelva a escribir otro seguro que te interesará y no desearás no haberte enterado. Puedes suscribirte con total tranquilidad de que no recibirás spam. Lo odio igual que tu. Solo quiero que aprendas cosas nuevas y te sientas agusto con mis artículos. ¡Gracias!

¡Gracias por suscribirte!

Pin It on Pinterest

Share This

Compártelo

¡Comparte este artículo con tus amigos!