Как да използвам конзолата на 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");

Надяваме се, че статията предоставя информация за различни начини за използване на конзолата. Ако имате някакви въпроси или искате да разясня, моля, оставете ми бележка по-долу или се свържете с мен на Twitter или имейл.