Este documento proporciona una introducción a JavaScript y el depurador Firebug. Explica conceptos clave como qué es JavaScript, el DOM y los intérpretes. Luego describe las funcionalidades de Firebug como inspeccionar el DOM, depurar código JavaScript y modificar dinámicamente la página web. Finalmente, ofrece ejemplos prácticos de cómo usar Firebug para depurar una página web real.

1. Depurando JavaScript
Juan Belón Pérez http://programadorphp.org
USANDO

2. Diagrama – Contenidos
1 Conceptos
2 Firebug
3 Ejemplos
4 Resumen

3. CONCEPTOS
 ¿Qué es JavaScript?
 es un lenguaje interpretado, es decir, que no requiere
compilación, se usa fundamentalmente en páginas web,tiene
una sintaxis parecida al lenguaje Java y C.
 No es un lenguaje orientado a objetos como tal ya que no
dispone de herencia (mecanismo para que una clase derive
hacia otra compartiendo y extendiendo su funcionalidad),sino
que se basa en prototipos, donde no existen “clases”,la
reutilización de las funciones se hace a través de la clonación
de los objetos existentes, que sirve de prototipos , sobre los
que se extienden sus funcionalidades. También se le llama
programación basada en instancias ( ver lenguaje Self).
 Es una implementación del DOM.

4. CONCEPTOS
 ¿Qué es el DOM?
 DOM viene de Document Object Model, que traducido viene a
ser el Modelo de Objetos de Documento y contiene todas las
estructuras de datos del documento de la página web, es una
forma de representar los elementos de un documento
estructurado (tal como una página web HTML o un
documento XML) como objetos que tienen sus propios
métodos y propiedades. El responsable del DOM es el World
Wide Web Consortium (W3C). En efecto, el DOM es una API
para acceder, añadir y cambiar dinámicamente contenido
estructurado en documentos con lenguajes como ECMAScript
(Javascript).
 Éste lenguaje es interpretado por el programa utilizado para
navegar…Firefox, Internet Explorer, Opera,Safari,etc.

5. CONCEPTOS
¿Qué es un intérprete?
 Es un programa capaz de analizar y ejecutar otros
programas, escritos en un lenguaje de alto nivel.
Los intérpretes no son compiladores, ya que éstos
se encargan de traducir un programa desde su
descripción ,en un lenguaje de programación, al
código máquina del sistema destino, i.e., un
compilador transforma un programa en lenguaje de
alto nivel en un programa en lenguaje de bajo nivel:

6. CONCEPTOS : diferencias
Compilador
Intérprete

7. CONCEPTOS: diferencias
 Los intérpretes sólo realizan la traducción a
medida que sea necesario y normalmente,
no guardan el resultado de dicha traducción,
i.e., es un programa ,ej. el navegador en el
caso de JavaScript ,que toma el código con
el texto fuente del fichero .HTML o .JS y lo
analiza para después ejecutarlo. Esto hace
que se modifique el árbol DOM ,la estructura
de una página web que contiene el
navegador internamente y que gracias a
plugins como DOM Inspector puede ser
inspeccionado y por medio de FireBug
,depurado.

8. CONCEPTOS: diferencias
 Los programas interpretados suelen ser más lentos que los
compilados debido a la necesidad de traducir el programa
mientras se ejecuta, pero a cambio son más flexibles como
entornos de programación y depuración (lo que se traduce,
por ejemplo, en una mayor facilidad para reemplazar
partes enteras del programa o añadir módulos
completamente nuevos), y permiten ofrecer al programa
interpretado un entorno no dependiente de la máquina
donde se ejecuta el intérprete, sino del propio intérprete
(lo que se conoce comúnmente como máquina virtual).
 Comparando su actuación con la de un ser humano, un
compilador equivale a un traductor profesional que, a
partir de un texto, prepara otro independiente traducido a
otra lengua, mientras que un intérprete corresponde al
intérprete humano, que traduce de viva voz las palabras
que oye, sin dejar constancia por escrito.
 En la actualidad, uno de los entornos más comunes de uso
de los intérpretes informáticos es Internet, debido a la
posibilidad que estos tienen de ejecutarse
independientemente de la plataforma.

9. DEPURACIÓN
JScript
Texto fuente
Firebug Otros
Es un depurador depuradores
integrado en el No disponen de las
navegador que se capacidades de
mejora periódicamente Firebug, no están
y dispone de un alto incrustados en el
número de navegador ni son
componentes… multiplataforma…

10. FIREBUG
WEB
Consola
Inspector
Log &
Monitor Navegador
CSS &
DOM
Profiler &
Depurador

11. FIREBUG: INSTALACIÓN
 Primero debemos tener instalado el
navegador con la extensión “DOM –
Inspector” o también comúnmente llamado:
Inspeccionador del árbol DOM. Después
pasamos a abrir el navegador e instalar el
componente Firebug desde “Herramientas->
Complementos” -> “Obtener
extensiones”…donde buscaremos dicho
plugin y lo instalaremos, tras esto
reiniciaremos el navegador y
comprobaremos que está funcionando
pulsando la tecla de acceso al plugin “F12” o
el nuevo icono alojado en la parte inferior
derecha de Firefox: .
 Y debe de aparecer la siguiente “ventana”
en la parte inferior:

12. FIREBUG: INSTALACIÓN
 Firebug recién instalado:
 Para las demostraciones y capturas he utilizado la versión 2.0.0.3 de Firefox
