JavaScript: Uso de la consola del navegador

28/May/2018 js trucos

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

Consola de JavaScript

En la imagen anterior tenemos las herramientas de desarrollador en el punto 1, esta la opción para seleccionar la consola de js, en el punto 2, esta 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 pagina 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 pagina web, para detectar el error debemos ver la consola de javascript.

En la parte izquierda esta la pagina web, y en la parte derecha, la consola de js que muestra el error que debemos corregir y ademas de darnos el error, también nos dice en que archivo esta (index) el error y en que linea (10) y como puedes ver (index):10 se muestra subrayado, esto significa que es un enlace y puedes hacer clic sobre él.

Detectar errores con la consola de js

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 esta el archivo de js que generó el error y verás marcada la linea que falló.

Archivo de js que genero el error

De esta forma puedes encontrar cualquier tipo de error, incluso algunos que no esta relacionados directamente en JavaScript, veamos este código:

De nuevo, todo parece estar bien, has creado una hoja de estilos con estilos realmente asombrosos pero cuando cargas tu pagina 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.

Error, archivo no existe, consola de js

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:

Como ves en el código anterior se imprimen unos mensajes usando console.log, y el resultado es lo que vemos en esta imagen:

Mostrar mensajes en la consola

¿Ves? es muy útil para depurar programas y encontrar errores de calculos.

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:

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 esta regresando un resultado correcto.

Como probar funciones desde la consola de js

Espero que te hayan gustado estos consejos, y que los pongas en práctica muy pronto. No olvides dejar tus comentarios.



Ir a la barra de herramientas