Поиск по сайту:

Способы форматирования вывода консоли в JavaScript


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

Основы

Давайте вспомним наиболее часто используемые консольные функции:

  • console.log(data, ...args) — записывает data в консоль. Любые другие переданные аргументы также будут переданы в той же строке.
  • console.info(data, ...args) — эквивалентно console.log(), но обычно с выделенным форматированием — Chrome, например, добавляет синий фон и информационный значок «i».
  • console.error(data ...args) — то же, что и console.log(), за исключением того, что вывод направляется в stderr (ошибка) поток. Большинство браузеров автоматически форматируют выходные данные красным фоном, чтобы показать, что произошла ошибка.
  • console.warn(data, ...args) — то же, что и console.error(), за исключением того, что обычно применяется желтый фон для обозначения менее серьезной ошибки. статус предупреждения.

Спецификаторы формата

Разработчики обычно передают только один аргумент вышеуказанным командам. Тем не менее, все они принимают несколько аргументов, которые автоматически объединяются в окончательный вывод.

Вы также можете использовать аргументы с printf-совместимыми спецификаторами формата, определяемыми строкой в data:

const value = 10;
const available = "available";
console.log("There are %d options", value, available);
// Logs "There are 10 options available"

Доступные спецификаторы формата:

  • %s — Форматировать как строку.
  • %i – целочисленный формат.
  • %f – форматировать как значение с плавающей запятой.
  • %O — Форматировать как объект JavaScript.
  • %o — Форматировать как элемент DOM.
  • %c – Форматирует как правило CSS, которое применяется к созданной строке журнала.

Поддержка последних двух зависит от движка JavaScript. Они доступны в современных браузерах, но не обязательно в других контекстах исполнения.

Добавление изображений

Используя спецификатор формата CSS, можно включать изображения в вывод консоли! Это работает в браузерах, но не будет поддерживаться в средах командной строки, таких как Node.js.

const css = [
    "background-image: url(https://example.com)",
    "background-size: cover",
    "height: 100px",
    "padding: 15px",
    "width: 100px"
];
console.log("%cI'm An Image!", css.join(";"));

Мы используем правило CSS background-image для отображения изображения. Хотя это может показаться беззаботным, это может иметь практическое применение, если ваша отладка связана с работой с изображениями. Вы можете проверить извлекаемые изображения, фактически не отправляя их на страницу.

Табличный вывод

JavaScript включает встроенную поддержку вывода табличных данных на консоль. Используйте console.table() с массивом юниформ-объектов. Заголовки столбцов будут определены автоматически на основе свойств, общих для каждого объекта.

const objects = [{a: 1, x: "a"}, {a: 2, x: "b"}];
console.table(objects);

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

Условный вывод

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

Ваше сообщение будет зарегистрировано только в том случае, если выражение оценивается как false. Выражение, оцениваемое как true, ничего не выдает.

console.assert(true, "I never appear");
 
console.assert(false, "I will be logged");

Функция console.assert() не влияет на время выполнения. Никакая ошибка не будет выдана, если утверждение не будет выполнено; ваше выражение используется исключительно для определения необходимости входа в консоль.

Группы сообщений

Вы можете визуально группировать разделы вывода с помощью console.group(). Это применит автоматический отступ к последующим строкам, используя предопределенное количество пробелов.

Чтобы закрыть группу, вызовите console.groupEnd(). Это восстанавливает предыдущий отступ.

Вы можете вызвать console.group() несколько раз перед console.groupEnd(), чтобы создать глубоко вложенный вывод. console.groupEnd() изменяет отступ на один шаг за раз, поэтому вам нужно сопоставить количество group() и groupEnd(), прежде чем вы вернетесь к уровню по умолчанию.

Счетчики

Используйте console.count(label), чтобы создать внутренний счетчик с заданным именем:

console.count("my-counter");
// my-counter: 1
console.count("my-counter");
// my-counter: 2

Это дает вам простой способ выдавать возрастающие значения. Вам не нужно указывать имя — счетчик default будет использоваться автоматически. Вы можете сбросить счетчики на 0, используя console.countReset(label).

Таймеры

Консоль имеет встроенную поддержку синхронизации операций. Прошедшее время измеряется в миллисекундах и выдается в секундах (например, «1,234 с»); не гарантируется высокая точность.

console.time();
// ...some time later...
console.timeEnd();
// Emits the elapsed time ("1.234s")

Таймеры поддерживают необязательные метки так же, как и счетчики. Это позволяет вам одновременно управлять несколькими таймерами при синхронизации различных аспектов вашего кода.

Вспомогательные методы

Объект console включает в себя несколько служебных методов, помогающих управлять выводом.

  • console.clear() — очищает консоль от всего видимого вывода. Эффекты зависят от среды выполнения.
  • console.dir(obj, options) — создает список всех перечисляемых пар свойство/значение объекта obj. Глубину рекурсии можно настроить с помощью свойства depth объекта options.
  • console.trace() — выдает трассировку стека до текущей точки кода, что позволяет выполнять прямую отладку выбранного пути выполнения.

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

Заключение

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

Доступные функции зависят от движка JavaScript, с которым вы работаете. Как правило, вы получаете самые продвинутые стили в современном браузере, хотя Node.js также поддерживает большинство методов, которые мы здесь описали.




Все права защищены. © Linux-Console.net • 2019-2024