USANDO

Depurando JavaScript

Juan Belón Pérez http://programadorphp.org

Diagrama – Contenidos

Conceptos1

Firebug2

Ejemplos3

Resumen4

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.

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.

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:

CONCEPTOS : diferencias

Compilador

Intérprete

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.

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.

DEPURACIÓN

Otros

depuradoresNo disponen de las

capacidades de

Firebug, no están

incrustados en el

navegador ni son

multiplataforma…

FirebugEs un depurador

integrado en el

navegador que se

mejora periódicamente

y dispone de un alto

número de

componentes…

JScriptTexto fuente

FIREBUG

Log & Monitor

ConsolaInspector

CSS & DOM

Profiler &Depurador

Navegador

WEB

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:

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…

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.

EJEMPLOS : FIREBUG

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.

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

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 …

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…

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:

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.

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.

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:

EJEMPLOS : FIREBUG

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)

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:

EJEMPLOS : FIREBUG

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");”.

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>

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:

EJEMPLOS : FIREBUG

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">

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.

RESUMEN

UN DEPURADOR EN EL NAVEGADOR

USANDO

jbelon@correo.ugr.es