Отладка по-новому: 7 альтернатив старому доброму console.log()

Для отладки кода на JavaScript одним из самых основных и распространенных методов считается использование инструмента console.log(). Но не все знают, что у него есть ряд не менее удобных, действенных и новых альтернатив. Некоторыми из них в своем блоге поделился разработчик Сиддхарт Шинибен. 

console.table()

Может использоваться для регистрации любого объекта или массива в виде таблицы. 

console.table([
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
  {
    "userId": 1,
    "id": 2,
    "title": "quis ut nam facilis et officia qui",
    "completed": false
  },
  {
    "userId": 1,
    "id": 3,
    "title": "fugiat veniam minus",
    "completed": false
  },
  {
    "userId": 1,
    "id": 4,
    "title": "et porro tempora",
    "completed": true
  },
  {
    "userId": 1,
    "id": 5,
    "title": "laboriosam mollitia et enim quasi adipisci quia provident illum",
    "completed": false
  },
  {
    "userId": 1,
    "id": 6,
    "title": "qui ullam ratione quibusdam voluptatem quia omnis",
    "completed": false
  },
]);

Вот что получится: 

Результат

console.assert()

Используется для проверки данных на истинность. Если они ложные, в консоли появится соответствующее сообщение. 

const isEven = n => n % 2 === 0;

for (let i = 0; i < 3; i++) {
    console.assert(isEven(i), '%s is not even!', i);
}

При выполнении кода выше получится ошибка Assertion failed: 1 is not even!, потому что число 1 нечетное. 

console.count()

Используется для проверки того, сколько раз была вызвана функция count(). 

for (let i = 0; i < 3; i++) {
    console.count();
}

Вот что получится: 

default: 1
default: 2
default: 3

console.group() и console.groupEnd()

Используются для группировки похожих или разных логов вместе. 

console.group('group 1');
for (let i = 0; i < 3; i++) {
    console.log(i);
}
console.groupEnd('group 1');

console.group('group 2');
for (let i = 0; i < 3; i++) {
    console.log(i);
}
console.groupEnd('group 2');

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

Внутри группы можно использовать любые другие методы консоли, даже вложенные console.group(). 

Чтобы сделать группы закрытыми по умолчанию, используйте console.groupCollapsed(). 

Измерение параметров 

Для измерения параметров используются: console.time(), console.timeStart(), console.timeEnd() и console.timeLog(). 

console.time();

for (let i = 0; i < 1e9; i++) {
  // Intense stuff
}

console.timeEnd()

Вот что получится: 

default: 9531ms - timer ended

9531ms — это время между console.time() и console.timeEnd(). 

Также можно пометить эти таймеры, чтобы было несколько независимых таймеров, работающих одновременно: 

console.time('first');

for (let i = 0; i < 1e9; i++) {
  // Intense stuff
}

console.timeLog('first'); // Logging how much time has passed

console.time('second');

for (let i = 0; i < 1e9; i++) {
  // Intense stuff
}

console.timeEnd('first');
console.timeEnd('second');

Вот что будет в журнале: 

first: 8497ms
first: 17815ms - timer ended
second: 9318ms - timer ended

console.trace()

Команда выводит в консоль результаты трассировки стека и позволяет понять, что произошло в определенном месте программы во время ее выполнения. 

const shallow = () => deep();
const deep = () => deeper();
const deeper = () => deepest();
const deepest = () => console.trace()

shallow()

Вот что будет в журнале: 

console.trace()
    deepest     debugger eval code:4
    deeper      debugger eval code:3
    deep        debugger eval code:2
    shallow     debugger eval code:1
    <anonymous> debugger eval code:1