lunes, 22 de abril de 2013

[JavaScript] Detectando Errores

Bueno anteriormente publique una entrada la cual era un juego de piedra, papel o tijera... en la cual probabamos el codigo javascript en la consola de firebug, aunque puede ser de utilidad para comprobar errores tambien en este caso explicaremos dos de mis favoritas :P

Empezaremos con algo que viene ya en W3schools y nos guiaremos de ella :D

Try...Throw...Catch

Estos son la utilizacion de try (intentar ejecutar codigo)... throw (lanzar mensaje personalizado)... catch (atrapar errores)....

Bueno siempre que programas un script en javascript pueden suceder errores, y con try,throw y catch podemos saber por que suceden tales errores....


Bueno aunque no es necesario usar throw muchas veces puede resultar util para personalizar nuestro mensaje de error, por lo cual veremos un ejemplo de try...catch y uno de try...throw...catch 

Ejemplo de try...catch:

http://pastebin.com/GASKznc1

Lo que hace esto es intentar ejecutar el codigo que se encuentra entre try { code} pero si el codigo es erroneo se pasa a catch el cual lanza un mensaje de alerta con el error, en este caso e que es el parametro de catch, nos ayuda para que se muestre el mensaje que recogio e.message

Imagen de ejemplo

Como puedes ver nos lanza el mensaje de error en este caso nos dice que adddlert no esta definida y como es claro esa funcion no existe :P

Ahora podriamos personalizar ese mensaje de adddlert pero mejor veremos otro ejemplo, estos dos ejemplos que les muestro los pueden ver en w3schools, les deje el enlace arriba :P

Ejemplo try...throw...catch:


En este ejemplo lo que hacemos es darle un rango de valores al input... entre 5 y 10 si es menor lo mostramos si es mayor tambien si esta vacio tambien si es una letra tambien xDDD :P

 
Imagen ejemplo 2


Por consola y firebug

En realidad yo trabajo con firefox y no tengo idea si otros navegadores incluyen una consola de este tipo de todas formas creo que muchos deben de tenerlo solo es cuestion de buscarle XDD

En este caso yo utilizo Web Developer Tool y de ahi la saco la consola.... Desde Tools>Error Console....
o Tambien la tachita que muestra te dice el error que puede estar causando...
Y tambien esta firebug que es demasiado bueno para hacer debug jeje 

Aqui tenemos el ultimo ejemplo parecido al primero siendo que tenemos el mismo error, pero en este caso no utilizamos try...catch...

Ejemplo 3:



Imagen ejemplo 1

Como puedes ver en la imagen de ejemplo en este caso utilizamos la consola de errores para detectar el error


Imagen ejemplo 2

Y en este otro ejemplo utilizamos firebug para detectar el error...

Espero que estos consejos o tutorial les haya sido de utilidad a mas de uno :P


No hay comentarios:

Publicar un comentario