Вот 10 методов и трюков с консольными объектами, которые нужно знать!

Вы все еще используете console.log для всех ваших потребностей в отладке JavaScript в 2023 году?

Пришло время обновить свои навыки и открыть для себя всю мощь объекта консоли JavaScript.

От console.table до console.time эти передовые методы и хитрости помогут вам улучшить качество и читабельность результатов отладки и упростят поиск и устранение неполадок в коде.

Так почему бы в 2023 году не вступить в ряды отладчиков JavaScript-ниндзя и не изучить эти важные приемы? Ваш код скажет вам спасибо.

😞 Проблема

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

Имея это в виду, вот десять методов и приемов объекта консоли JavaScript, о которых вам следует знать (и попробуйте их; я знаю, что проще использовать console.log, но это может улучшите свой опыт отладки, сделайте это на будущее сами!).

1️⃣ console.table

Этот метод позволяет выводить табличные данные в удобочитаемом и понятном формате. Вместо того, чтобы просто вывести из системы массив или объект, console.table будет отображать данные в табличном формате, что упрощает просмотр и понимание.

// Output an array of objects as a table
const users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' }
];
console.table(users);

Это выведет массив users в табличном формате со свойствами каждого объекта в виде столбцов и объектов в виде строк.

2️⃣console.group

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

console.group('User Details');
console.log('Name: John Doe');
console.log('Age: 32');
console.groupEnd();

Это создаст вложенную сворачиваемую группу в консоли с заголовком «Сведения о пользователе». Сообщения журнала внутри группы будут расположены с отступом и сгруппированы вместе.

3️⃣консоль.время

console.time и console.timeEnd.Эти методы позволяют измерить количество времени, необходимое для выполнения блока кода. Это может быть полезно для выявления узких мест производительности в вашем коде и их оптимизации.

console.time('Fetching data');
fetch('https://reqres.in/api/users')
  .then(response => response.json())
  .then(data => {
    console.timeEnd('Fetching data');
    // Process the data
  });

Это позволит измерить время, необходимое для получения данных с указанного URL-адреса и анализа ответа JSON. Прошедшее время будет выведено в консоль.

4️⃣console.assert

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

function add(a, b) {
  return a + b;
}

// Test the add function
const result = add(2, 3);
console.assert(result === 5, 'Expected 2 + 3 = 5');

Это выведет сообщение об ошибке в консоль, если функция add не вернет ожидаемый результат 5 при вводе 2 и 3.

5️⃣Стили логов

Используйте объект console для вывода стилей и цветов. Объект console позволяет выводить текст в различных цветах и ​​стилях, делая отладочный вывод более читабельным и понятным.

Вы можете использовать заполнитель %c в своих операторах console.log, чтобы указать стиль CSS для выходного текста.

console.log('%cHello world!', 'color: red; font-weight: bold;');

Это выведет текст «Hello world!» красным и жирным шрифтом, используя указанный стиль CSS.

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



5 небольших и скрытых библиотек React, которые вы уже должны использовать
Если вы, как и я, любите находить маленькие жемчужины в каталоге NPM для улучшения вашего процесса разработки, сегодня вам повезло …javascript.plainenglish.io



6️⃣console.trace

Используйте метод console.trace для вывода трассировки стека. Это может быть полезно для понимания потока выполнения вашего кода и определения откуда приходит конкретное сообщение журнала.

function foo() {
  console.trace();
}

function bar() {
  foo();
}

bar();

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

7️⃣console.dir

Используйте метод console.dir для вывода свойств объекта в иерархическом формате. Это может быть полезно для изучения структуры объекта и просмотра всех его свойств и методов.

const obj = {
  id: 1,
  name: 'John Doe',
  address: {
    street: '123 Main St',
    city: 'New York',
    zip: 10001
  }
};
console.dir(obj);

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

8️⃣console.count

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

function foo(x) {
  console.count(x);
}

foo('hello');
foo('world');
foo('hello');

Это выведет строку «hello» в консоль, за которой следует число 1. Затем он выведет в консоль строку «world», за которой следует число 1. Наконец, он снова выведет строку «hello», за которой следует цифрой 2 (поскольку она вызывалась дважды).

9️⃣консоль.очистить

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

console.log('Hello world!');
console.clear();
console.log('This log message will appear after the console is cleared.');

Это выведет строку «Hello world!» в консоли, после чего следует пустая строка (поскольку консоль очищена). Затем он выведет строку «Это сообщение журнала появится после очистки консоли».

1️⃣0️⃣console.profile

Используйте методы console.profile и console.profileEnd для измерения производительности блока кода. Это может быть полезно для выявления узких мест в производительности и оптимизации кода для повышения скорости и эффективности.

console.profile('MyProfile');

// Run some code that you want to measure the performance of
for (let i = 0; i < 100000; i++) {
  // Do something
}

console.profileEnd('MyProfile');

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

💭 Некоторые заключительные мысли

В 2023 году не ограничивайтесь только console.log — в объекте консоли JavaScript доступно много более мощных и ценных инструментов и методов.

С console.table по console.time эти методы и хитрости помогут вам улучшить качество и удобочитаемость вывода отладки, а также упростят диагностику и исправление ошибок в вашем коде.

Так почему бы не улучшить свои навыки отладки в 2023 году и не попробовать эти техники? Ваш код (и ваше здравомыслие) скажут вам спасибо.

О, и…

🌎 Подключаемся!

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.