Herramientas para desarrolladores : Cursos, manuales y guías de referencia : Cursos : JavaScript avanzado :

Detección y corrección de errores en JavaScript

  1. Introducción
  2. Tipos de errores
  3. Consolas de error de los navegadores
  4. Errores más frecuentes en JavaScript
  5. Algunos trucos para encontrar errores
  6. Conclusión

1. Introducción

Todo programador, sea novel o experimentado, se ha encontrado en más de una ocasión ante la necesidad de corregir errores en el código de un programa. A estos errores se les llama, típicamente, bugs, y de esta palabra inglesa (que podríamos traducir como bichos) viene el concepto de debuggin o depuración del código.

La mayoría de lenguajes de alto nivel incluyen en sus interfaces de programación sofisticadas herramientas de depuración de código. Estas aplicaciones permiten la ejecución de los fragmentos de código erróneos por separado, y paso a paso, con la posibilidad de incorporar ventanas para visualizar los valores de las variables que intervienen en la ejecución, introducir puntos de ruptura para detener la ejecución cuando se cumple cierta condición, etc.

Desgraciadamente, JavaScript no tiene todavía un buen depurador de código, y los programadores debemos echar mano del ingenio (y la experiencia) para localizar los errores. Este capítulo pretende ser una guía de ayuda a la hora de detectar y corregir errores en nuestros scripts.

2. Tipos de errores

En JavaScript pueden producirse 3 tipos de errores: errores en tiempo de carga, errores en tiempo de ejecución y errores lógicos. Vamos a ver en qué se caracteriza cada uno de ellos:

2.1 Errores en tiempo de carga

Este tipo de errores son los que el intérprete de JavaScript encuentra en el momento en que se carga la página. En su mayoría son errores de sintaxis debidos al incumplimiento de alguna de las reglas básicas de la escritura de código en el lenguaje JavaScript. Un ejemplo típico sería la definición de una variable de tipo cadena si utilizar las comillas. Por ejemplo:

var cadena = ¡Hola mundo!

La línea anterior provocará un error en tiempo de carga. Este tipo de errores se caracterizan por la aparición en la ventana del navegador de un cuadro de advertencia de la existencia del error. En este cuadro aparecerá una descripción del error (más o menos útil), la línea que lo contiene y su número de línea. Esta información, aunque de gran ayuda, puede no corresponderse con la línea real del error.

Para dificultar más nuestra labor, las distintas versiones de los navegadores muestran mensajes diferentes para el mismo error, con ventanas de aviso también diferentes. En el apartado siguiente trataremos esto en detalle.

2.2 Errores en tiempo de ejecución

Aunque nuestra página se cargue sin ningún error, eso no quiere decir que, posteriormente no se vaya a producir un error en tiempo de ejecución del script. Este tipo de errores se deben, normalmente, a un uso inapropiado de las funciones y objetos del lenguaje. Como ejemplo típico, intentar utilizar el valor de una variable no definida produce error en tiempo de ejución:

var Nombre = "Pedro"
document.write(nombre)

Observese en el ejemplo anterior que la primera variable es Nombre y la segunda nombre, con minúscula. Como para JavaScript son dos variables distintas, la variable nombre no existe y produce un error en tiempo de ejecución.

Este tipo de errores también producen la aparición de cuadros de aviso, con el tipo de error y la línea donde podría estar el problema.

2.3 Errores lógicos

Finálmente, podemos tener un script perfecto codificado, y sin ninguna clase de error en tiempo de ejecución, pero que cuando se desea que cambie el color de un texto a rojo, lo ponga en verde. Este tipo de problemas son debidos a errores lógicos, y suelen ser más difíciles de detectar que los anteriores.

3. Consolas de error de los navegadores

Como ya se ha comentado, cada navegador es un mundo, y trata de diferente forma los errores que aparezcan en el código. El Internet Explorer 4.0 abre un cuadro de aviso con cada error que aparezca en el script. Desgraciadamente, los mensajes de error que muestra son de poca ayuda, y el número de línea que indica suele estar equivocado. La versión 5.0 de este navegador mejora este comportamiento, y además permite elegir una navegación sin mensajes de error, avisándonos de que hay un error mediante un icono en la barra de estado:

Aviso de errores en el Internet Explorer

Pulsando sobre el icono, aparecerá un cuadro con información sobre los errores encontrados. Vamos a ponerlo a prueba con este ejemplo:

