Парочка интересных методов объекта Console (заметка)

в 10:24, , рубрики: console, console.log, javascript, консоль, Программирование, Разработка веб-сайтов

Парочка интересных методов объекта Console (заметка) - 1

Доброго времени суток, друзья!

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

Полный список методов можно посмотреть здесь.

От слов — к делу. Да, для работы будет использоваться Chrome.

Console.debug() и сonsole.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 (заметка) - 2

Теперь с помощью 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 (заметка) - 3

Наконец, с помощью console.info(), используя подстановочные символы ("%s" — строка, "%d" — число, "%с" — директива для применения стилей):

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.2em; font-weight: 600; color: deepskyblue; text-decoration: underline;', harry.name, '', harry.age, harry.married ? 'married' : 'not married', harry.job, harry.salary)

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

Парочка интересных методов объекта Console (заметка) - 4

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 (заметка) - 5

Лично мне использовать этот метод не доводилось, но возможность показалась интересной.

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 (заметка) - 6

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 (заметка) - 7

Не очень наглядно, согласитесь.

Теперь с помощью console.table(stuff):

Парочка интересных методов объекта Console (заметка) - 8

Совсем другое дело.

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 (заметка) - 9

Console.trace()

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

Несколько видоизмененный пример с MDN:

foo()

function foo() {
    // код
    bar()
}

function bar() {
    // много кода
    baz()
}

function baz() {
    // очень много кода
    console.trace('stack traces:')
}

Результат:

Парочка интересных методов объекта Console (заметка) - 10

Сам ни разу не использовал, но взял на заметку.

На этом у меня все. Благодарю за внимание. Хорошего дня!

Автор: Harry Heman

Источник


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js