El objeto console en Chrome DevTools proporciona métodos esenciales para depuración y registro en aplicaciones web. A continuación, se exploran sus funciones clave con ejemplos prácticos.

Limpiar la consola: console.clear()

Este método borra todo el historial de la consola, facilitando una vista limpia durante la depuración.

Métodos de registro comunes

Los métodos básicos para registrar mensajes incluyen console.log(), console.info(), console.error() y console.warn(). Estos se usan para diferentes niveles de severidad en los registros.

console.log('Mensaje estándar')
console.info('Notificación informativa')
console.error('Registro de fallo')
console.warn('Alerta preventiva')

Uso de marcadores de posición

Los marcadores de posición permiten dar formato a las salidas. Se pueden pasar múltiples argumentos separados por comas o usar placeholders específicos.

// Múltiples argumentos sin formateo específico
console.log(42, 'texto', +true)
// Marcadores de posición
// %s para cadenas
console.log('Resultado: %s', 'éxito')
// %c para estilos CSS
console.log('Estado: %c correcto', 'color: green; font-weight: bold')

Otros marcadores disponibles son:

Medición de tiempo: console.time() y console.timeEnd()

Estos métodos miden la duración de una operación, proporcionando una etiqueta única para identificar el intervalo.

console.time('temporizador')
const data = Array.from({ length: 800000 }, (_, idx) => ({ valor: idx }))
data.forEach(item => item.incrementado = item.valor * 2)
console.timeEnd('temporizador')
// temporizador: 32.45ms (aproximado)

Conteo de ejecuciones: console.count()

Para rastrear cuántas veces se ejecuta un código, útil en bucles o funciones recurrentes. Se pueden agrupar conteos con etiquetas.

function processData(identifier = '') {
  identifier ? console.count(identifier) : console.count()
  return `Procesado: ${identifier}`
}

processData('Alpha') // Alpha: 1
processData('Beta')  // Beta: 1
processData()        // default: 1
processData()        // default: 2
processData('Alpha') // Alpha: 2

Rastreo de pila de llamadas: console.trace()

Genera un seguimiento de la pila de ejecución, mostrando la secuencia de funciones que llevaron al punto actual.

function iniciar() {
  console.trace()
}
function ejecutar() {
  iniciar()
}
ejecutar()

Visualización de datos tabulares: console.table()

Convierte matrices o objetos en tablas interactivas para una lectura más clara.

const productos = [
  { nombre: 'Manzana', cantidad: 15 },
  { nombre: 'Plátano', cantidad: 8 },
  { nombre: 'Naranja', cantidad: 22 },
]
console.table(productos)

Inspección detallada de objetos: console.dir()

Representa objetos JavaScript de manera estructurada, ideal para explorar propiedades complejas.

const configuracion = {
  tema: 'oscuro',
  idioma: 'es',
  ajustes: function() { alert('Configuración aplicada') },
}
console.log(configuracion)
console.dir(configuracion)

La diferencia es notable al inspeccionar nodos del DOM, donde console.dir() muestra el objeto HTML completo.

Afirmaciones condicionales: console.assert()

Evalúa una condición y muestra un error si es falsa, sin detener la ejecución del script. Útil para validaciones en desarrollo.

const valor = 0
console.assert(valor > 0, 'El valor debe ser positivo')
console.assert(valor === 0, 'El valor es cero')
console.log('La ejecución continúa')

Agrupación de mensajes: console.group() y console.groupEnd()

Organiza los registros en grupos colapsables, mejorando la legibilidad en la consola.

console.group('Grupo Alpha')
console.log('Entrada Alpha-1')
console.log('Entrada Alpha-2')
console.groupEnd()
console.group('Grupo Beta')
console.log('Entrada Beta-1')
console.log('Entrada Beta-2')
console.groupEnd()