Консоль розробника часто використовується для налагодження, але це набагато більше, ніж просто місце для console.log. З кількома простими трюками ви можете зробити налагодження швидшим, більш візуальним і навіть трохи цікавим. Давайте розглянемо кілька потужних і менш відомих можливостей JavaScript-консолі, які допоможуть вам відчути себе справжнім майстром налагодження!
1. Стилізуйте ваші логи за допомогою %c
Специфікатор %c дозволяє застосовувати CSS-стилі до ваших логів у консолі.
console.log('%cStyled Log', 'color: green; font-size: 16px; font-weight: bold;');
Це виведе «Styled Log» жирним зеленим текстом. Ви можете налаштувати рядок стилю для використання будь-якого дійсного CSS.
Використання: Виділяйте важливі логи або групуйте схожі повідомлення для кращої читаності.
2. Візуалізуйте дані за допомогою console.table()
Цей метод відображає масиви або об’єкти у вигляді таблиці.
const developers = [
{ name: 'Alice', language: 'JavaScript' },
{ name: 'Bob', language: 'Python' },
];
console.table(developers);
Використання: Налагодження структурованих даних значно простіше, коли вони відображаються як таблиця!
3. Групуйте логи разом
Організовуйте пов’язані логи за допомогою console.group() та console.groupEnd().
console.group('User Details');
console.log('Name: John Doe');
console.log('Age: 30');
console.log('Role: Developer');
console.groupEnd();
Додайте console.groupCollapsed(), щоб група була згорнута за замовчуванням.
Використання: Ідеально підходить для групування логів, що стосуються конкретних компонентів або функцій.
4. Вимірюйте час виконання за допомогою console.time()
Оцініть час виконання вашого коду за допомогою console.time() та console.timeEnd().
console.time('Loop Time');
for (let i = 0; i < 100000; i++) {}
console.timeEnd('Loop Time');
Використання: Визначте вузькі місця в продуктивності вашого коду.
5. Тригери точок зупину за допомогою debugger
Вставте інструкцію debugger у ваш код, щоб зупинити виконання на цій лінії, коли DevTools відкриті.
function processData(data) {
debugger; // Виконання зупиниться тут
console.log(data);
}
processData({ key: 'value' });
Використання: Крокуйте через код вручну та перевіряйте змінні під час виконання.
6. Лічильник за допомогою console.count()
Відслідковуйте, скільки разів виконується певна частина коду.
function fetchData() {
console.count('Fetch called');
}
fetchData();
fetchData();
Використання: Налагоджуйте повторювані виклики функцій у циклах або асинхронних операціях.
7. Очищення консолі
Використовуйте console.clear(), щоб очистити консоль одним натисканням.
console.log('This will be cleared.');
console.clear();
Використання: Це допомагає підтримувати консоль в організованому вигляді під час тестування.
8. Перевірка умов за допомогою console.assert()
Логуйте повідомлення лише в разі, якщо умова є хибною.
console.assert(2 + 2 === 5, 'Math is broken!'); // Логується повідомлення
console.assert(2 + 2 === 4, 'All good.'); // Нічого не відбувається
Використання: Спрощуйте налагодження, фокусуючись лише на неправильних припущеннях.
9. Відслідковуйте виконання за допомогою console.trace()
Друкуйте трасу стеку, щоб побачити, звідки була викликана функція.
function first() {
second();
}
function second() {
console.trace('Trace');
}
first();
Використання: Точно визначте місце виклику непередбачених функцій.
10. Зберігайте логи як файли
Клацніть правою кнопкою миші на консолі, виберіть Save as і завантажте всі виведення консолі як файл журналу.
Використання: Поділіться логами з членами команди або аналізуйте їх пізніше, не втрачаючи жодної інформації.
Чому варто досліджувати консоль
JavaScript-консоль — це не лише інструмент для налагодження, а й майданчик для експериментів та навчання. З такими можливостями, як стилізація, групування та відслідковування продуктивності, вона може значно покращити ваш робочий процес.
Оволодіння цими трюками не лише зробить вас більш ефективними, але й допоможе впевнено налагоджувати код.
Який ваш улюблений трюк з консолі? Поділіться ним у коментарях, давайте обговоримо!
Також ознайомтесь з іншими моїми статтями.
[
Відкрийте для себе 10 прихованих перлин JavaScript для розробників
Розкрийте потенціал JavaScript за допомогою цих маловідомих можливостей, що покращують ваш досвід програмування.
medium.com
](/thefreshwrites/discover-10-hidden-gems-of-javascript-for-developers-2d1300e989e4?source=post_page-----149fe4222af4--------------------------------)
[
Поширені помилки JavaScript і як їх виправити
Привіт 👋 розробники! Після сонного вікенду настав понеділок. Так ліньки йти на роботу 🤭🥱 (не звертайте увагу, мені подобається висловлюватися…
medium.com
](/@rohit02nair/common-javascript-errors-and-how-to-fix-them-29a072b1e3e8?source=post_page-----149fe4222af4--------------------------------)
Перекладено з: JavaScript Console Tricks You Might Not Know