Парочка цікавих консольних команд (замітка)

У цій невеликій замітці я хочу поділитися з Вами інформацією про деякі консольні команди, які можна використовувати сумісно з console.log().

Повний список консольних команд можна подивитися тут.

Від слів — до справи. Так, для роботи буде використовуватися Chrome.

Console.debug() і console.info()

Console.debug() і console.info() служать для виводу інформаційних повідомлень в консоль і, по суті, є аналогами console.log(). Одна з особливостей console.debug() полягає в тому, що виведене цією командою повідомлення показується, лише якщо консоль налаштована на показ повідомлень рівня налагодження (для Chrome — галочка у Verbose вкладки Levels).

Створимо кілька об'єктів:

const harry = {
    name: 'Harry',
    age: 28,
    married: false,
    job: 'developer',
    salary: 300,
},
alice = {
    name: 'Alice',
    age: 23,
    married: false,
    job: 'manager',
    salary: 100,
},
    bob = {
    name: 'Bob',
    age: 32,
    married: true,
    job: 'tester',
    salary: 200
}

Виведемо їх в консоль з допомогою console.log(harry, alice, bob):
Тепер з допомогою console.debug(), забезпечивши додатковою інформацією ("\n" — символ переходу на новий рядок, пробіл в початку — для вирівнювання):

console.debug(
'The first employee is', harry.name,
'\n The second employee is', alice.name,
'\n The third employee is', bob.name
)

Отримуємо наступне:

Нарешті, з допомогою console.info(), використовуючи знаки символи ("%s" — рядок, "%d" — число, "%c" — директива для застосування стилів):

console.info(' This is %c%s%c. \n He\'s %d years old. \n He\'s %s. \n He works as %s. \n His salary is %d.', 'font-size: 1.2 em; font-weight: 600; color: deepskyblue; text-decoration: underline;', harry.name, ", harry.age, harry.married ? 'married' : 'not married', harry.job, harry.salary)

Результат (зверніть увагу на «Harry», який ми обернули в %c):

Console.count()

Console.count() виводить кількість викликів методу з певною міткою (передається в параметрі методу). Для обнулення лічильника з заданим значенням використовується console.countReset().
Трохи видозмінений приклад з MDN:

let user = "
 function greet() {
console.count(user)
return 'hi' + user
}

user = 'bob'
greet()
user = 'alice'
greet()
greet()
console.count('alice')

Бачимо наступне:
Особисто мені використовувати цю команду не доводилося, але можливість здалася цікавою.

Console.group()

Console.group() використовується для групування повідомлень (зі зсувом вправо на один рівень). Групам можна присвоювати імена. Для закриття групи використовується console.groupEnd(). Console.groupCollapsed() робить те саме що і console.group(), але вивід відбувається в згорнуту групу (працюємо зі створеними ранніше об'єктами):

console.groupCollapsed('harry')
console.log(harry.name)
console.log(harry.age)
console.log(harry.married)
console.log(harry.job)
console.log(harry.salary)
console.groupEnd()
console.groupCollapsed('alice')
console.log(alice.name)
console.log(alice.age)
console.log(alice.married)
console.log(alice.job)
console.log(alice.salary)
console.groupEnd()
console.groupCollapsed('bob')
console.log(bob.name)
console.log(bob.age)
console.log(bob.married)
console.log(bob.job)
console.log(bob.salary)
console.groupEnd()

Отримуємо:

Console.table()

Console.table() показує дані у вигляді таблиці.
Створимо масив об'єктів:

let staff = [{
    name: 'Harry',
    age: 29,
    married: false,
    job: 'developer',
    salary: 'many',
},
{
    name: 'Alice',
    age: 23,
    married: false,
    job: 'manager',
    salary: 'few'
},
{
    name: 'Bob',
    age: 32,
    married: true,
    job: 'tester',
    salary: 'medium'
}
]

Виведемо його за допомогою console.log(stuff):
Не дуже наочно, погодьтеся.
Тепер за допомогою console.table(stuff):

Зовсім інша справа.

Console.time()

Console.time() запускає таймер з ім'ям переданого параметра. Таймер зупиняється з допомогою console.timeEnd(). Для фіксації проміжних значень використовується console.timeLog():

console.time('time')
// факторіал натурального числа
function fact(n) {
    return n ? n * fact(n - 1) : 1
}
console.log(fact(12))
console.timeLog('time')
// послідовність чисел Фібоначчі
function fib(n) {
        return n <= 1 ? n : fib(n - 1) + fib(n - 2)
}
console.log((fib(34))) 
console.timeEnd('time')

результат:

Console.trace()

Console.trace() виводить трасування стека. Може використовуватися для визначення послідовності викликів функцій.

Дещо видозмінений приклад з MDN:

foo()

function foo() {
    bar()
}

function bar() {
    baz()
}

function baz() {
    console.trace('stack traces:')
}

Результат:

Сам жодного разу не використовував, але взяв на замітку.

Дякую за увагу.