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

Alex Alex 19 січня
Парочка цікавих консольних команд (замітка)
У цій невеликій замітці я хочу поділитися з Вами інформацією про деякі консольні команди, які можна використовувати сумісно з 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:')
}

Результат:

Парочка цікавих консольних команд (замітка)Сам жодного разу не використовував, але взяв на замітку.

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

Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Війти / Зареєструватися