window.write("¡Hola mundo!")

En la línea anterior (línea 11 de la página de pruebas) existe un error de ejecución, ya que el método write pertenece al objeto document, y no al objeto window. En el Internet Explorer 5.0, tras pulsar sobre el icono, nos aparece esta ventana:

Ventana de errores del Internet Explorer

Como se observa, el navegador nos informa correctamente de que el error está en la línea 11, y de que es porque "El objeto no acepta esta propiedad o método". En este caso, el mensaje es de bastante ayuda.

El Netscape Navigator utiliza un sistema similar, pero ya desde las versiones 4.x. Cuando detecta un error en la página, aparece el texto "JavaScript error. Type javascript: into location for details" en la barra de estado. Este mensaje indica que escribiendo javascript: en la barra de direcciones y pulsando intro obtendremos más información sobre el error. Al hacerlo, se abre la consola de errores JavaScript del Navigator. En el ejemplo anterior:

En esta ventana aparecen listados los errores recientes de la página. Su contenido puede borrarse (para comenzar una nueva depuración). Además, la ventana puede dejarse permanentemente abierta para mayor comodidad. También incorpora un cuadro de texto para introducir líneas de código y ejecutarlas, lo que nos permite comprobar si tienen errores.

Como se ve, la información suministrada también es correcta, aunque está en perfecto inglés (la versión utilizada es la 4.7, que a día de hoy no tiene traducción).

4. Errores más frecuentes en JavaScript

Vamos a describir a continuación algunos de los errores más habituales que se cometene en JavaScript. Esta lista puede servir de guía para encontrar el origen de nuestros errores, y para intentar evitarlos en un futuro.

4.1 Utilización de cadenas sin las comillas

Aunque puede parecer tonto, este error sintáctico es uno de los má frecuentes. Sobre todo cuando dentro de una cadena tenemos que usarr el propio caracter de las comillas, y utilizamos para ello comillas simples y comillas dobles (JavaScript permite esta dualidad dentro de las cadenas, para facilitar la inclusión de código JavaScript en parámetros de etiquetas HTML). Por ejemplo:

<body onLoad="EscribeTitulo(Título de la página)">

En este ejemplo, se invoca la función EscribeTitulo() desde el evento onLoad. Si esta función recibe un parámetro tipo cadena, la cadena debe ir entre comillas simples, o se produce un error en tiempo de carga.

También es muy frecuente olvidarse de cerrar las comillas (simples o dobles) en una sentencia que las utiliza indistintamente (muy frecuente, debido a la dificultad de la lectura de este tipo de codificación).

4.2 Utilización de un sólo signo de igualdad en sentencias de comparación

Este error es tan común, que casi todo programador de lenguajes como C o JavaScript lo ha cometido en algún momento. Para estos lenguajes, no es lo mismo:

variable1 = variable2

que

variable1 == variable2

Lo primero es una asignación (el contenido de la variable2 se asigna a variable1). Lo segundo es una operació de comparación, que devuelve verdadero o falso. Este error se comete habitualmente en sentencias de bifurcación del tipo if (condicion) ... else ...

if (nombre = "Pedro")
   document.write("Pedro")

Como se aprecia en el ejemplo, donde se quiere hacer una comparación se está realizando una asignación.

4.3 Acceso a objetos que no existen todavía

Otro error muy frecuente es intentar usar métodos o propiedades de objetos que todavía no existen. El procesamiento de una página HTML se produce según se va cargando. Si un script se ejecuta en la cabecera de una página, y sin que se lance su ejecución mediante una función asociada a un evento, en el momento de su ejecución pueden no existir objetos de la página como formularios, imágenes, etc. a los cuales el script puede querer acceder. Por ejemplo:

<html>
<head>
<script language="javascript">
document.formulario.texto.value = "¡Hola!"
</script>
<body>
<form name="formulario">
<input type="text" name="texto">
</form>
</body>

Este error también se produce cuando un script de un marco intenta acceder a propiedades de la página de otro marco. Puede suceder que esta página todavía no se haya cargado en el momento en que se ejecuta el script.

4.4 Uso incorrecto la jerarquía de objetos

Este error es muy frecuente cuando se está aprendiendo JavaScript y no se conoce la jerarquía de objetos con precisión. Se produce cuando intentamos acceder a una propiedad o método de un objeto, pero nos equivocamos en la jerarquía. Por ejemplo:

