> Manuales > Videotutorial de Javascript

Videotutorial dedicado a la detección de errores en scripts Javascript y la implementación de la depuración de los programas en el navegador. Usaremos diversas diversas herramientas y distintos los navegadores.

Javascript es un lenguaje de programación sencillo, bastante abierto en cuanto a formas de trabajar y que ofrece al desarrollador bastante margen para programar de distintas maneras. Por ejemplo, en Javascript no necesitamos indicar los tipos de las variables, podemos escribir varias sentencias en la misma línea, poner nuestros scripts en diferentes localizaciones, etc. Pero quizás, toda esa manga ancha, pueda traer consigo algunas desventajas, sobre todo la posibilidad de cometer errores a la hora de programar.

depuración de código Javascript en el navegador

Este artículo servirá para todo aquel que le interese comenzar a programar Javascript y desee disponer a su lado algunos de los mejores aliados en los casos en que las cosas se tuercen, los detectores de errores. Los ingenieros en el desarrollo de aplicaciones dicen que ninguna aplicación de software está libre de errores y nosotros, que posiblemente estemos empezando a dar nuestros primeros pasos en la programación, somos todavía más susceptibles de cometerlos.

Con lo que hemos visto hasta el momento del Videotutorial de Javascript, aunque los temas tratados hayan sido principalmente teóricos, quizás ya nos hayamos encontrado con los primeros errores Javascript y con las primeras dudas sobre qué es lo que estaría pasando y cómo solucionarlo. Así pues, para que esta introducción al lenguaje de programación del lado del cliente sea completa, vamos a dedicar algo de tiempo para analizar diversos métodos y herramientas para detectar errores Javascript en el navegador.

La idea no es verse con todos los tipos de errores distintos que nos podremos encontrar, puesto que las posibilidades serían enormes, sino ver qué modos existen para dejarnos informar sobre qué es lo que hemos podido hacer mal. Es que en la programación podemos cometer errores de distintos tipos. Podemos escribir incorrectamente una sentencia, equivocarnos en el nombre de una función o tratar de acceder a una variable inexistente. Todos esos errores podrían ser detectados fácilmente con las herramientas que vamos a ver en el siguiente vídeo, pero algunas veces los programas están perfectamente escritos, pero los errores se producen igual, por llegar a situaciones que nunca habíamos previsto o por realizar operaciones imposibles, como una división por cero. Esos errores son más difíciles de encontrar y requerirían analizar paso por paso los estados de nuestras variables y el flujo del programa, lo que analizaremos más adelante.

Además, a la hora de detectar errores Javascript, en el panorama actual de los navegadores podremos encontrarnos con una dificultad típica, que aprenderemos a resolver con este videotutorial. Como quizás hayamos experimentado, la mayoría de los clientes web actuales cuando detectan un error Javascript no muestran ningún mensaje de error, por decirlo de alguna manera, se realiza una detección silenciosa de los errores. Por ello podremos encontrarnos con que no se muestra mensaje alguno para el usuario o al menos éstos se ocultan bajo un sencillo icono que aparece en algún sitio medio escondido. Esta es una razón por la que muchas veces puede resultar difícil de encontrar qué es lo que está funcionando mal con nuestros scripts.

En el vídeo nos dedicaremos a analizar las diferentes maneras de encontrar errores Javascript en diferentes navegadores. Comenzaremos con Firefox, mostrando cómo todos los errores Javascript se listan en la denominada "Consola de errores". Luego veremos como una herramienta esencial llamada "Firebug", que se instala como extensión de Firefox, nos ofrece una interfaz mucho más completa para la detección de errores Javascript e incluso de maquetación web.

Del mismo modo, mostraremos cómo depurar los errores en otros navegadores comúnmente utilizados por los usuarios. Veremos los casos de Internet Explorer y su complemento IE Developer Toolbar http://www.desarrolloweb.com/articulos/ie-developer-toolbar.html (disponible en todos los Explorer a partir de la versión 8) o en la extensión DebugBar, Google Chrome y sus herramientas para desarrolladores o el navegador Opera.

Esperamos que este vídeo os parezca interesante y que ayude a muchas personas a ahorrarse dolores de cabeza cuando surgen los errores en la programación Javascript. Os dejamos sin más con el videotutorial, después del cual estaremos en condiciones de ser un poco más autónomos a la hora de programar en Javascript y podremos pasar a temas más prácticos e interesantes para las personas que están aprendiendo este lenguaje del lado del cliente.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual