Используем JavaScript консоль на 100%

Все знают самый простой способ отладки кода с помощью 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");
Оказывается, While быстрее, чем For

Вот и все, надеюсь статья была полезной. Лайки балалайки комментарии. Буду рад любому фидбеку.

Добавить комментарий

Вы можете использовать следующие теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

14 − два =