document.forms[0].value = "¡Hola!"

La propiedad value no existe en el objeto forms (que representa a un formulario), sino en los objetos cuadro de texto del formulario.

4.5 Mala colocación de las llaves de bolques

Otro error muy frecuente es la falta de alguna llave de cierre de bloque de sentencias de código, o la mala colocación de la misma. Este error, difícil de detectar, conduce a mensajes que, con frecuencia, nada tienen que ver con el error. Se produce en la definición de funciones, en la creación de sentencias de bifurcación anidadas, etc. Veamos un ejemplo:

if (ombre == "Pedro" {
   document.write("¡Hola Pedro!")
else {
   alert("¡Hola!"
}

Como se ve, delante del else falta una llave de cierre de bloque de sentencias de código, que nos llevará a un error en tiempo de carga.

4.6 Uso incorrecto de los nombres de variables

Este error tiene muchas variantes. Para empezar, JavaScript distingue entre mayúsculas y minúsculas, lo que hace que miVariable y mivariable sean dos variables distintas.

Por otra parte, existen una serie de palabras reservadas que no pueden utilizarse como nombres de variables. Por ejemplo, una variable en JavaScript no puede llamarse var, porque esta palabra reservada la usa el lenguaje para la declaración de variables.

Este problema se puede extender a la utilización incorrecta de los nombres de la jerarquía de objetos. Confusiones del tipo:

document.writte("¡Hola!")

no son infrecuentes (obsérvese cómo se ha escrito write).

5. Algunos trucos para encontrar errores

Como sucede en la mayoría de las actividades humanas, la experiencia nos lleva al uso de ciertos trucos que pueden facilitar mucho las cosas en la ardúa tarea que queremos acometer. En la depuración de código existen también algunas técnicas, que describimos a continuación:

5.1 Establecimiento de puntos de inspección

Conocidos como watchpoints, los puntos de inspección nos permiten conocer el valor de una variable o propiedad en algún momento de la ejecución del programa. Como no disponemos de un depurador de código, para tener puntos de inspección podemos recurrir al simple truco de añadir sentencias alert() con el nombre de la variable que queremos monitorizar. Ejemplo:

<script language="javascript">
var contador
...
...
//monitorizando contador
alert("Variable contador: " + contador)
...
</script>

Como se ve, hemos introducido en la funcion alert() un indicador de la variable cuyo valor se va a mostrar. De lo contrario podemos crear gran confusión, y perder noción de lo que se está mostrando.

5.2 Eliminación parcial de segmentos del código

Otra técnica muy utilizada es la eliminación de partes del código para verificar si es en ellas donde se encuentra el error. Para ello, se utilizan los caracteres para comentar código que incorpora JavaScript. Para comentar una sóla línea podemos usar los caracteres //. Si lo que se quiere es impedir la ejecución de bloques enteros de código, es preferible usar el comentario de tipo /* ... */. Encerrando entre ellos parte del código impedimos su ejecución.

5.3 Prueba de líneas de código

Si dudamos sobre la validez de cierta codificación, puede ser útil esta técnica. Teclenado javascript: en la barra de direcciones del Navigator, y a continuación una sentencia JavaScript, ésta será ejecutada, lo que nos permite verificar si hay errores en ella. De igual modo puede utilizarse el cuadro de texto de la consola de errores del Navigator.

Si el código que queremos probar contiene más de una sentencia, pueden separarse empleando el caracter ; (punto y coma).

5.4 Utilizacion de editores de texto específicos

Aunque puede parecer trivial, la detección y corrección de errores se ve enormemente facilitada si utilizamos editores de texto específicos, que inorporen funcionalidades como la coloración del código según la sintaxis, la detección de bloques entre llaves y paréntesis, la inclusión del número de línea, etc.

Basta con observar cómo cambia el aspecto de un mismo bloque de código de un editor a otro:

Editando con el Bolck de Notas

Editando con el Ultra Edit

En el segundo caso estamos usando el Ultra Edit, un editor de texto muy potente y que ofrece grandes ventajas.

6. Conclusión

Como hemos visto a lo largo de este capítulo, la corrección de errores en JavaScript no es tarea sencilla. Siguiendo unas técnicas básicas, conociendo los tipos de errores y a qué suelen ser debidos, y empleando las herramientas adecuadas, podemos dar con los problemas más rápidamente y ahorrarnos muchos minutos de codificación.

 

Tutorial de JavaScript