Usar la consola del navegador

La consola es un cuaderno de pruebas que trae tu navegador. Escribes una línea de JavaScript, pulsas Enter y ves el resultado al instante. Es la forma más rápida de practicar todo lo de este módulo: no hay que crear archivos ni instalar programas.

Objetivos

Al terminar esta lección deberías ser capaz de:

• Abrir la consola en tu navegador.
• Ejecutar instrucciones y ver sus resultados.
• Usar console.log() y sus variantes para inspeccionar valores.
• Entender la diferencia entre un resultado y un mensaje de error.
• Saber qué precauciones tomar al pegar código en la consola.

¿Qué es exactamente la consola?

La consola forma parte de las herramientas de desarrollador (a veces llamadas DevTools). Es una ventana dentro del navegador donde puedes:

• Escribir código JavaScript y ejecutarlo.
• Ver los mensajes que el código imprime.
• Leer los errores cuando algo falla.

Piensa en ella como una calculadora: escribes una operación y te devuelve la respuesta. La diferencia es que aquí la “operación” puede ser cualquier instrucción de JavaScript.

Cómo abrirla

Los atajos más habituales:

Sistema	Atajo
Windows / Linux	F12 o Ctrl + Mayús + J
macOS	Cmd + Opción + J

También puedes hacer clic derecho en cualquier parte de la página → Inspeccionar → pestaña Consola.

Nota

El aspecto cambia un poco entre Chrome, Firefox, Safari y Edge, pero todos funcionan igual: hay un prompt (normalmente >), escribes y pulsas Enter. En Safari puede que tengas que activar antes el “menú de desarrollador” en Preferencias → Avanzado.

Tu primera prueba

Escribe esto y pulsa Enter:

console.log("¡Hola desde la consola!");

Verás el texto impreso. Justo debajo, el navegador suele mostrar undefined. No te asustes: es el valor que devuelve la propia instrucción console.log(). No significa que hayas hecho algo mal.

Ahora prueba a escribir expresiones sueltas, sin console.log():

2 + 2;

"JavaScript" + " " + "mola";

10 > 3;

La consola evalúa lo que escribes y te muestra el resultado: cada una de esas líneas produce un valor y la consola te lo enseña.

Las instrucciones console más útiles

console es una herramienta del navegador que trae varias formas de mostrar información. No todas son necesarias al principio, pero conviene conocerlas:

Instrucción	Para qué sirve	Ejemplo
console.log()	Mensaje normal. El que más usarás.	console.log("Hola")
console.error()	Muestra el mensaje en rojo, como error.	console.error("Algo falló")
console.warn()	Muestra el mensaje en amarillo, como aviso.	console.warn("Cuidado")
console.clear()	Borra la consola.	console.clear()

inspeccionar-valores.js

console.log("Nombre:", "Ana", "Edad:", 28);
console.error("Esto se ve en rojo");
console.warn("Esto se ve en amarillo");

Consejo

Cuando quieras comprobar el resultado de una operación, pon un console.log(...) a su alrededor. Es la técnica de depuración más sencilla y más usada, incluso por profesionales.

Cómo leer un error

Los errores aparecen en rojo e incluyen pistas muy valiosas. Por ejemplo, si escribes:

console.log(variableQueNoExiste);

Verás algo parecido a:

Uncaught ReferenceError: variableQueNoExiste is not defined
    at <anonymous>:1:13

Vamos por partes:

• ReferenceError: el tipo de error. Aquí indica que estás usando un nombre que no existe.
• variableQueNoExiste is not defined: la explicación en palabras.
• :1:13: línea y columna donde ocurrió.

Otros errores frecuentes al empezar:

Tipo	Suele significar
SyntaxError	Te falta una comilla, un paréntesis o una llave.
ReferenceError	Usaste un nombre que no existe.
TypeError	Intentaste hacer una operación que ese tipo de dato no permite.

No te saltes los errores

Un mensaje en rojo no es un castigo, es una pista. Léelo completo antes de borrar el código: casi siempre dice exactamente qué línea y qué nombre causaron el problema.

Trucos que ahorran tiempo

• Flecha arriba (↑): recupera la última instrucción que escribiste. Muy útil para corregir un error sin volver a teclear todo.
• Mayús + Enter: salto de línea sin ejecutar, para escribir varias líneas a la vez.
• clear(): limpia la pantalla cuando ya hay mucho ruido.
• Autocompletado: empieza a escribir console. y pulsa Tab para ver las opciones disponibles.

varias-lineas.js

console.log("Primera línea");
console.log("Segunda línea");
console.log(5 + 3);

La consola es un laboratorio, no el destino final

Todo lo que escribas en la consola se pierde al recargar la página. Está pensada para experimentar, no para guardar el trabajo. Cuando pases a proyectos reales, el código vivirá en archivos .js:

app.js

console.log("Este código sí se guarda en un archivo");

Pero para practicar los tipos de datos, las comparaciones o los bucles de este módulo, la consola es perfecta.

Precaución de seguridad

La consola ejecuta código con los permisos de la página que tienes abierta. Por eso:

• Nunca pegues código que no entiendas, especialmente si viene de un mensaje o un correo.
• No introduzcas contraseñas ni datos personales en la consola de una página que no sea tuya.
• Si un sitio te pide “pegar esto en la consola para verificar tu cuenta”, desconfía: es una técnica de engaño habitual.

Nota

Esta advertencia no debe preocuparte para practicar: escribir tus propios ejemplos en una pestaña en blanco es totalmente seguro.

Ejercicio

1. Abre la consola y ejecuta console.log("Mi nombre es " + "Luis").
2. Ejecuta typeof 42 y observa qué devuelve.
3. Provoca un error a propósito escribiendo console.log("hola" (sin el paréntesis de cierre) y lee el mensaje completo.
4. Usa la flecha arriba para recuperar esa línea y corrígela con console.log("hola").
5. Ejecuta console.warn("Esto es un aviso") y observa el color del mensaje.

Resumen

• La consola se abre con F12 o Ctrl/Cmd + Mayús/Opción + J y sirve para probar código al instante.
• console.log() es la herramienta básica para ver valores; warn() y error() son buenos complementos.
• Los mensajes en rojo indican el tipo de error, la causa y la línea; conviene leerlos con calma.
• Lo que escribes en la consola es temporal: el código definitivo va en archivos .js.
• No pegues código ajeno ni datos sensibles en la consola.

Siguiente paso: Tipos de datos.