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

Anuncios
Consola en Google Chrome
Consola en Firefox
Consola en EDGE, si EDGE tambien tiene consola
Anuncios

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.

Anuncios

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:

Anuncios

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.

Anuncios

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 Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tambien podes donar

Es para mantenimiento del sitio, gracias!

$1.00