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.

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

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

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

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

Lo siguiente es recargar la página.

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

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

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)

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

Pin It on Pinterest

Share This

Compártelo

¡Comparte este artículo con tus amigos!