Сложно представить себе разработку на JS без вывода информации в консоль. Говоря метафорически, console.log() — лекарство от большинства болезней кода.

Отладка — почти как расследование преступления, где главный преступник тоже вы — Филипе Фортес

Но помимо повсеместно используемой функции console.log(), есть ещё много инструментов, позволяющий сильно упростить процесс. Давайте разберём некоторые из них на простых примерах.

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

Самое простое — печать строки цветом, соответствующем типу события.

Используем плейсхолдеры

Для того, чтобы подставить данные в строку с сообщением, удобнее всего использовать плейсхолдеры.

%o — для объекта
%s — для строки
%d — для десятичного или целого числа

Добавляем CSS

Не хватает info/warn/error? Не беда! К консольным сообщениям можно применять CSS.

Хотите применить CSS только к части сообщения? Это делается вот так:

console.dir()

Часто гораздо удобнее напечатать JSON представление интересующего нас объекта.

Выводим HTML

HTML элементы в консоли можно исследовать так же, как в инспекторе.

console.table()

Хотите быстро посмотреть данные в списке из JSON?

console.group() и console.groupEnd()

Сообщения в консоли можно группировать для удобства.

console.count()

Эта функция записывает, сколько раз она была вызвана.

Если передан опциональный аргумент label, то функция будет записывать количество вызовов с той же label.

Если функция вызвана без параметров, то она запишет количество вызовов на той же строке.

console.assert()

Удобно использовать, когда вы хотите выводить информацию по условию. Будут напечатаны только те сообщения, где первый аргумент assert() ложен.

console.trace()

Этот метод поможет понять, каким путём код дошёл до определённой точки.

console.time()

Самый простой способ замерить время исполнения участка кода.

console.memory

Хотите наконец-то узнать, куда пропала вся свободная оперативная память? 

console.clear()

Используйте, чтобы начать работу с чистого листа. Полностью очищает консоль от предыдущих сообщений.

// 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');