La consola de javascript
Tabla de contenido 馃搫
La consola de JavaScript
La consola de JavaScript es una gran herramienta que viene integrada en la mayor铆a de los navegadores web que permite a los desarrolladores interactuar con el c贸digo de JavaScript y es un depurador por excelencia para las aplicaciones.
Consola de JavaScript
Acceder a la consola
Para acceder a la consola de JavaScript existen diversas formas desde el navegador, podemos realizar las siguientes combinaciones de teclado:
| Atajo | Descripci贸n |
|---|---|
| f12 o CTRL + SHIFT + I | Abrir las herramientas para desarrolladores (DevTools). |
| CTRL + SHIFT + J | Acceder a las DevTools en la pesta帽a Console. |
驴Que podemos hacer en la consola?
En esta consola de JavaScript, podemos escribir cualquier c贸digo JavaScript como funciones o sentencias que estar谩n actuando en la p谩gina actual del navegador. De esta forma podemos observar los resultados que nos devuelve la consola al realizar diferentes acciones.
Cuando se comienza a programar, es t铆pico crear un programa que muestre por pantalla un texto, generalmente el texto <<Hola Mundo>>. Tambi茅n podemos realizar, por ejemplo operaciones aritm茅ticas, ingresando n煤meros y los operadores correspondientes.
En la consola de javascript podemos hacer esto de forma muy sencilla y directa:
1
2
console.log("Hola mundo"); // Hola Mundo
console.log(2 + 2); // 4
Comandos b谩sicos en la Consola de JavaScript
console.log()es un m茅todo que se utiliza para imprimir informaci贸n en la consola, pero no devuelve un valor. Por eso, cuando se usaconsole.log()en la consola de JavaScript, ver谩s undefined como resultado de esa l铆nea.
Funciones para la consola
Tenemos varias funciones para mostrar mensajes en la consola. Cada uno se enmarca en un contexto de uso, la siguiente tabla nos muestra algunas:
| Funci贸n | Descripci贸n |
|---|---|
console.log |
Muestra la informaci贸n por la consola. |
console.info |
Equivalente al anterior. Se utiliza para mensajes informativos. |
console.warn |
Se utiliza para informaci贸n de advertencia. Aparece en color amarillo. |
console.error |
Se utiliza para informaci贸n de error. Aparece en color rojo. |
console.clear |
Se utiliza para limpiar la consola. Equivalente a pulsar CTRL + L |
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..).
1
2
3
console.info("Yo aparecer茅 en celeste o en blanco");
console.error("Yo aparecer茅 en rojo");
console.warn("Yo aparecer茅 en amarillo");
Comandos b谩sicos con contexto en la Consola de JavaScript
Aplicar varios datos
En los ejemplos anteriores, solo hemos aportado un dato por cada l铆nea (un texto o una operaci贸n aritm茅tica), pero console.log() y sus funciones hermanas permiten a帽adir varios datos en una misma l铆nea, separ谩ndolo por com谩s (,):
1
console.log("隆Hola a todos!", "miren el siguiente n煤mero:", 5 + 18);
Aplicar estilos en la consola
Aunque s贸lo se trata de pura diversi贸n, se pueden aplicar estilos CSS en la consola de javascript haciendo uso de %c, que se remplazar谩 por los estilos indicados:
1
2
3
console.log("%cEniDev911!",
"background:linear-gradient(#000, #555);"+
"color:#fff; padding: 5px 10px;");
Es importante recalcar que cuando escribimos directamente en la consola de javascript podemos obviar el
console.log()y escribir directamente la informaci贸n, pero si queremos mostrar algo en la 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.
Trucos adicionales
En cualquier navegador Google chrome podemos pulsar ya sea CTRL + SHIFT + I o f12 para abrir el panel, una vez dentro podemos hacer algunos trucos.
Hacer una captura de la pantalla
Para ello, una vez tenemos la consola abierta presionamos CTRL + SHIFT + P.
Aparecer谩 una ventana con un Ejecutar>comando o (Run>command) donde podremos escribir directamente acciones. En nuestro caso que queremos sacar una captura de pantalla s贸lo debemos escribir captura de pantalla o screenshot (seg煤n idioma) y pulsar ENTER