Перевод публикуется с сокращениями, автор оригинальной статьи Liad Shiran.
Введение: объект Console
Попробуем что-нибудь простое:
![🛠 Продвинутые советы и хитрости console.log](https://media.proglib.io/posts/2021/06/27/854ecca4e237bc767a89441cd7108dd1.png)
Правда в том, что, вероятно, есть лучший способ логировать необходимое. Все, что для этого нужно – знать альтернативные варианты и привыкнуть к ним.
В этой статье будут представлены некоторые из наиболее полезных функций объекта console, изучив которые, вы можете сами решить, должен ли console.log() оставаться вашим единственным вариантом для отладки печати.
Давайте создадим тестовый объект для использования в качестве примера:
![🛠 Продвинутые советы и хитрости console.log](https://media.proglib.io/posts/2021/06/27/3e2dc6d93b2e1b2cd735a3aa7379f3ab.png)
Вот как это выглядит, когда вызывается console.log() с нашим объектом:
![🛠 Продвинутые советы и хитрости console.log](https://media.proglib.io/posts/2021/06/27/937d3a9c62d9a04f2b3e4ff775d5968e.png)
console.dir()
В то время как console.log() выводит объект в строковом представлении, console.dir() распознает его как объект и печатает свойства в виде расширяемого списка:
![🛠 Продвинутые советы и хитрости console.log](https://media.proglib.io/posts/2021/06/27/825755e11fd18ba5de7f51a46a8b9943.png)
console.assert()
С помощью console.assert() мы можем решить регистрировать что-либо только в том случае, если условие false, и сэкономить место в консоли, избегая ненужного вывода сообщений:
![🛠 Продвинутые советы и хитрости console.log](https://media.proglib.io/posts/2021/06/27/5afd12fcb96fb30010e1c4bfa80b4593.png)
console.count()
Вместо того, чтобы увеличивать счетчик вручную, можно использовать console.count(), чтобы он выполнил все за нас. Можно снабдить его меткой (Pet, например), и значение счетчика будет увеличиваться каждый раз, когда вызывается console.count(“Pet”):
![🛠 Продвинутые советы и хитрости console.log](https://media.proglib.io/posts/2021/06/27/99fc2b3d63844c2607ea58db397f7cf8.png)
console.table()
Используйте console.table() для вывода визуально красивого табличного представления объекта с помеченными строками для каждого свойства:
![🛠 Продвинутые советы и хитрости console.log](https://media.proglib.io/posts/2021/06/27/d4ac41c3ada2cd8df5df6e860938692f.png)
console.time() / timeLog() / timeEnd()
Очень популярная штука. Используйте console.time() для запуска таймера. Затем при каждом вызове console.timeLog () будет выводиться время, прошедшее с момента его запуска.
Когда все закончится, вызовите console.timeEnd(), чтобы вывести общее количество времени:
![🛠 Продвинутые советы и хитрости console.log](https://media.proglib.io/posts/2021/06/27/83a0420ebad8bd472e6a6b120b6bf85b.png)
console.trace()
При отладке глубоко вложенных объектов или функций может потребоваться распечатать трассировку стека кода. Вызовите console.trace() из нужной функции в верхней части стека вызовов, чтобы увидеть место в коде, где был совершен вызов:
![🛠 Продвинутые советы и хитрости console.log](https://media.proglib.io/posts/2021/06/27/042d77d4d7523c761097974ff4d311c3.png)
console.group() / groupEnd()
Можно группировать сообщения, чтобы избежать беспорядка в консоли, например:
![🛠 Продвинутые советы и хитрости console.log](https://media.proglib.io/posts/2021/06/27/542aeb63077eee655e5d7e4e24575ba3.png)
CSS-стиль консоли
Если хотите разнообразить визуальные возможности ведения журнала, используйте %c перед строкой и передайте стили CSS в качестве второго аргумента:
![🛠 Продвинутые советы и хитрости console.log](https://media.proglib.io/posts/2021/06/27/64c0e2fbbeee4d7e2b6868d6b438ebd4.png)
Теперь вы можете использовать консоль для рисования практически чего угодно!
Заключение
Иногда мы не осознаем, что можем немного облегчить жизнь разработчика, просто интегрировав новые возможности и привычки, например, like a pro в использовании консоли.
Надеемся, что вы извлечете полезную информацию из этого материала. Удачи в дебаге!
Дополнительные материалы:
Комментарии