Написать пост

10 консольных команд для упрощения отладки JavaScript-кода

Аватар Corewood

Редкому разработчику нравится заниматься отладкой. Подборка из десяти функций консоли JavaScript, которые призваны помочь разработчику в этом нелёгком деле.

Обложка поста 10 консольных команд для упрощения отладки JavaScript-кода

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

Группировка логов

Как понятно из имени метода, он позволит сгруппировать несколько логов в одно раскрывающееся дерево. Можно даже организовывать вложенные деревья для последующей группировки.

У этого приёма есть три метода: console.group('name') отмечает начало группировки, console.groupEnd('name') отмечает окончание, а console.groupCollapsed() создаёт группу в виде скрытого дерева.

10 консольных команд для упрощения отладки JavaScript-кода 1

Трассировка стека

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

			function foo() {
  function bar() {
    console.trace();
  }
  bar();
}
foo();
		
10 консольных команд для упрощения отладки JavaScript-кода 2

Счётчик вызовов

Функция console.count() возвращает количество раз, когда её вызывали. Учтите, что если вы измените строку лога, отдаваемую функции, счётчик обнулится и начнёт отсчёт для новой строки. Также есть функция сброса счётчика console.countReset().

10 консольных команд для упрощения отладки JavaScript-кода 3

Таймер в консоли

Команды console.time() и console.timeEnd() позволяют соответственно начать и остановить отсчёт времени. В основном это нужно для проверки производительности. Также можно передать функциям строку для создания специфического таймера.

10 консольных команд для упрощения отладки JavaScript-кода 4

Работа с логическими выражениями

Допустим, вам нужно проверить, приняло ли какое-то выражение значение false и записать это в лог. В обычной ситуации можно использовать условный оператор if, но в нашем случае куда лучше подойдёт функция console.assert(). Функция принимает в качестве аргумента выражение, а также сообщение либо объект.

			function greaterThan(a, b) {
  console.assert(a > b, {"message": "a is not greater than b", "a": a, "b": b});
}
greaterThan(2, 1);
		
10 консольных команд для упрощения отладки JavaScript-кода 5

Профилирование

Как часто вам приходило в голову, что стоило приступить к профилированию сразу, вместо оттягивания до последнего и ручного поиска той функции, с которой и стоило начать? console.profile() призвана помочь с этим. После завершения профилирования просто вызовите эту функцию.

			function thisNeedsToBeProfiled() {
  console.profile("thisNeedsToBeProfiled()");
  // позже, после выполнения нужных действий
  console.profileEnd();
}
		

Метка времени

Функция console.timeStamp() добавляет событие в таймлайн во время записи. Можно использовать, например, по окончании процесса обработки данных или для того, чтобы поймать момент возвращения вызова API. В качестве аргумента функция принимает название какого-либо события.

Очистка консоли

Простейшая функция console.clear() очищает консоль.

Чтение размера буфера

Свойство console.memory позволяет отображать размер буфера. Полезно, когда статистика производительности не совсем прозрачна и нет времени рассматривать графики.

10 консольных команд для упрощения отладки JavaScript-кода 6

Пользовательская таблица

Функция console.table(), принимающая в качестве аргумента массив, выводит небольшую удобную таблицу, с которой можно взаимодействовать. Для вызова нужно передать ей массив объектов.

10 консольных команд для упрощения отладки JavaScript-кода 7

Заключение

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

Следите за новыми постами
Следите за новыми постами по любимым темам
15К открытий15К показов