y 1.05 de Firebug (http://www.getfirebug.com/ )
 Adicionalmente se pueden instalar otras herramientas útiles para
desarrollar en la web como pueden ser WebDeveloper 1.1.3
(http://chrispederick.com/work/webdeveloper/ ) y otras…

13. EJEMPLOS
 Tomaremos como ejemplo la página de la
escuela para depurar contenido JavaScript
que se ejecuta en ella: (http://etsiit.ugr.es/
)
 Pulsamos sobre “Enable Firebug” y una vez
cargada la página podremos inspeccionar el
contenido del árbol DOM ,de la estructura
HTML de ésta página web en concreto, si
pulsamos sobre inspect podremos ir
resaltando mediante cuadros de color azul
las diferentes metaetiquetas que componen
los nodos del árbol de la estructura.

14. EJEMPLOS : FIREBUG

15. EJEMPLOS : FIREBUG
 De forma que en la ventana de Firebug
aparece coloreado con fondo azul claro el
contenido del marco que estamos
apuntando en la página web. Al igual que
aparece el estilo CSS utilizado en dicho
nodo, en la parte derecha del componente,
podemos seleccionar la pestaña “Layout”
que viene a ser la disposición de dicho
elemento HTML o nodo y sus
bordes,establecidos por parámetros de
estilo.

16. EJEMPLOS : FIREBUG
 La pestaña DOM es la más interesante de esta parte ya que nos
muestra la información referente a dicho nodo seleccionado

17. EJEMPLOS : FIREBUG
 En éste caso podemos ver que el enlace es
un enlace que contiene un evento “onclick”
(en lenguaje JavaScript) que realiza una
llamada a varias funciones “selectRSS();
ajaxManager(); return false;” y devuelve
falso para no “navegar” a otra página…
 Para no tener que buscar dichas funciones
haremos uso del Profiler que viene en la
pestaña Console, y existen dos casos para
hacer uso del mismo, el primero, si
pulsamos en la web sobre “ETSIIT
NOTICIAS” sin hacer uso del botón “profile”,
debe de aparecer una llamada en segundo
plano en JavaScript …

18. EJEMPLOS : FIREBUG
 …donde podemos comprobar los datos de la petición: el fichero
que se ha llamado, el método de transporte de datos, las
cabeceras de la respuesta,tiempo de la misma en
milisegundos,etc. Observar que aparece la línea del fichero fuente
que se ha ejecutado al llamar al evento…

19. EJEMPLOS : FIREBUG
El segundo caso de uso del profiler: Si
usamos en el botón “Profile” y luego
pinchamos en un enlace de la web,
por cambiar que sea una noticia, por
ejemplo “Premios al mejor proyecto
informático y a la mejor aplicación”,
al cambiar el contenido de la página
deberemos volver a pulsar “Profile”,
para que deje de analizar las llamadas
JavaScript que se están ejecutando.
Debe aprecer algo como lo siguiente:

20. EJEMPLOS : FIREBUG
 Si miramos el enlace sobre el que
pinchamos anteriormente con “inspect”
sobre éste, podemos ver que el contenido de
la llamada en el evento era :
`onclick="openNews(1)"´, pero no
sabíamos que más se ejecutaba puesto que
no habiamos mirado el código JavaScript de
dicha función o llamada…,ahora vemos qué
más se está ejecutando y se adjunta una
tabla de estadísticas que informan acerca de
la ejecución del código en la máquina virtual
de dicho lenguaje. Se han realizado 3
llamadas a funciones que en principio no
tienen que ver con la primera “openNews”
,para saber qué es lo que hace esa función
pinchamos en “ajax.js (line 143)” de la
columna File.

21. EJEMPLOS : FIREBUG
 Y hemos entrado al modo depurador ,es la pestaña
Script del componente Firebug de Firefox, en la parte
izquierda tenemos las listas de inspecciones y puntos
de ruptura para la página actual, podemos añadir una
inspección pinchando en el cuadro derecho de fondo
amarillo “New watch expression…” y escribiendo el
nombre de la variable. El modo de funcionamiento en
éste punto es igual a un depurador de cualquier otro
lenguaje.

22. EJEMPLOS : FIREBUG
 Para comprobar su funcinamiento añadiremos
“noticia” a las inspecciones y un breakpoint,
pinchando en la línea 144 del código fuente para éste
fichero “ajax.js” donde nos encontramos en éste
momento.Antes de probar que funciona ,si leemos el
contenido de la función , aparece toggleDiv()
,podemos buscar dicha función en el minibuscador
del componente en la parte superior derecha del
mismo, “function toggleDiv” y asi mismo
comprobaremos por qué se han hecho 3 llamadas a
ésta función y otras 3 a “MM_findObj()” que se llama
una vez dentro de “toggleDiv()”.
 Ahora podemos ir a la página y pinchar en “Volver”
que no es más que una llamada a returnNews() ,la
función justo por encima de openNews() que
acabamos de analizar, y ahora al pinchar sobre la
misma noticia anterior veremos que salta el punto de
ruptura y tenemos los valores de las inspecciones
rellenos:

23. EJEMPLOS : FIREBUG

24. EJEMPLOS : FIREBUG
 “noticia” está a 0 , “this” es la única
variable global en éste punto,con toda la
información del objeto disponible y “not” es
el parámetro de la función con valor
1.Vamos pulsando F11 (StepInto) para ir
ejecutando paso a paso cada instrucción y
entrando en las posibles llamadas que haya
dentro de ésta función. En la primera línea
que se ejecuta comprobamos que noticia se
pone a 1 en la ventana de “Watch” ,la
inspección está funcionando correctamente.
La segunda línea es una llamada a la función
toggleDiv() a la que entra por usar StepInto
(F11)

25. EJEMPLOS : FIREBUG
 y para darle el valor a “e” necesita entrar en la
función MM_findObj() con el parámetro pasado
“pagNot0”, en éste punto antes de continuar
deberíamos saber qué es “pagNot0”, se encuentra en
el árbol DOM pero si nos perdemos en él pasamos a
la pestaña HTML y utilizando el buscador
encontraremos que se trata de una división donde se
colocan las noticias:

26. EJEMPLOS : FIREBUG

27. EJEMPLOS : FIREBUG
 Coloreada en azul está la división “pagNot0”, ahora
podemos pasar de nuevo a la pestaña Script porque
sabemos qué es lo que va a cambiar el código
JavaScript ,la función MM_findObj() buscará dicho
nodo asi que no vamos a iterar toda ésta sino que
añadiremos un breakpoint al final en la línea 34
donde dice “return x” (comprendiendo la lógica de la
función previamente) y pulsando sobre “Continue”
(F8) seguimos con F11 y volvemos a la llamada a
“toggleDiv()” y “e” tiene ya el valor del nodo del
DOM “div#pagNot0.paginaNoticias…” vemos que
desaparece el contenido porque se cambia el estilo
de la división haciéndose invisible y que se hace
visible el contenido de la noticia seleccionada (y que
se cargó al cargarse la página) para mostrar,en éste
caso la noticia 1 ;se oculta la división del listado de
las noticias en “pagNot0” y se muestra la división de
la noticia seleccionada: “noticia1” al igual que los
enlaces para volver al estado anterior
“toggleDiv("newsvolver");”.

28. EJEMPLOS : FIREBUG
 Para hacer ahora algo más práctico y demostrar la potencia del
depurador modificaremos el árbol DOM de la página ,
inspeccionando (pestaña Console -> botón “Inspect” ) llendo a la
división “pagNot0” y pulsando en `<div id=”pagNot0”… ´
Pulsaremos sobre “EDIT” justo encima de las pestañas ,dentro del
componente e iremos al final del código mostrado añadiendo un
enlace nuevo al HTML de la división con éste contenido al final del
texto ,pero antes del último </div>:

<br/><a onclick="openNews(27)" href="#" style="border-
bottom-style: groove;">Enlace creado por mi para probar el
depurador Firebug</a>
 Repetimos la operación pero ahora cambiamos la división
“contenedorNoticias” añadiéndole otra división nueva con ID 27.
 <div style="display: none;" class="noticia" id="noticia27"><div
class="tituloNot"><a href="javascript:windowalert('Noticia
creada por mi');">Noticia creada por mi</a><br/></div><span
class="fechaNot">Publicada el:<strong>
23/04/2007</strong></span><span class="enlaceNot"><a
href="javascript:windowalert('Noticia creada por mi');"> Leer
</a></span><div class="descNot"/></div>

29. EJEMPLOS : FIREBUG
Nota: Le he puesto de ID noticia27
porque la última noticia es la
noticia18, por poner un número
alto.Además no hace falta meter la
división noticia27 dentro del
contenedor del resto porque el código
busca por todo el árbol DOM para
encontrar el elemento con dicho ID.
Comprobamos que al no insertar el
enlace dentro de una división donde
se aplican los estilos CSS para enlaces
aparecerá ,con una fuente y un color
distintos, lógicamente:

30. EJEMPLOS : FIREBUG

31. EJEMPLOS : FIREBUG
 Así podemos crear nuestra propia noticia sin
tener que cambiar el código fuente que genera
el servidor http Apache meditante el script PHP.
 Podemos llamar directamente a las
funciones,por ejemplo a “returnNews()” sin
tenerque hacer uso de los eventos, mediante la
pestaña “Console” ,escribimos el nombre de la
función o cualquier otra instrucción y pulsamos
en “Run” justo debajo del panel derecho que es
el hueco para insertar las líneas a ejecutar…
 Ésta parte es de la más útiles que tiene el
depurador ya que podemos utilizar código para
modificar la página, podemos llamar a
openNews(numero) donde numero es la noticia
a mostrar, o podemos ver el valor de noticia en
un momento concreto e inspeccionar un objeto
de la página, como por ejemplo un elemento,un
nodo del DOM, por medio del uso de funciones,
para acortar se suele utilizar
document.getElementById(„id‟) ,que localiza
elementos del árbol por su id , por medio de una
función llamada $(„id‟) , de forma que
$(„examenes‟) nos devuelve el elemento (lista
en este caso) correspondiente:
<li id="examenes">

32. EJEMPLOS : FIREBUG
La última pestaña pero no menos
importante es “Net” y sirve para
comprobar que todos los ficheros de
la web han sido descargados ,muestra
lo que tardaron en hacerlo.

33. RESUMEN
UN DEPURADOR EN EL NAVEGADOR

34. jbelon@correo.ugr.es
USANDO