Объект Console служит для доступа к средствам отладки браузера (например, Web Console (Веб-консоль) в Firefox). Работа с ним отличается в разных браузерах, но эти методы и свойства по факту поддерживаются всеми браузерами.
Доступ к Console можно получить через свойство глобального объекта, то есть: {{domxref("Window")}} в браузере (в JavaScript), {{domxref("WorkerGlobalScope")}} — в workers это специальный способ доступа через свойство console. Он известен как {{domxref("Window.console")}}, и на него ссылаются для простоты так: "console".
console.log("Failed to open the specified link")
Ниже описаны методы, доступные в объекте Console и приведены несколько примеров их использования.
{{AvailableInWorkers}}
false.log()Отображает представление указанного объекта в XML/HTML-виде, если это возможно. Если нет - в виде JavaScript-объекта (как в виде "console.dir()").
error();groupEnd().group() вывод происходи в свёрнутую группу, требующую раскрыть её вручную по кнопке. Для завершения группы вызовите groupEnd().Чаще всего Консоль используется для вывода строк текста и других типов данных. Существует четыре категории вывода, которые вы можете создавать, используя функции {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, {{domxref("console.error()")}}. Их вывод стилизован по-разному, и вы можете использовать фильтры, предоставляемые браузером, чтобы видеть только интересующие вас вещи.
Есть два пути использования функций вывода; можно просто передать список объектов, чьё строковое представление сольётся в одну строку, после чего выведется в консоль, или вы можете использовать строку с подстановочными символами и списком объектов-параметров для подстановки в них.
Простейший способ для вывода одного объекта:
var someObject = { str: "Some text", id: 5 };
console.log(someObject);
Вывод будет таким:
[09:27:13.475] ({str:"Some text", id:5})
Вы можете выводить несколько объектов, просто перечисляя их в вызываемой функции:
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 {{geckoRelease("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 при выводе в консоль. Часть текста до директивы не затрагивается стилем, а часть после - будет стилизована:
console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue; padding: 2px;");
Note: Поддерживается довольно много свойств стилей CSS; но вам необходимо поэкспериментировать и посмотреть, что окажется более полезным.
Вы можете использовать вложенные группы для организации вывода, визуально комбинируя связанный материал. Для создания вложенного блока вызовите console.group(). Метод console.groupCollapsed() похожий, но создаёт новый блок свёрнутым, что потребует нажать на кнопку, для своего раскрытия для чтения.
метод groupCollapsed() работает так же как и group().Для выхода из текущей группы просто вызовите console.groupEnd(). Пример:
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");
Вывод будет таким:
{{h3_gecko_minversion("Timers", "10.0")}}
Для расчёта длительности определённых операций в Gecko 10 введена поддержка таймеров в объекте console. Для запуска таймера вызовите функцию console.time(), при этом в качестве параметра передайте название таймера. Для остановки таймера и для получения прошедшего времени в миллисекундах вызовите console.timeEnd(), передав в качестве параметра имя таймера. На странице можно запустить до 10000 таймеров одновременно.
Рассмотрим пример:
console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");
этот код запишет в веб-консоль время необходимое пользователю для того, чтобы закрыть окно alert:
Заметьте, что имя таймера отображено и при старте таймера и при его остановке.
Консоль также поддерживает вывод трассировки стека; она покажет вам весь путь вызовов функций, пройденный до момента, когда вы вызвали {{domxref("console.trace()")}}. Например, такой код:
foo();
function foo() {
function bar() {
console.trace();
}
bar();
}
Вывод в консоль будет похож на этот:
console, то этот объект переопределяет объект console, встроенный в Firefox.console работали только, если открыта панель "Веб-консоль" (Web Console). Начиная с {{Gecko("12.0")}}, вывод кешируется до тех пор, пока панель Веб-консоль не откроется, и сразу отобразится в ней.console совместим с таким же объектом, предоставляемым плагином Firebug.