Console

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Объект Console служит для доступа к средствам отладки браузера (например, Web Console (Веб-консоль) в Firefox). Работа с ним отличается в разных браузерах, но эти методы и свойства по факту поддерживаются всеми браузерами.

Доступ к Console можно получить через свойство глобального объекта, то есть: Window в браузере (в JavaScript), WorkerGlobalScope — в workers это специальный способ доступа через свойство console. Он известен как Window.console, и на него ссылаются для простоты так: "console".

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

Ниже описаны методы, доступные в объекте Console и приведены несколько примеров их использования.

Примечание: Эта возможность доступна в Web Workers.

Методы

console.assert()

Выводит в консоль (имеется ввиду веб-консоль) сообщение и стек вызова метода, если первый аргумент false.

console.clear()

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

console.count()

Выводит количество вызовов метода с определённой меткой (передаётся в параметре метода)

console.countReset()

Обнуляет значение счётчика с заданным значением.

console.debug()

Синоним для log()

console.dir() Не стандартно

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

console.dirxml() Не стандартно

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

console.error()

Выводит сообщение об ошибке. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.

console._exception() Не стандартно Устарело

Синоним для error();

console.group()

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

console.groupCollapsed()

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

console.groupEnd()

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

console.info()

Информационное сообщение. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.

console.log()

Общий метод вывода информации. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.

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

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

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

Останавливает профайлер.Вы можете посмотреть результат в инструментах анализа производительности браузера (например, Firefox performance tool).

console.table()

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

console.time()

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

console.timeEnd()

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

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

Ставит маркер в браузерном инструменте измерения производительности Timeline или Waterfall.

console.trace()

Вывод трассировки стека.

console.warn()

Выводит предупреждающее сообщение. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.

Использование

Вывод текста в консоль

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

Есть два пути использования функций вывода; можно просто передать список объектов, чьё строковое представление сольётся в одну строку, после чего выведется в консоль, или вы можете использовать строку с подстановочными символами и списком объектов-параметров для подстановки в них.

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

Простейший способ для вывода одного объекта:

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

Вывод будет таким:

[09:27:13.475] ({str:"Some text", id:5})

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

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

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

Вывод будет таким:

[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})

Преобразование строк с использованием масок

Gecko 9.0 ввёл поддержку подстановочных символов (масок). При передаче строки одному из методов вы можете использовать следующие символы:

Подстановочный символ Описание
%o или %O Выводит ссылку на JavaScript-объект. Нажатие на ссылку приведёт к открытию инспектора кода.
%d или %i Выведет целое число. Поддерживается форматирование, например, console.log("АБВГД %.2d", 1.1) выведет число как две значащих цифры с лидирующим нулём: АБВГД 01
%s Выводит строку.
%f Выводит число с плавающей точкой. Поддерживается форматирование, например, console.log("АБВГД %.2f", 1.1) выведет число до двух знаков после запятой: АБВГД 1.10

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

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

Вывод будет таким:

[13:14:13.481] Hello, Bob. You've called me 1 times.
[13:14:13.483] Hello, Bob. You've called me 2 times.
[13:14:13.485] Hello, Bob. You've called me 3 times.
[13:14:13.487] Hello, Bob. You've called me 4 times.
[13:14:13.488] Hello, Bob. You've called me 5 times.

Стилизация вывода консоли

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

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

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

Группирование вывода в консоли

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

Примечание: Свёрнутые группы не поддерживаются пока в Gecko; в настоящее время метод groupCollapsed() работает так же как и group().

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

js
console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");

Вывод будет таким:

Демонстрация вложенных групп в консоли Firefox

Таймеры

Для расчёта длительности определённых операций в Gecko 10 введена поддержка таймеров в объекте console. Для запуска таймера вызовите функцию console.time(), при этом в качестве параметра передайте название таймера. Для остановки таймера и для получения прошедшего времени в миллисекундах вызовите console.timeEnd(), передав в качестве параметра имя таймера. На странице можно запустить до 10000 таймеров одновременно.

Рассмотрим пример:

js
console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");

этот код запишет в веб-консоль время необходимое пользователю для того, чтобы закрыть окно alert:

Логирование времени в консоли Firefox

Заметьте, что имя таймера отображено и при старте таймера и при его остановке.

Примечание: Это важно: если вы используете таймер для записи таймингов сетевого трафика, то таймер отобразит общее время для операции, в то время как время, отображаемое в панели "Сеть" это только время, требуемое для заголовка. Если у вас включено логирование времени тела ответа, то время ответа для заголовка и для тела должно соответствовать времени, которое вы у видите в консоли.

Трассировка стека вызова

Консоль также поддерживает вывод трассировки стека; она покажет вам весь путь вызовов функций, пройденный до момента, когда вы вызвали console.trace(). Например, такой код:

foo();

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

Вывод в консоль будет похож на этот:

Замечания

  • По крайней мере в Firefox, если страница определяет свой объект console, то этот объект переопределяет объект console, встроенный в Firefox.
  • До Gecko 12.0, методы объекта console работали только, если открыта панель "Веб-консоль" (Web Console). Начиная с Gecko 12.0, вывод кешируется до тех пор, пока панель Веб-консоль не откроется, и сразу отобразится в ней.
  • Стоит отметить, что встроенный в Firefox объект console совместим с таким же объектом, предоставляемым плагином Firebug.

Смотрите также

Реализации в браузерах