Bienvenidos sean a este post, hoy comenzaremos sobre una serie de posts que nos ayudaran en la depuracion de nuestros programas, para nuestro primer post veremos una de las herramientas mas utiles como es la consola.
Es una herramienta que esta disponible en casi todos los navegadores pero de distintas formas, aunque generalmente se abren en la parte inferior de la ventana del navegador y puede constar de varios paneles, en los cuales tendremos el codigo HTML, las clases CSS y el codigo Javascript, veamos algunos ejemplos de consolas
Para entender mejor el concepto de consola usemos el siguiente ejemplo:
<html>
<head>
<title>Pagina de prueba</title>
<script>
funcionfalse();
</script>
</head>
<body>
<section>
Ejemplo de contenido Web
</section>
</body>
</html>En este caso tenemos un codigo comun en formato web pero llamamos a una funcion que no existe como es funcionfalse, si abrimos la consola veremos la siguiente pantalla
Como pueden ver nos notifica que la funcionfalse no esta definida en el nombre de la pagina que use, en general deben usar la opcion de mas herramientas el cual esta ubicado en el margen superior derecho, luego Mas herramientas y por ultimo Herramientas para desarrolladores, este caso es para Google Chrome, en otros navegadores puede variar pero no tanto, pasemos a hablar sobre el objeto de este elemento.
Objeto Console
Si bien a la hora de hablar sobre errores podemos tener errores de programacion pero los mas habituales son los errores logicos, esto sucede cuando el interprete de Javascript no encuentra ningun error pero el programa no hace lo esperado, esto puede ser debido a un condicional mal hecho, una operacion faltante, una variable que recibe un valor incorrecto o no recibe ninguno, etc y como podran deducir estos son los mas dificiles de depurar (asi se llama a la tarea de detectar y corregir un error) nuestro programa.
Para poder ayudarnos a la hora de depurar el programa existen dos herramientas, la primera es tener un codigo bien estructurado y de facil lectura, como dijimos unas cuantas veces, y por ultimo una herramienta de Javascript llamada breakpoint (punto de interrupcion), pero que es un breakpoint? Esto es un punto de interrupcion que establecemos en el codigo para poder controlar el estado actual de la aplicacion, en un breakpoint podemos tomar varias acciones como por ejemplo: mostrar los valores actuales de las variables o informar hasta donde se llego con el codigo.
Una practica muy habitual en Javascript es utilizar el metodo alert para mostrar una notificacion en pantalla, ya sea para notificar si una funcion se llama correctamente con un evento, mostrar el valor de una variable en una funcion o evento, varios tipos de notificaciones, etc. pero el gran inconveniente es que este metodo de trabajo detiene la ejecucion del programa pero gracias a los navegadores podemos crear un objeto de tipo Console y este se asigna a la propiedad console del objeto Window y se transforma en un enlace entre nuestro codigo y la consola del navegador, veamos algunos metodos del objeto Console:
- Log(valor), muestra el valor entre parentesis en la consola
- Assert(condicion, valores), muestra en la consola los valores que especifican los atributos si la condicion es falsa
- Clear(), limpia la consola
De los metodos mostrados anteriormente el mas importante es log, ya que nos permite imprimir un mensaje en la consola en cualquier momento y sin interrumpir el codigo permitiendo que controlemos los valores de las propiedades y metodos cuando nosotros queramos y ver si estan funcionando de la forma correcta, vamos a ver el siguiente ejemplo:
console.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Objeto Console</title>
<script>
for(var f=0;f < 10; f++)
console.log("El valor actual es " + f);
console.log("El valor final de f es " + f);
</script>
</head>
<body>
<section>
<h1>Sitio Web</h1>
</section>
</body>
</html>Hablemos sobre lo que mas nos interesa que es el tag SCRIPT, en este caso utilizamos un bucle for donde crearemos una variable llamada f con un valor inicial de 0, luego en el condicional sera que f sea menor a 10, por ultimo lo incrementaremos en 1, como usaremos una sola accion no le pondremos las llaves, este bucle escribira en la consola por medio del metodo log, un mensaje y el valor de f, una vez terminado el bucle escribiremos en la consola el valor final de f, probemos el programa y vayamos a la consola como se ve en la siguiente imagen
En este caso vemos que nos muestra los valores del 0 al 9 y por ultimo un valor de 10, esto es debido a que los primeros 10 numeros son los del bucle pero como el condicional escribe si f es menor a 10, cuando se incrementa por ultima vez no escribe en la consola pero incrementa a f y cuando volvemos a mostrar a escribir en consola esta vez si nos muestra el valor final de f que es 10.
En resumen, hoy hemos visto a la consola y el objeto Console, como se ve la consola en los navegadores, como trabaja el objeto Console, algunos de los metodos mas importantes, un metodo poco practico pero util para ver el estado de un codigo, como pudimos reemplazarlo por medio del objeto Console, y un ejemplo practico para verlo, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.50
El blog de Tinchicus 