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

Итак, начнем с привычного console.log().

console.log()

Обычно мы используем самый простой вариант: console.log(object/string). Однако, использование данного метода можно разнообразить.

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

Для этого можно можно сделать так

console.log(`${variable name} is good`)

или так

console.log(“%s is good”,variable name)

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

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

Иногда при отладке кода используются слишком много вариантов console.log(). Это приводит к путанице. Но и в таком случае можно кое-что сделать. Например, выделить нужную строку лога одним или несколькими цветами:

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

console.assert(assertion,obj)

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

В данном примере лог будет выводится, если утверждение будет неверным: false

//такую конструкцию можно уменьшить
if(value !== 1000){
console.log(value)
}
//до  такого варианта
console.assert(value===1000,{value:value,msg:"value is not 1000"})
//или такого
console.assert(value===1000,"value is not 1000")

console.count() и console.countReset()

Это простой способ узнать сколько раз функция была вызвана и вернула различные значения. Подробно о данном методе можно прочитать здесь. Это избавляет от необходимости создавать новую переменную и увеличивать ее значение при выполнении необходимых условий. Для подсчета можно просто использовать console.count(), а для сброса счетчика console.countReset().

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

console.error()

Многие из нас знают про эту функцию, но немногие используют.

console.group() и console.groupEnd()

Метод полезен, если необходимо создать определенную структуру для лога

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");

Получается такой лог:

console.table()

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

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.error() и позволяет разделить логи ошибок и предупреждений.

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

Очистим консоль

Для этого есть метод

console.clear();

Спасибо за внимание.