JavaScript

Выход за пределы console.log() — 8 console методов, которые следует использовать при отладке JavaScript и Node

Spread the love

The Console API

Перевод статьи Marco Antonio GhianiMoving beyond console.log() — 8 Console Methods You Should Use When Debugging JavaScript and Node

Каждый разработчик JavaScript использовал console.log(‘text’). Модуль console является одной из самых распространенных утилит в JavaScript, и его API так же реализовано в Node:

предоставляет простую консоль отладки, которая похожа на механизм консоли JavaScript, предоставляемый веб-браузерами.

Это определение написано на странице документации Node.js для модуля Console 😅. Как мы все знаем, новички чаще консультируются с онлайн-учебниками вместо того, чтобы читать документацию, при изучение новых технологий, и тем самым упускают шанс научиться правильно использовать новые инструменты до 100% его потенциала.

Говоря о Console API, программисты обычно используют только некоторые функции, такие как 👌console.log(), ⚠️ console.warn() или ❌ console.error(), для отладки своего приложения, хотя есть много других методов, которые могут отлично реализовать наши требования и повысить эффективность отладки.

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

1) console.assert

Функция console.assert используется для проверки, является ли переданный аргумент истинным или ложным значением. В случае, если переданное значение равно false, функция отображает дополнительные аргументы, переданные после первого, в противном случае выполнение кода продолжается без какого-либо вывода.

// Истинное значение, ничего не будет возвращено
console.assert(1, 'Doh, is a falsy value');
console.assert(true, 'Doh, is a falsy value');
console.assert('hello world', 'Doh, is a falsy value');

// Неверное значение, будет возвращено Assertion failed
console.assert(0, 'Doh, is a falsy value');
console.assert(false, 'Doh, is a falsy value');
console.assert('', 'Doh, is a falsy value');

Метод assert особенно полезен, когда вы хотите проверить наличие значений, сохраняя консоль в чистоте (избегайте регистрации длинного списка свойств и т. д.).

2-3) console.count и console.countReset 💯

Эти два метода используются для установки и очистки счетчика того, сколько раз определенная строка регистрируется в консоли:

console.count('Hello)
// Hello: 1
console.count('Hello)
// Hello: 2
console.count('Hello)
// Hello: 3

console.countReset('Hello')
// Сброс счетчика

4-5) console.group и console.groupEnd 🎳

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

console.group('Group 1')
console.log('Message 1')
console.log('Message 2')
console.groupEnd()
console.group('Group 2')
console.log('Message 1')
console.log('Message 2')
console.groupEnd()

Group 1
  Message 1
  Message 2
Group 2
  Message 1
  Message 2

6) console.table 📋

Этот метод невероятно полезен для описания объекта или содержимого массива в удобной для человека таблице:

const users = [
 { 
  name: 'Marco',
  age: 26
 }, {
  name: 'Leo',
  age: 32
 }
]

console.table(users);

console.table облегчает проверку и регистрацию вложенных и сложных массивов / объектов.

7-8) console.time и console.timeEnd

В случае, если вы хотите проверить производительность вашего кода во время выполнения и решить ее, вы создаете начальную временную метку с API даты и используете ее для вычисления разницы после выполнения вашего кода? Обычно это выглядит как то так:

const start = Date.now();

// какой то код

const diff = Date.now() - start;
console.log("Time execution: " + diff + " ms");

Используя функции time и timeEnd, нет необходимости делать этот трюк. Вы можете создать свой отчет о времени, просто выполнив:

// Старый способ
const start = Date.now();
for (let i = 0; i < 10000000; i++) {
  1 + 1;
}
const diff = Date.now() - start;
console.log("Time execution width Date.now: " + diff + " ms");


// новый способ
console.time('Time execution with console.time');
for (let i = 0; i < 10000000; i++) {
  1 + 1;
}
console.timeEnd('Time execution with console.time');

//Time execution width Date.now: 6 ms
//Time execution with console.time: 6.73291015625ms

Заключение

Потратив всего 3 минуты, теперь у вас есть расширенный набор замечательных инструментов, доступных в Console API. Интегрируйте их со своими привычками отладки, и ваша скорость разработки возрастет в геометрической прогрессии!

Увидимся со следующей главой Learning Node.js!

Была ли вам полезна эта статья?
[3 / 3.7]

Spread the love
Editorial Team

Recent Posts

Vue 3.4 Новая механика v-model компонента

Краткий перевод: https://vuejs.org/guide/components/v-model.html Основное использование​ v-model используется для реализации двусторонней привязки в компоненте. Начиная с Vue…

12 месяцев ago

Анонс Vue 3.4

Сегодня мы рады объявить о выпуске Vue 3.4 «🏀 Slam Dunk»! Этот выпуск включает в…

12 месяцев ago

Как принудительно пере-отобразить (re-render) компонент Vue

Vue.js — это универсальный и адаптируемый фреймворк. Благодаря своей отличительной архитектуре и системе реактивности Vue…

2 года ago

Проблемы с установкой сертификата на nginix

Недавно, у меня истек сертификат и пришлось заказывать новый и затем устанавливать на хостинг с…

2 года ago

Введение в JavaScript Temporal API

Каким бы ни было ваше мнение о JavaScript, но всем известно, что работа с датами…

2 года ago

Когда и как выбирать между медиа запросами и контейнерными запросами

Все, кто следит за последними событиями в мире адаптивного дизайна, согласятся, что введение контейнерных запросов…

2 года ago