[Перевод] 20+ консольных команд, которые изменят ваше представление об отладке21.05.2022 10:31

484094acc945935fbc7ababb26d124a4.jpg

Вам, вероятно, уже известен метод console.log и несколько других, но на деле их существует более 20 видов. Каждый из них по-своему полезен, и используя их по назначению, вы заметно повысите качество отладки.

Основные методы консоли

Начнем с 5 основных методов:

  1. log

  2. debug

  3. info

  4. warn

  5. error

Все вышеперечисленные методы работают одинаково, выводя указанную информацию в консоль. Разница между ними лишь в том, как она в ней отображаются. Для сравнения, давайте посмотрим отдельно на каждый метод.

0a37f01a7b4fbb6f5f3fe6cd37fa394e.PNG

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

637f82b56bd4bf15c76b2d076d42ab57.PNG

Возможность выбирать уровни является одной из причин, почему эти методы могут быть так полезны. Если вам потребуется отобразить в консоли только ошибки, выбрав соответствующий уровень, вы существенно ускорите отладку.

Примеры использования

Простейший способ использования этих методов — передать в них строку или другое значение. Они выведут это значение в консоль. Вы можете пойти дальше и передать несколько значений в качестве аргументов

console.log("Hello", "World", { name: "Leslie" })
// Hello World {name: 'Leslie'}

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

Отображение в реальном времени

Браузер, помогая нам в отладке, всегда отображает актуальные значения в объекте

const person = { name: "Leslie" }
console.log(person)
person.name = "Sally"

В консоли браузера, актуальное значение ключа name объекта person будет вычислено в тот момент, когда мы раскроем сам объект

2968e5091b2297892a100de2ba0d9679.PNG

Иногда это действительно бывает полезно, но чаще всего мы хотим знать, каким было значение в момент вывода его в консоль. Простой способ добиться нужного результата это клонирование объекта

const person = { name: "Leslie" }
console.log({ ...person })
person.name = "Sally"

fd5b042ff9dc5165fd52585b783fd705.PNG

Здесь есть неприятность: код, описанный выше, не работает с объектами, которые имеют какую-либо вложенность. В такой ситуации вам потребуется либо написать собственный метод для глубокого клонирования, либо воспользоваться имеющимся: 

const person = { name: "Leslie" }
console.log(JSON.parse(JSON.stringify(person)))
person.name = "Sally"

Улучшенный вывод данных

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

Dir

Метод dir подозрительно схож с одним из тех, которые мы разобрали ранее — методом log, с одной лишь оговоркой: log выводит HTML-элементы в формате HTML, в то время как dir отображает список их свойств

console.log(document.body)console.log (document.body)console.dir(document.body)console.dir (document.body)

Table

Метод table используется для отображения объектов в массиве в виде таблицы, визуально упрощая их восприятие

1f16671b5a49c3cbca80a8d36561ec42.PNG

Группирование

Вывод данных в консоль также изменяют следующие 3 взаимосвязанных между собой метода:

group groupCollapsed groupEnd

Названия этих методов говорят сами за себя. Оба group и groupCollapsed создают группу, но groupCollapsed создает ее уже закрытой. Сообщения, выводимые в консоль будут частью группы до тех пор, пока она не будет закончена методом groupEnd.

console.log("Вне группы")

console.group()
console.log("Внутри первой группы")
console.log("Все еще первая группа")
console.groupEnd()

console.group("Название второй группы")
console.log("Внутри второй группы")

console.groupCollapsed()
console.log("Внутри вложенной группы")
console.groupEnd()

console.log("Все еще вторая группа")
console.groupEnd()

eb7ce744de06d070782bfe9b6e57cd82.PNG

В этом примере мы создали 3 разных группы. В первую группу не передавался аргумент, поэтому она имеет стандартный заголовок »‎console.group»‎. Во вторую мы передали в качестве аргумента строку «Название второй группы», вложив в нее еще одну группу, используя метод groupCollapsed. Как вы уже могли догадаться, в группе в виде вложенности может находиться еще несколько. Заметьте, группа созданная с использованием groupCollapsed не раскрыта.

Методы группирования будут полезны, если вам нужно вывести в консоль большое количество относящейся друг к другу информации, и вы не хотите заполнять ею всю консоль.

Отладка производительности

Таймер

Следующие несколько методов просто понять, поскольку их задача заключается в том, чтобы вычислить время между запуском и окончанием какой-либо операции. В нашем случае это вызов функции

console.time()
slowFunction()
console.timeEnd()
// default: 887.69189453125 ms

console.time("Label")
slowFunction()
console.timeEnd("Label")
// Label: 863.14306640625 ms

Так же, как и в группу, в таймер можно передать аргументом заголовок. Для того, чтобы связать запуск и окончание одного и того же таймера, тот же заголовок нужно передать и в завершающий метод timeEnd.

Вдобавок к этим двум методам имеется еще один — timeLog. Используя timeLog, можно вывести текущее время с начала таймера, не останавливая его.

console.time("Label")
slowFunctionOne()
console.timeLog("Label")
slowFunctionTwo()
console.timeEnd("Label")
// Label: 920.578125 ms
// Label: 1855.43896484375 ms

Не забудьте передать в него соответствующий заголовок, как в примере выше.

Профайлер

Теперь рассмотрим то, как поднять отладку производительности на следующий уровень, используя профайлер. 

console.profile()
slowFunction()
console.profileEnd()

console.profile("Label")
slowFunction()
console.profileEnd("Label")

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

Примечание: в зависимости от браузера, профайлер может различаться внешне и находиться в разных местах. Также, профайлер на текущий момент не является стандартизированным. Это означает, что некоторые браузеры его не поддерживают, а в тех, где он есть, способен работать некорректно. По этой причине я не рекомендую его использование.

Разное

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

assert

Мой фаворит в этой категории — метод assert. Assert, в отличие от основных методов, первым параметром принимает boolean значение. Если это значение находится в состоянии true, вывод информации в консоль будет отменен, и наоборот

const n = 2
console.assert(n === 1, "Переменная n не равна одному")

3ea43c023d4c745a636ef000e258c363.PNG

Ту же логику работы демонстрирует код ниже

const n = 2
if (n !== 1) console.error("Переменная n не равна одному")

clear

Проще метода не найти. Все что он делает — очищает консоль

console.clear()

count и countReset

count отображает количество вызовов данной функции. Нетрудно догадаться, что countReset очищает текущий счет, начиная его заново

console.count()
console.count()
console.countReset()
console.count()
// default: 1
// default: 2
// default: 1

console.count("Label")
console.count("Label")
console.countReset("Label")
console.count("Label")
// Label: 1
// Label: 2
// Label: 1

trace

Последний метод, который мы рассмотрим, называется trace. Простой метод, отображающий информацию о том, какая из функций вызвала другую функцию. Может быть также полезен, когда нужно проследить за вызовами функций внутри других функций

function firstFn() {
  function secondFn() {
    console.trace();
  }
  secondFn();
}

firstFn();

afe52d9b0bf029005d76440539b1109a.PNG

Заключение

Могли ли вы представить, что существует столько методов веб-консоли? Меня и самого удивило их количество и разнообразие.

Надеюсь, хотя бы один из этих методов поможет вам улучшить качество отладки.

© Habrahabr.ru