консоль

Объект console предоставляет доступ к консоли отладки (например, к консоли браузера в Firefox).

Реализации API консоли могут отличаться в разных средах выполнения. В частности, некоторые методы консоли могут работать по-другому или вообще не работать в некоторых онлайн-редакторах и IDE. Чтобы увидеть поведение, описанное в этой документации, попробуйте методы в средствах разработчика вашего браузера, хотя даже здесь есть различия между браузерами.

К объекту console можно получить доступ из любого глобального объекта. Window в средах браузера и WorkerGlobalScope как специфические варианты в потоках через свойство console. Он экспортируется как Window.console, и может быть использован как console. Например:

console.log("Failed to open the specified link");

console.assert()

Вывести сообщение об ошибке в консоль, если первый аргумент false.

console.clear()

Очистить консоль.

console.count()

Вывести количество вызовов этой строки с заданным меткой.

console.countReset()

Сбросить значение счетчика с заданной меткой.

console.debug()

Вывести сообщение в консоль с уровнем отладки.

console.dir()

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

console.dirxml()

Отобразить представление элемента XML/HTML указанного объекта, если это возможно, или представление JavaScript-объекта, если нет.

console.error()

Вывести сообщение в консоль с уровнем ошибки.

console.exception() Нестандартный Устаревший

Псевдоним для console.error().

console.group()

Создать новую инлайновую группу, отступы всего последующего вывода на уровень глубже. Чтобы вернуться на уровень выше, вызовите console.groupEnd().

console.groupCollapsed()

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

console.groupEnd()

Выход из текущей инлайновой группы.

console.info()

Вывести сообщение в консоль с уровнем информации.

console.log()

Вывести сообщение в консоль.

console.profile() Нестандартный

Запустить встроенный профайлер браузера (например, инструмент производительности Firefox). Вы можете указать необязательное имя для профиля.

console.profileEnd() Нестандартный

Остановить профайлер. Результат профилирования можно увидеть в инструменте производительности браузера (например, инструмент производительности Firefox).

console.table()

Отобразить табличные данные в виде таблицы.

console.time()

Запустить таймер с именем, указанным в качестве входного параметра. На одной странице может работать до 10 000 одновременных таймеров.

console.timeEnd()

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

console.timeLog()

Записать значение указанного таймера в консоль.

console.timeStamp() Нестандартный

Добавляет маркер на временную шкалу инструмента производительности браузера (Chrome или Firefox).

console.trace()

Вывести стек вызовов.

console.warn()

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

Наиболее часто используемой функцией консоли является регистрация текста и других данных. Существуют несколько категорий вывода, которые можно сгенерировать с помощью методов console.log(), console.info(), console.warn(), console.error() или console.debug(). Каждый из этих методов приводит к выводу, стилизованному по-разному в журнале, и вы можете использовать средства фильтрации, предоставляемые вашим браузером, для просмотра только тех видов вывода, которые вас интересуют.

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

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

Вывод одного объекта

Самый простой способ использования методов регистрации — это вывод одного объекта:

const someObject = { str: "Some text", id: 5 };
console.log(someObject);

Вывод выглядит примерно так:

{str:"Some text", id:5}

Браузер отобразит как можно больше информации об объекте. Например, может быть отображено и приватное состояние объекта. Некоторые типы объектов, такие как элементы DOM или функции, также могут быть отображены особым образом.

Создание снимков объектов

Информация об объекте извлекается лениво. Это означает, что сообщение журнала отображает содержимое объекта в момент первого просмотра, а не в момент его регистрации. Например:

const obj = {};
console.log(obj);
obj.prop = 123;

Это выведет {}. Однако, если вы развернете детали объекта, вы увидите prop: 123.

Если вы собираетесь изменить свой объект и хотите предотвратить обновление зарегистрированной информации, вы можете выполнить глубокое клонирование объекта перед его регистрацией. Распространённый способ — JSON.stringify() и затем JSON.parse() его:

console.log(JSON.parse(JSON.stringify(obj)));

Существуют и другие альтернативы, работающие в браузерах, такие как structuredClone(), которые более эффективны при клонировании различных типов объектов.

Вывод нескольких объектов

Вы также можете вывести несколько объектов, перечислив их при вызове метода регистрации, например так:

const car = "Dodge Charger";
const someObject = { str: "Some text", id: 5 };
console.info("My first car was a", car, ". The object is:", someObject);

Вывод будет выглядеть так:

My first car was a Dodge Charger . The object is: {str:"Some text", id:5}

Использование подстановок строк

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

%o

Выводит JavaScript-объект в стиле «оптимально полезного форматирования», например, элементы DOM могут быть отображены так же, как они отображаются в инспекторе элементов.

%O

Выводит JavaScript-объект в стиле «общего форматирования JavaScript-объектов», обычно в виде раскрываемого дерева. Это похоже на console.dir().

%d или %i

Выводит целое число.

%s

Выводит строку.

%f

Выводит значение с плавающей точкой.

%c

Применяет правила стилей CSS ко всему последующему тексту. См. Стиль вывода в консоли.

Некоторые браузеры могут реализовывать дополнительные спецификаторы формата. Например, Safari и Firefox поддерживают форматирование с точностью в стиле C %.<precision>f. Например, console.log("Foo %.2f", 1.1) выведет число с двумя десятичными знаками: Foo 1.10, а console.log("Foo %.2d", 1.1) выведет число как две значащие цифры с ведущим нулем: Foo 01.

Каждый из них извлекает следующий аргумент после строки формата из списка параметров. Например:

for (let i = 0; i < 5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i + 1);
}

Вывод выглядит так:

Hello, Bob. You've called me 1 times.
Hello, Bob. You've called me 2 times.
Hello, Bob. You've called me 3 times.
Hello, Bob. You've called me 4 times.
Hello, Bob. You've called me 5 times.

Стиль вывода в консоли

Вы можете использовать директиву %c для применения CSS-стиля к выводу в консоли:

console.log(
  "This is %cMy stylish message",
  "color: yellow; font-style: italic; background-color: blue;padding: 2px",
);

Текст перед директивой не будет затронут, но текст после директивы будет стилизован с использованием CSS-деклараций в параметре.

Вы можете использовать %c несколько раз:

console.log(
  "Multiple styles: %cred %corange",
  "color: red",
  "color: orange",
  "Additional unformatted message",
);

Допустимые свойства вместе с синтаксисом %c (по крайней мере, в Firefox — они могут отличаться в других браузерах):

• background и его эквиваленты с длинной записью
• border и его эквиваленты с длинной записью
• border-radius
• box-decoration-break
• box-shadow
• clear и float
• color
• cursor
• display
• font и его эквиваленты с длинной записью
• line-height
• margin
• outline и его эквиваленты с длинной записью
• padding
• text-* свойства, такие как text-transform
• white-space
• word-spacing и word-break
• writing-mode

Вы можете использовать вложенные группы для организации вывода, визуально объединяя связанные материалы. Для создания нового вложенного блока вызовите console.group(). Метод console.groupCollapsed() аналогичен, но создаёт новый блок свёрнутым, требуя использования кнопки раскрытия для его просмотра.

Для выхода из текущей группы вызовите console.groupEnd(). Например, при таком коде:

console.log("This is the outer level");
console.group("First group");
console.log("In the first group");
console.group("Second group");
console.log("In the second group");
console.warn("Still in the second group");
console.groupEnd();
console.log("Back to the first group");
console.groupEnd();
console.debug("Back to the outer level");

Вывод будет выглядеть так:

Вы можете запустить таймер для расчёта длительности определённой операции. Для запуска вызовите метод console.time(), передав ему имя в качестве единственного параметра. Для остановки таймера и получения затраченного времени в миллисекундах, вызовите метод console.timeEnd(), снова передав имя таймера в качестве параметра. Одновременно на странице может работать до 10 000 таймеров.

Например, при таком коде:

console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff…");
console.timeEnd("answer time");

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

Обратите внимание, что имя таймера отображается как при запуске, так и при остановке таймера.

Объект консоли также поддерживает вывод стека вызовов; это покажет вам путь вызовов, который был пройден для достижения момента вызова console.trace(). При таком коде:

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

Вывод в консоли будет выглядеть примерно так:

• Инструменты разработчика Firefox
• Консоль — как консоль в Firefox обрабатывает вызовы API консоли
• about:debugging — как отобразить вывод консоли, когда целевой объект отладки — мобильное устройство
• Инструменты разработчика Google Chrome
• Инструменты разработчика Microsoft Edge
• Инспектор веб-страниц Safari