Los navegadores vienen con herramientas para desarrolladores web, que son de mucha utilidad, hoy voy a escribir sobre una en particular y que es de mucha ayuda al crear código de JavaScript, esta es: La Consola.
Como mostrar la consola de js
Si estas usando Windows o Linux, para abrir la consola puedes presionar la tecla F12 para abrir las herramientas de desarrollador y luego hacer clic en la consola. Otra forma de abrirla es presionando las teclas Ctrl + Shift + J en Windows o Linux y ⌥ + ⌘ + J si usas Mac
En la imagen anterior tenemos las herramientas de desarrollador en el punto 1, está la opción para seleccionar la consola de js, en el punto 2, está el área en el que se muestran los errores y mensajes que genera javascript y en el punto 3 se muestra un cuadro de texto en el que se puede ejecutar código de js, solo escribes una instrucción y presionas la tecla Enter y en la parte de abajo verás el resultado, esto puede ser útil para probar una función o mostrar el valor de una variable.
Los 3 usos principales que le doy a esta consola son: Visualizar errores, Revisar programas mediante mensajes en la consola y Probar funciones, veamos ahora ejemplos de cada uno de estos.
Visualizar errores.
Cuando cargas una página web, a simple vista todo puede parecer estar bien, pero pueden haberse generado errores que afecten el correcto funcionamiento. Vamos a ver dos ejemplos sobre esto, en el siguiente código se llama a una función que no existe, esto genera un error, pero no se muestra en la página web, para detectar el error debemos ver la consola de javascript.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Ejemplo de Error en consola</title>
</head>
<body>
<p>Todo parecer estar bien</p>
<script type="text/javascript">
//Llamar a una funcion que no existe
func_no_existe();
</script>
</body>
</html>En la parte izquierda está la página web, y en la parte derecha, la consola de js que muestra el error que debemos corregir y además de darnos el error, también nos dice en que archivo esta (index) el error y en que línea (10) y como puedes ver (index):10 se muestra subrayado, esto significa que es un enlace y puedes hacer clic sobre él.
Al hacer clic, podrás ver una vista como esta. En la parte izquierda esta tu estructura de directorios y archivos. En la parte derecha está el archivo de js que generó el error y verás marcada la línea que falló.
De esta forma puedes encontrar cualquier tipo de error, incluso algunos que no esta relacionados directamente en JavaScript, veamos este código:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Ejemplo de Error en consola</title>
<link rel="stylesheet" href="/css/no_existe.css">
</head>
<body>
<p>Por que no funciona los estilos?</p>
</body>
</html>De nuevo, todo parece estar bien, has creado una hoja de estilos con estilos realmente asombrosos pero cuando cargas tu página web, no puedes ver los cambios, no se muestran esos estilos que creaste. Pero antes de que pienses que escribiste mal el código en el archivo de hojas de estilos, puedes revisar si hay un error.
Como puedes ver, se genera un error en donde dice que no existe la hoja de estilos. Esto sucede en ocasiones por que escribimos mal el nombre de la hoja de estilos. Entonces ahora solo revisas y corriges el nombre y todo listo.
Revisar programas mediante mensajes.
El otro uso que le doy a esta consola, es para depurar programas. Existe una función de js llamada console.log() con ella puedes escribir cualquier cosa en la consola.
Por ejemplo si haces un calculo y no es lo que esperabas, si no se ejecuta un bloque if, etc, solo debes imprimir los valores de las variables involucradas. Veamos un ejemplo con este código:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Depurar en la consola</title>
</head>
<body>
<script type="text/javascript">
let a,b;
a = 2;
console.log("Multiplicar a * 3");
b = a * 3 ;
console.log("Valor a: " + a + ', valor de b: ' + b);
</script>
</body>
</html>
Como ves en el código anterior se imprimen unos mensajes usando console.log, y el resultado es lo que vemos en esta imagen:
¿Ves? es muy útil para depurar programas y encontrar errores de cálculos.
Probar funciones.
El tercer uso que le doy esta consola, es para probar funciones. Si quieres saber si una función regresa el valor correcto, puedes probarla aquí. Veamos este código:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Funciones en la consola</title>
</head>
<body>
<script type="text/javascript">
function suma(a,b)
{
return a + b;
}
</script>
</body>
</html>En el código hay una función que recibe dos números y los suma, lo sé, es un ejemplo muy sencillo, pero solo quiero mostrarte como probar una función desde la consola y revisar si está regresando un resultado correcto.
Espero que te hayan gustado estos consejos, y que los pongas en práctica muy pronto. No olvides dejar tus comentarios.