console.log() для отладки? Тогда мы идем к вам. Шутка. На самом деле у этого инструмента есть намного больше самых что ни на есть полезных возможностей. И в этой статье мы кратко рассмотрим самые основные.
Возможность вывода различных сообщений в консоли браузера определенно оказывает незаменимую помощь всем разработчикам. Сообщения console.log() подобны лекарству от большинства ваших детских и не очень болезней, так как способствуют устранению всевозможных проблем в вашем коде.
В настоящее время большинство разработчиков в ходе работы над кодом думает следующим образом. Хорошо бы вывести некоторое сообщение для того, чтобы узнать больше о возникшей проблеме. При этом в консоли мы можем выводить разнообразную полезную информацию, такую как сообщения в возникших исключительных ситуациях, текущее содержимое переменных и т.д.
Содержание
- console.log() | info() | debug() | warn() | error()
- Используем плейсхолдеры (заполнители)
- Добавляем CSS к нашим сообщениям консоли
- console.dir()
- HTML элементы в консоли
- console.table()
- console.group() & console.groupEnd()
- console.count()
- console.assert()
- console.trace()
- console.time()
- console.memory()
- console.clear()
- Примеры
Эти методы непосредственно выводят в консоль необработанную строку с информацией, с соответствующей стилизацией и цветом шрифта, в зависимости от типа события.

Существуют различные виды плейсхолдеров:
-
%o – принимает объект;
-
%s – принимает строку;
-
%d – принимает число (десятичную дробь или целое).
Ниже представлено, как они могут использоваться для формализованного вывода отладочной информации.

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

Как нам выделить цветом определенное слово в сообщении лога? Вот, пожалуйста.

JSON

Получаем элементы HTML в консоли для инспектирования их свойств и содержимого.

JSON или Javascript

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

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

assert()
принимает ложное значение false

Этот метод позволяет вывести в консоль информацию о трассировке, которая содержит содержимое всего стека вызовов функций относительно заданного места листинга выполняющегося кода.

time()
— это самый лучший способ измерить время, затрачиваемое на выполнение нашего кода JavaScript

JavaScript используют память браузера? Вот пример использования функции memory()

console.clear()
// измеряем время выполнения нашего кода console.time("This"); let total = 0; for (let j = 0; j < 10000; j++) { total += j } console.log("Result", total); console.timeEnd("This"); // исследуем память, используемую браузером console.memory() // выводим логи по условию 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}); } // считаем for (let i = 0; i < 11; i++) { console.count(); } // группируем наши сообщения в группы console.group(); console.log('Test message'); console.group(); console.log('Another message'); console.log('Something else'); console.groupEnd(); console.groupEnd(); // структурируем сообщения в виде таблицы 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) // очищаем консоль console.clear() // получаем HTML элемент для обработки и инспектирования его свойств let element = document.getElementsByTagName("BODY")[0]; console.log(element) // просматриваем содержимое JSON в удобном, форматированном виде const userInfo = {"name":"John Miller", "id":2522, "theme":"dark"} console.dir(userInfo); // раскрашиваем наши логи console.log('%cColor of the text is green plus small font size', 'color: green; font-size: x-small'); // передаем значения объектов и переменных в сообщения const userDetails = {"name":"John Miller", "id":2522, "theme":"dark"} console.log("Hey %s, here is your details %o in form of object", "John", userDetails); // типы сообщений в консоли console.log('console.log'); console.info('console.info'); console.debug('console.debug'); console.warn('console.warn'); console.error('console.error');