Эффективное использование методов объекта console для отладки JavaScript-кода

Не будем лукавить, все мы используем console.log(), но не все знают о других полезных методах объекта console для отладки JavaScript-кода. Рассмотрим несколько из них.

Содержание

console.log()
Переменная и строка в одном логе
Добавляем в лог CSS
консоль.assert(утверждение, obj)
console.count() и console.countReset()
консоль.ошибка()
console.group() и console.groupEnd()
консоль.таблица()
console.time(), console.TimeLog(), console.timeEnd()
console.warn()
Очистка консоли

console.log()

Начнем с самого распространенного метода console.log().

console.log(object/string);

Обычно мы используем его для вывода переменных и строк, но можно сделать это более эффективно.

Переменная и строка в одном логе

Можно комбинировать переменные и строки в одном логовом сообщении:

console.log(`${variableName} is good`);

Или так:

console.log("%s is good", variableName);

Для последнего варианта используйте %s для строк, %o для объектов, %d для чисел.

Добавляем в лог CSS

Для выделения нужной информации можно использовать стили CSS:

console.log("%c Hello world", 'color:red'); // вся строка красного цвета
console.log("%c Hello%c World", 'color:red', 'color:green'); // каждое слово своего цвета

консоль.assert(утверждение, obj)

Этот метод полезен, если нужно выводить лог только при определенных условиях. Лог будет выводиться, если условие ложно (false):

if (value !== 1000) {
console.log(value);
}
// можно заменить на
console.assert(value === 1000, {value: value, msg: "value is not 1000"});

console.count() и console.countReset()

Удобный способ узнать, сколько раз функция была вызвана и вернула разные значения:

setInterval(() => {
let r = Math.random();
console.count();
if (r < 0.5) {
console.countReset();
}
}, 3000);

консоль.ошибка()

Метод, о котором многие знают, но не все используют. Полезен для вывода ошибок:

console.error("Это ошибка!");

console.group() и console.groupEnd()

Эти методы полезны для создания структуры в логе:

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the outer level");

консоль.таблица()

Метод для вывода объектов или массивов в табличном формате:

let a = [{a: 'a'}, {a: 'a', b: 'b'}, {c: 'c'}, {d: 'd'}];
console.table(a);

console.time(), console.TimeLog(), console.timeEnd()

Методы для измерения времени выполнения кода:

console.time("a"); // запускаем таймер
// код для измерения времени
console.timeLog("a"); // текущее значение таймера
console.timeEnd("a"); // остановка таймера
// a: 3798.983154296875ms

console.warn()

Метод для вывода предупреждений:

console.warn("Это предупреждение. Обратите внимание!");

Очистка консоли

Для очистки консоли используйте:

console.clear();