Para acceder a la consola Javascript del navegador, podemos pulsar CTRL+SHIFT+I sobre la pestaña de la página web en cuestión, lo que nos llevará al Inspector de elementos del navegador. Este inspector es un panel de control general donde podemos ver varios aspectos de la página en la que nos encontramos: su etiquetado HTML, sus estilos CSS, etc...
Concretamente, a nosotros nos interesa una sección particular del inspector de elementos. Para ello, nos moveremos a la pestaña Console y ya nos encontraremos en la consola Javascript de la página.
También se puede utilizar directamente el atajo de teclado CTRL+SHIFT+J, que en algunos navegadores nos lleva directamente a la consola.
En esta consola, podemos escribir funciones o sentencias de Javascript que estarán actuando en la página que se encuentra en la pestaña actual del navegador. De esta forma podremos observar los resultados que nos devuelve en la consola al realizar diferentes acciones. Para ello, vamos a ver algunas bases:
El clásico primer ejemplo cuando se comienza a programar, es crear un programa que muestre por pantalla un texto, generalmente el texto «Hola Mundo». También podemos realizar, por ejemplo, operaciones numéricas. En la consola Javascript podemos hacer esto de forma muy sencilla:
console.log("Hola Mundo");
console.log(2 + 2);
En la primera línea, veremos que al pulsar enter nos muestra el texto «Hola Mundo». En la segunda línea, sin embargo, procesa la operación y nos devuelve 4. Para mostrar estos textos en la consola Javascript hemos utilizado la función console.log
, pero existen varias más:
Función | Descripción |
---|---|
console.log() | Muestra la información proporcionada en la consola Javascript. |
console.info() | Equivalente al anterior. Se utiliza para mensajes de información. |
console.warn() | Muestra información de advertencia. Aparece en amarillo. |
console.error() | Muestra información de error. Aparece en rojo. |
console.clear() | Limpia la consola. Equivalente a pulsar CTRL+L o escribir clear() . |
La idea es utilizar en nuestro código la función que más se adapte a nuestra situación en cada caso (errores graves con console.error(), errores leves con console.warn(), etc...).
En el ejemplo anterior, solo hemos aportado un dato por cada línea (un texto o una operación numérica), pero console.log()
y sus funciones hermanas permiten añadir varios datos en una misma línea, separándolo por comas:
console.log("¡Hola a todos! Observen este número: ", 5 + 18);
De momento nos puede parecer algo inútil, pero cuando empecemos a trabajar con variables y objetos, será muy necesario.
Aunque no es muy práctico y sólo se trata de puro divertimento, se pueden aplicar estilos CSS en la consola Javascript haciendo uso de %c
, que se reemplazará por los estilos indicados:
console.log("%c¡Hola Manz!",
"background:linear-gradient(#000, #555); color:#fff; padding: 5px 10px;");
Es importante recalcar que cuando escribimos en la consola podemos obviar el
console.log()
y escribir directamente la información, pero si queremos mostrar algo por consola desde nuestra página web o aplicación Javascript, es absolutamente necesario escribirconsole.log()
(o cualquiera de las funciones de su familia) en nuestro código.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev