Як користуватися консоллю JavaScript: виходячи за рамки console.log ()

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

Давайте розпочнемо.

Найпростіший варіант використання - це реєстрація рядка або групи об’єктів JavaScript. Просто,

console.log('Is this working?');

А тепер уявіть сценарій, коли у вас є купа об’єктів, які потрібно увійти в консоль.

const foo = { id: 1, verified: true, color: 'green' };const bar = { id: 2, verified: false, color: 'red' };

Найінтуїтивніший спосіб реєструвати це - console.log(variable)один за одним. Проблема стає більш очевидною, коли ми бачимо, як вона відображається на консолі.

Як бачите, імен змінних не видно. Це стає надзвичайно прикро, коли у вас їх купу, і вам потрібно розгорнути маленьку стрілку ліворуч, щоб побачити, як саме називається змінна. Введіть обчислювані назви властивостей. Це дозволяє нам в основному об’єднати всі змінні в єдине ціле, console.log({ foo, bar });і результат легко видно. Це також зменшує кількість console.logрядків у нашому коді.

console.table ()

Ми можемо зробити цей крок далі, склавши все це разом у таблиці, щоб зробити її більш читабельною. Кожного разу, коли у вас є об’єкти із загальними властивостями або масив об’єктів console.table(). Тут ми можемо використовувати console.table({ foo, bar})і консоль показує:

console.group ()

Це можна використовувати, коли ви хочете згрупувати або вкласти відповідні деталі разом, щоб мати змогу легко читати журнали.

Це також можна використовувати, коли у вас є кілька операторів журналу в межах функції, і ви хочете мати можливість чітко бачити область, що відповідає кожному оператору.

Наприклад, якщо ви реєструєте дані користувача:

console.group('User Details');console.log('name: John Doe');console.log('job: Software Developer');
// Nested Groupconsole.group('Address');console.log('Street: 123 Townsend Street');console.log('City: San Francisco');console.log('State: CA');console.groupEnd();
console.groupEnd();

Ви також можете використовувати console.groupCollapsed()замість того, console.group()якщо ви хочете, щоб групи були згорнуті за замовчуванням. Вам потрібно буде натиснути кнопку дескриптора зліва, щоб розгорнути.

console.warn () & console.error ()

Залежно від ситуації, щоб переконатися, що ваша консоль є читабельнішою, ви можете додавати журнали за допомогою console.warn()або console.error(). Також console.info()у деяких браузерах відображається піктограма "i".

Це можна зробити на крок далі, додавши власний стиль. Ви можете використовувати %cдирективу, щоб додати стиль до будь-якого оператора журналу. Це може бути використано для розмежування викликів API, подій користувача тощо, дотримуючись узгодженості. Ось приклад:

console.log('%c Auth ', 'color: white; background-color: #2274A5', 'Login page rendered');console.log('%c GraphQL ', 'color: white; background-color: #95B46A', 'Get user details');console.log('%c Error ', 'color: white; background-color: #D33F49', 'Error getting user details');

Ви також можете змінити font-size, font-styleі інші CSS речі.

console.trace ()

console.trace()виводить трасування стека на консоль і відображає, як код опинився в певній точці. Є певні методи, які ви хотіли б викликати лише один раз, наприклад, видалення з бази даних. console.trace()можна використовувати, щоб переконатися, що код поводиться так, як ми хочемо.

console.time ()

Інша важлива річ, коли мова йде про розробку інтерфейсу, полягає в тому, що код повинен бути швидким. console.time()дозволяє синхронізувати певні операції в коді для тестування.

let i = 0;
console.time("While loop");while (i < 1000000) { i++;}console.timeEnd("While loop");
console.time("For loop");for (i = 0; i < 1000000; i++) { // For Loop}console.timeEnd("For loop");

Hopefully, the article provided some information on various ways to use the console. If you have any questions or want me to elaborate please leave me a note below or reach out to me on twitter or email.