Все знают самый простой способ отладки кода с помощью console.log, но есть множество других, более удобных и практичных способ.
Давайте начнем.
console.log()
Базовый вариант — это вывести строку или объект в консоль.
let test = 'Я консоль лог';
console.log(test);
Теперь представим, когда у нас есть куча объектов, которые нужно вывести в консоль.
let foo = {id: 1, verified: true, color: 'green'};
let bar = {id: 2, verified: false, color: 'red'};
console.log(foo);
console.log(bar);
Как мы видим, имена переменных не видно. Это очень не удобно, когда у вас их много. Конечно можно объединить console.log в один, тогда это сократит количество вызовов console.log и сделает более удобным их отображение в консоли.
console.log({foo, bar});
Но можно пойти дальше и использовать console.table
console.table()
Теперь мы можем сложить все наши переменные в одну таблицу, тогда в консоли мы увидим удобную табличку. Тут главное учитывать, чтобы все объекты имели одинаковые свойства или использовать массив.
console.table({foo, bar});
console.group()
С помощью этого, вы сможете группировать различные объекты и использовать иерархию, чтобы иметь возможность легко и удобно читать журналы.
console.group('User Details');
console.log('name: John Doe');
console.log('job: Software Developer');
console.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.info()
Это тот же самый console.log, но более разукрашенный.
Помимо этого, вы можете добавлять различные стили для своих логов. Такие как: цвета, фон, размер. Все как в CSS. 😊
console.log('%c Auth ',
'color: white; background-color: #2274A5; font-size: 32px;',
'Login page rendered');
console.log('%c GraphQL ',
'color: white; background-color: #95B46A; font-style: italic',
'Get user details');
console.log('%c Error ',
'color: white; background-color: #D33F49',
'Error getting user details');
console.trace()
Эта штука нужна для трассировка кода в консоль, он отображает как код оказался в определенной точке.
function foo() {
function bar() {
console.trace();
}
bar();
}
foo();
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");
Вот и все, надеюсь статья была полезной. Лайки балалайки комментарии. Буду рад любому фидбеку.
