Освоить JS console.log как профессионал

Адаптированный перевод статьи Mastering JS console.log like a Pro

Вы всё еще используете только console.log() для отладки? Тогда мы идем к вам. Шутка. На самом деле у этого инструмента есть намного больше самых что ни на есть полезных возможностей. И в этой статье мы кратко рассмотрим самые основные.

Возможность вывода различных сообщений в консоли браузера определенно оказывает незаменимую помощь всем разработчикам. Сообщения console.log() подобны лекарству от большинства ваших детских и не очень болезней, так как способствуют устранению всевозможных проблем в вашем коде.

В настоящее время большинство разработчиков в ходе работы над кодом думает следующим образом. Хорошо бы вывести некоторое сообщение для того, чтобы узнать больше о возникшей проблеме. При этом в консоли мы можем выводить разнообразную полезную информацию, такую как сообщения в возникших исключительных ситуациях, текущее содержимое переменных и т.д.

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

Эти методы непосредственно выводят в консоль необработанную строку с информацией, с соответствующей стилизацией и цветом шрифта, в зависимости от типа события.

Используем плейсхолдеры (заполнители)

Существуют различные виды плейсхолдеров:

• %o – принимает объект;

• %s – принимает строку;

• %d – принимает число (десятичную дробь или целое).

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

Добавляем CSS к нашим сообщениям консоли

Все ваши сообщения в консоли выглядят одинаково? Ну, теперь это будет не так, теперь ваши логи будут выглядеть более выразительно для того, что бы выделить наиболее важную информацию.

Как нам выделить цветом определенное слово в сообщении лога? Вот, пожалуйста.

console.dir()

Выводит в консоли JSON-представление объекта, указанного в качестве аргумента.

HTML элементы в консоли

Получаем элементы HTML в консоли для инспектирования их свойств и содержимого.

console.table()

Хотите просматривать в ваших логах содержимое JSON или Javascript объектов в виде наиболее подходящим для его понимания? Вот к примеру, с моей точки зрения, наилучшая визуализация массива объектов!

console.group() & console.groupEnd()

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

console.count()

Эта функция регистрирует количество вызовов самой функции count() за все время текущего сеанса консоли. Она принимает необязательный именованный аргумент label. Если он указывается при вызове функции, то она регистрирует количество вызовов count() с указанной конкретной меткой label. Если аргумент label опущен, то функция регистрирует общее количество вызовов функции без указания метки count().

console.assert()

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

console.trace()

Этот метод позволяет вывести в консоль информацию о трассировке, которая содержит содержимое всего стека вызовов функций относительно заданного места листинга выполняющегося кода.

console.time()

Специальная функция для отслеживания времени, затрачиваемого на выполнение какого-либо действия. Таким образом функция time() — это самый лучший способ измерить время, затрачиваемое на выполнение нашего кода JavaScript, или его отдельных частей (функций и т.д).

console.memory()

Хотите знать, как ваши приложения JavaScript используют память браузера? Вот пример использования функции memory().

console.clear()

Это последняя, но не менее важная функция. Она используется для того, чтобы убрать из консоли все рассмотренные нами выше сообщения с помощью одной команды console.clear().

Примеры

// измеряем время выполнения нашего кода
console.time("This");
let total = 0;
for (let j = 0; j < 10000; j++) {
  total += j
}
console.log("Result", total);
console.timeEnd("This");

// исследуем память, используемую браузером 
console.memory()

// выводим логи по условию
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});
}

// считаем
for (let i = 0; i < 11; i++) {
  console.count();
}

// группируем наши сообщения в группы
console.group();
  console.log('Test message');
  console.group();
    console.log('Another message');
    console.log('Something else');
  console.groupEnd();
console.groupEnd();


// структурируем сообщения в виде таблицы
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)

// очищаем консоль
console.clear()

// получаем HTML элемент для обработки и инспектирования его свойств
let element = document.getElementsByTagName("BODY")[0];
console.log(element)

// просматриваем содержимое JSON в удобном, форматированном виде
const userInfo = {"name":"John Miller", "id":2522, "theme":"dark"}
console.dir(userInfo);

// раскрашиваем наши логи
console.log('%cColor of the text is green plus small font size', 'color: green; font-size: x-small');

// передаем значения объектов и переменных в сообщения
const userDetails = {"name":"John Miller", "id":2522, "theme":"dark"}
console.log("Hey %s, here is your details %o in form of object", "John", userDetails);

// типы сообщений в консоли 
console.log('console.log');
console.info('console.info');
console.debug('console.debug');
console.warn('console.warn');
console.error('console.error');