ANEXO 1.

DEPURACIN DE JAVASCRIPT

Depuracin de JavaScript
Hasta hace unos aos, la depuracin de JavaScript en sitios web era horrible;
escribir cdigo en un editor de texto, aadir declaraciones de alerta para
inspeccionar valores, y repetir hasta que las cosas funcionasen.
El editor de texto sigue siendo an la principal herramienta para los
desarrolladores de JavaScript, pero actualmente ya existen ayudas como el
resaltado de sintaxis, el autocompletado de cdigo y otras herramientas
especficas de lenguaje.
Dependiendo de dnde provengan los desarrolladores, las opciones ms
populares son vi, UltraEdit, TextMate o gedit. Tambin hay plugins para IDEs como
Eclipse o distribuciones completas de Eclipse realizadas para el desarrollo de
JavaScript, como Aptana Studio.
JavaScript es ahora al menos tan importante como HTML para crear pginas web,
y los principales navegadores incluyen un depurador o lo tienen disponible como
un plug-in.

El depurador de WebKit se incluye en Google Chrome y Safari.

Para Firefox, el plug-in Firebug proporciona una funcionalidad similar.

Internet Explorer 8 o superior tambin tiene sus herramientas de

desarrollo.

Correccin de errores con Firefox

Para depurar un script con Firefox, solamente es necesario acceder a la opcin
Consola de error dentro del men Herramientas.
La consola de errores permite diferenciar los mensajes de informacin, los
mensajes de aviso y los mensajes de error. Adems, permite visualizar todos los
errores de la pgina simultneamente. Por cada error detectado se indica la
posible solucin mediante un mensaje en ingls y se muestra el trozo de cdigo
del script donde se ha producido el error. Adems, pulsando sobre el enlace
2

incluido se accede a la lnea concreta del archivo concreto donde se ha producido

el error.
Adems, Firefox permite instalar pequeas mejoras y ampliaciones en el
navegador, que se conocen con el nombre de extensiones. Una de las extensiones
ms interesantes para los desarrolladores de aplicaciones web es Firebug, que se
puede descargar gratuitamente desde http://www.getfirebug.com/

Ejemplo prctico
Hemos creado un HTML con la API de OpenLayers 3 y el mapa no aparece, qu
horror!

En la captura de pantalla anterior vemos como Firebug est desactivado.

Hacemos clic sobre l.
Aparentemente no aparece ningn error

Debemos actualizar la pgina. (Pulsa F5)

Ahora ya vemos el error.

Si se pincha sobre el mensaje de error, Firebug tambin redirige a la lnea concreta
del script en la que se est produciendo el error.
Hay un problema en la lnea 29, no hemos definido la variable layer. Pero.. si s la
tengo, o no? Volvemos al cdigo en nuestro editor de texto y comprobamos.
Hemos definido la variable layers (var layers = .) pero en el momento de crear el
mapa no hemos escrito bien el nombre de la variable ya que hemos escrito:
layers: layer,
y debera poner
layers: layers,
5

Corregimos y actualizamos el navegador.

Aqu nuestro mapa sin errores.

Depuracin de errores con Chrome

Una manera muy sencilla es hacer botn con el ratn y seleccionar la opcin
Inspeccionar elemento:

Ejemplo de un error en el que la variable layer no existe pero si existe la variables layers (con s)

De este modo se abren las Herramientas de desarrollo de Google Chrome.

Las Herramientas de desarrollo pueden ser separadas de la ventana del
navegador que estamos depurando, haciendo clic en el icono de la pantalla en la
esquina inferior izquierda de las herramientas de desarrollo.
La primera pestaa, Elements, es til para inspeccionar el estado actual de la
DOM y para ver los estilos aplicados a todos los recursos de hojas de estilo. Ten en
cuenta que tanto el DOM y los estilos se pueden modificar en esta ficha, para ver
cmo podran afectar a la apariencia de la pgina. Ntese, sin embargo, que estos
cambios no se pueden conservar en la fuente de origen, por lo que son slo
temporales.
La pestaa, Sources, ofrece una visin general de todos los recursos utilizados
para crear el contenido de la ventana del navegador, incluyendo bases de datos,
cach y cookies.
La ficha Network es til para la investigacin del trfico entre el navegador y los
servidores. Cada solicitud aparece en la lista, y tiene una vista detallada que
7

muestra las cabeceras de peticin y respuesta, los parmetros de consulta de

cadena, y solicitud y los datos de respuesta.
La pestaa Scripts es una caracterstica rica del depurador de JavaScript, que la
vamos a ver con mas detalle ms adelante. Se acompaa de una consola de
JavaScript, que puede ser seleccionado usando la ficha "Console", o aadirse a
cualquier otra ficha haciendo clic en el smbolo > .
Por ltimo, hay tres pestaas para la optimizacin del rendimiento y el perfil:
1. Timeline - lnea de tiempo
2. Profiles - perfiles y
3. Audits - Auditoras