Используем console.log() в Chrome на полную

Автор оригинала: Harsh Makadia
  • Перевод


Сложно представить себе разработку на JS без вывода информации в консоль. Говоря метафорически, console.log() — лекарство от большинства болезней кода.


Отладка — почти как расследование преступления, где главный преступник тоже вы — Филипе Фортес


Но помимо повсеместно используемой функции console.log(), есть ещё много инструментов, позволяющий сильно упростить процесс. Давайте разберём некоторые из них на простых примерах.


console.log(), .info(), .debug(), .warn(), .error()


Самое простое — печать строки цветом, соответствующем типу события.






Используем плейсхолдеры


Для того, чтобы подставить данные в строку с сообщением, удобнее всего использовать плейсхолдеры.


%o — для объекта
%s — для строки
%d — для десятичного или целого числа





Добавляем CSS


Не хватает info/warn/error? Не беда! К консольным сообщениям можно применять CSS.



Хотите применить CSS только к части сообщения? Это делается вот так:





console.dir()


Часто гораздо удобнее напечатать JSON представление интересующего нас объекта.





Выводим HTML


HTML элементы в консоли можно исследовать так же, как в инспекторе.





console.table()


Хотите быстро посмотреть данные в списке из JSON?





console.group() и console.groupEnd()


Сообщения в консоли можно группировать для удобства.





console.count()


Эта функция записывает, сколько раз она была вызвана.


Если передан опциональный аргумент label, то функция будет записывать количество вызовов с той же label.



Если функция вызвана без параметров, то она запишет количество вызовов на той же строке.





console.assert()


Удобно использовать, когда вы хотите выводить информацию по условию. Будут напечатаны только те сообщения, где первый аргумент assert() ложен.





console.trace()


Этот метод поможет понять, каким путём код дошёл до определённой точки.





console.time()


Самый простой способ замерить время исполнения участка кода.





console.memory


Хотите наконец-то узнать, куда пропала вся свободная оперативная память? 





console.clear()


Используйте, чтобы начать работу с чистого листа. Полностью очищает консоль от предыдущих сообщений.




Код, использованный в статье
// time and time end
console.time("This");
let total = 0;
for (let j = 0; j < 10000; j++) {
  total += j
}
console.log("Result", total);
console.timeEnd("This");

// Memory
console.memory

// Assertion
const errorMsg = 'Hey! The number is not even';
for (let number = 2; number <= 5; number += 1) {
    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
}

// Count
for (let i = 0; i < 11; i++) {
  console.count();
}

// group & groupEnd
console.group();
  console.log('Test message');
  console.group();
    console.log('Another message');
    console.log('Something else');
  console.groupEnd();
console.groupEnd();


// Table
const items = [
  {
    name: "chair",
    inventory: 5,
    unitPrice: 45.99
  },
  {
    name: "table",
    inventory: 10,
    unitPrice: 123.75
  },
  {
    name: "sofa",
    inventory: 2,
    unitPrice: 399.50
  }
];
console.table(items)

// Clear
console.clear()

// HTML Element
let element = document.getElementsByTagName("BODY")[0];
console.log(element)

// Dir
const userInfo = {"name":"John Miller", "id":2522, "theme":"dark"}
console.dir(userInfo);

// Color
console.log('%cColor of the text is green plus small font size', 'color: green; font-size: x-small');

// pass object, variable
const userDetails = {"name":"John Miller", "id":2522, "theme":"dark"}
console.log("Hey %s, here is your details %o in form of object", "John", userDetails);

// Default 
console.log('console.log');
console.info('console.info');
console.debug('console.debug');
console.warn('console.warn');
console.error('console.error');

Похожие публикации

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 13

    +4
    1000001 статья про консольлог на хабре и снова ничего нового. Достаточно и одной habr.com/ru/post/253359
      0

      Именно.

        –3
        Слушайте, ну не все помнят содержимое Хабра за несколько лет.
        Я этой статьи не видел, поиском не нашёл.
        Что ж теперь — не публиковать ничего, а то вдруг уже несколько лет назад было?
          0
          Вбил в гугле «habr.com console.log», на первой странице 4 статьи, первая вышла ещё в 2011-ом году. Всё поиск ищет.
            0
            Убедили. Пока окончательно не удостоверюсь, что за последние десять лет не было похожих статей, не стану публиковать.
            +1
            Слушайте, ну не все видели статьи как верстать НЕ табличками. Надо еще написать парочку, чтоб поиском нашлись.
              0
              У меня встречное предложение: почему бы просто не прокрутить статью в ленте, если она вам не интересна?

              Люди на Хабре разные, для кого-то и статья о проблемах табличной вёрстки, напротив, будет полезной.
                0
                Потому что видя заголовок надеешься, что там что-то новое, читаешь, а там всё опять одно и то же
                  –6

                  Потому что это Хабр. Нельзя пройти мимо и не заминусовать. Добро пожаловать в токсичное сообщество!

                +1
                Я искать не стал, НО моя память может с уверестью 100% сказать статей на эту тему в этом году было овер дофига штук. Тупо мониторя хабр раз в неделю, если не каждый то через месяц обязательно наткнётесь на статью про console.log/info/dir/table…
                Спасибо конечно за статью, но не заметить что такая тема уже была это прям задача.
                  0

                  Все гораздо проще. Есть определенная специфика публикуемого материала. Если вы написали что-то, что требует большого глубокого анализа, то, вероятно, на Хабре этого нет и это будет многим интересно. Но если вы пишете про консольлог, то, я думаю, все-таки можно предположить, что такое уже было, так как топик для бегиннеров и многие на это натыкались.

                +1

                Возможно, Вам стоит исправить заголовок на "Используем console.log() в Chrome на полную". Я не уверен что CSS и HTML аналогично работают в node =/

                  0
                  Справедливо! Поправил, спасибо.

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое