Share This
Связаться со мной
Крути в низ
Categories
//🛠 Продвинутые советы и хитрости console.log

🛠 Продвинутые советы и хитрости console.log

Console – встроенный отладчик браузера. Многие разработчики постоянно используют в коде console.log() для вывода отладочных сообщений, но этот инструмент может предложить гораздо больше. Обсудить

prodvinutye sovety i hitrosti consolelog d303d4b - 🛠 Продвинутые советы и хитрости console.log

Перевод публикуется с сокращениями, автор оригинальной статьи Liad Shiran.

Введение: объект Console

Попробуем что-нибудь простое:

prodvinutye sovety i hitrosti consolelog c68164c - 🛠 Продвинутые советы и хитрости console.log

Как мы видим, объект консоли может предложить гораздо больше, чем старая добрая функция console.log().

Правда в том, что, вероятно, есть лучший способ логировать необходимое. Все, что для этого нужно – знать альтернативные варианты и привыкнуть к ним.

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

Давайте создадим тестовый объект для использования в качестве примера:

prodvinutye sovety i hitrosti consolelog d4f3b6e - 🛠 Продвинутые советы и хитрости console.log

Вот как это выглядит, когда вызывается console.log() с нашим объектом:

prodvinutye sovety i hitrosti consolelog 1d33e22 - 🛠 Продвинутые советы и хитрости console.log

console.dir()

В то время как console.log() выводит объект в строковом представлении, console.dir() распознает его как объект и печатает свойства в виде расширяемого списка:

prodvinutye sovety i hitrosti consolelog f8324b8 - 🛠 Продвинутые советы и хитрости console.log

console.assert()

С помощью console.assert() мы можем решить регистрировать что-либо только в том случае, если условие false, и сэкономить место в консоли, избегая ненужного вывода сообщений:

prodvinutye sovety i hitrosti consolelog a83dda3 - 🛠 Продвинутые советы и хитрости console.log

console.count()

Вместо того, чтобы увеличивать счетчик вручную, можно использовать console.count(), чтобы он выполнил все за нас. Можно снабдить его меткой (Pet, например), и значение счетчика будет увеличиваться каждый раз, когда вызывается console.count(“Pet”):

prodvinutye sovety i hitrosti consolelog aff7183 - 🛠 Продвинутые советы и хитрости console.log

console.table()

Используйте console.table() для вывода визуально красивого табличного представления объекта с помеченными строками для каждого свойства:

prodvinutye sovety i hitrosti consolelog d5dc959 - 🛠 Продвинутые советы и хитрости console.log

console.time() / timeLog() / timeEnd()

Очень популярная штука. Используйте console.time() для запуска таймера. Затем при каждом вызове console.timeLog () будет выводиться время, прошедшее с момента его запуска.

Когда все закончится, вызовите console.timeEnd(), чтобы вывести общее количество времени:

prodvinutye sovety i hitrosti consolelog 8481e5a - 🛠 Продвинутые советы и хитрости console.log

console.trace()

При отладке глубоко вложенных объектов или функций может потребоваться распечатать трассировку стека кода. Вызовите console.trace() из нужной функции в верхней части стека вызовов, чтобы увидеть место в коде, где был совершен вызов:

prodvinutye sovety i hitrosti consolelog 710c082 - 🛠 Продвинутые советы и хитрости console.log

console.group() / groupEnd()

Можно группировать сообщения, чтобы избежать беспорядка в консоли, например:

prodvinutye sovety i hitrosti consolelog 94eced5 - 🛠 Продвинутые советы и хитрости console.log

Дополнительный совет: Используйте console.groupCollapsed() вместо console.group(), и группа будет свернута по умолчанию – это значительно облегчит работу.

CSS-стиль консоли

Если хотите разнообразить визуальные возможности ведения журнала, используйте %c перед строкой и передайте стили CSS в качестве второго аргумента:

prodvinutye sovety i hitrosti consolelog 9809337 - 🛠 Продвинутые советы и хитрости console.log

Теперь вы можете использовать консоль для рисования практически чего угодно!

Заключение

Иногда мы не осознаем, что можем немного облегчить жизнь разработчика, просто интегрировав новые возможности и привычки, например, like a pro в использовании консоли.

Надеемся, что вы извлечете полезную информацию из этого материала. Удачи в дебаге!

Дополнительные материалы:

  • Разработка под Андроид: советы, инструменты и трюки
  • Python + Visual Studio Code = успешная разработка
  • Разработка игр Unreal Engine 4: 10 советов начинающим
  • Что такое IoT-разработка и с чем ее едят?
  • 6 лучших книг по разработке: управление и гибкая разработка

  • 5 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Связаться со мной
Close