Es difícil imaginar el desarrollo en JS sin enviar información a la consola. Metafóricamente hablando, console.log () es la cura para la mayoría de las enfermedades del código.

La depuración es casi como investigar un crimen donde tú también eres el principal culpable - Filipe Fortes

Pero además de la función de consola.log () de uso común, hay muchas más herramientas que pueden simplificar enormemente el proceso. Veamos algunos de ellos con ejemplos simples.

console.log (), .info (), .debug (), .warn (), .error ()

Lo más simple es imprimir la línea con un color correspondiente al tipo de evento.

Utilizamos marcadores de posición

Para sustituir datos en una línea con un mensaje, es más conveniente utilizar marcadores de posición.

% o - para el objeto
% s - para cadena
% d - para decimal o entero

Agregar CSS

¿No hay suficiente información / advertencia / error? ¡No importa! Puede aplicar CSS a los mensajes de la consola.

¿Desea aplicar CSS solo a una parte del mensaje? Esto se hace así:

console.dir ()

A menudo es mucho más conveniente imprimir una representación JSON del objeto que nos interesa.

Salida HTML

Los elementos HTML en la consola se pueden examinar de la misma manera que en el inspector.

console.table ()

¿Quiere ver rápidamente los datos en una lista de JSON?

console.group () y console.groupEnd ()

Los mensajes en la consola se pueden agrupar para mayor comodidad.

console.count ()

Esta función registra cuántas veces se ha llamado.

Si se pasa la etiqueta del argumento opcional, la función registrará el número de llamadas con la misma etiqueta .

Si la función se llama sin parámetros, registrará el número de llamadas en la misma línea .

console.assert ()

Es conveniente usarlo cuando desea mostrar información por condición. Solo se imprimirán los mensajes donde el primer argumento de afirmar () sea falso.

console.trace ()

Este método lo ayudará a comprender cómo el código llegó a cierto punto.

console.time ()

La forma más fácil de medir el tiempo de ejecución de un fragmento de código.

console.memory

¿Quieres saber finalmente a dónde se fue toda la RAM libre?

console.clear ()

Use para comenzar con una pizarra limpia. Completamente borra la consola de mensajes anteriores.

// time and time end console.time("This"); let total = 0; for (let j = 0; j < 10000; j++) { total += j } console.log("Result", total); console.timeEnd("This"); // Memory console.memory // Assertion const errorMsg = 'Hey! The number is not even'; for (let number = 2; number <= 5; number += 1) { console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg}); } // Count for (let i = 0; i < 11; i++) { console.count(); } // group & groupEnd console.group(); console.log('Test message'); console.group(); console.log('Another message'); console.log('Something else'); console.groupEnd(); console.groupEnd(); // Table const items = [ { name: "chair", inventory: 5, unitPrice: 45.99 }, { name: "table", inventory: 10, unitPrice: 123.75 }, { name: "sofa", inventory: 2, unitPrice: 399.50 } ]; console.table(items) // Clear console.clear() // HTML Element let element = document.getElementsByTagName("BODY")[0]; console.log(element) // Dir const userInfo = {"name":"John Miller", "id":2522, "theme":"dark"} console.dir(userInfo); // Color console.log('%cColor of the text is green plus small font size', 'color: green; font-size: x-small'); // pass object, variable const userDetails = {"name":"John Miller", "id":2522, "theme":"dark"} console.log("Hey %s, here is your details %o in form of object", "John", userDetails); // Default console.log('console.log'); console.info('console.info'); console.debug('console.debug'); console.warn('console.warn'); console.error('console.error');