Объект Сonsole служит для доступа к средствам отладки браузера (например, Web Console (Веб-консоль) в Firefox). Работа с ним отличается в разных браузерах, но эти методы и свойства, по факту поддерживаемые всеми браузерами.
Доступ к Сonsole можно получить через свойство глобального объекта, то есть: {{domxref("Window")}} в браузере (JavaScript), {{domxref("WorkerGlobalScope")}} — в workers это специальный способ доступа через свойство console. Он инвестен как {{domxref("Window.console")}}, и на него ссылаются для простоты так: "console".
console.log("Failed to open the specified link")
Ниже описаны методы, доступные в объекте Console и приведены несколько примеров использования .
{{AvailableInWorkers}}
Методы
- {{domxref("Console.assert()")}}
- Выводит в консоль (имеется в виду веб-консоль) сообщение и стек вызова метода, если первый аргумент
false. - {{domxref("Console.clear()")}}
- Очистка консоли.
- {{domxref("Console.count()")}}
- Выводит количество вызовов метода с определенной меткой (передается в параметре метода)
- {{domxref("Console.debug()")}}
- Синоним для
log() - {{domxref("Console.dir()")}}
- Отображает интерактивный список свойств указанного объекта JavaScript. Этот список позволит вам посмотреть дочерние объекты и их свойства.
- {{domxref("Console.dirxml()")}}
-
Отображает представление указанного объекта в XML/HTML-виде, если это возможно. Если нет - в виде JavaScript-объекта (как в виде "console.dir()").
- {{domxref("Console.error()")}}
- Выводит сообщение об ошибке. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.
- {{domxref("Console._exception()")}}
- Синоним для
error(); - {{domxref("Console.group()")}}
- Создаёт новую группировку сообщений, сдвигая все следющие выводимые строки вправа на один уровень. Для завершения группы вызовите
groupEnd(). - {{domxref("Console.groupCollapsed()")}}
- Создаёт новую группировку сообщений, сдвигая все следующие сообщения вправо на один уровень; в отличие от
group()вывод происходи в свёрнутую группу, требующую раскрыть её вручную по кнопке. Для завершения группы вызовитеgroupEnd(). - {{domxref("Console.groupEnd()")}}
- Выход из текущей группы.
- {{domxref("Console.info()")}}
- Информационное сообщение. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.
- {{domxref("Console.log()")}}
- Общий метод вывода информации. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.
- {{domxref("Console.profile()")}}
- Запускает профайлер, встроенный в браузер (например, Firefox performance tool). Вы можете указать метку профиля (по желанию).
- {{domxref("Console.profileEnd()")}}
- Останавливает профайлер.Вы можете посмотреть результат в инструментах анализа производительности браузера (например, Firefox performance tool).
- {{domxref("Console.table()")}}
- Отображает табличные данные в виде таблицы.
- {{domxref("Console.time()")}}
- Запускает таймер с именем из переданного параметра. Можно запустить одновременно до 10,000 таймеров на странице.
- {{domxref("Console.timeEnd()")}}
- Останавливает указанный таймер и записывает в лог, сколько прошло секунд от его старта.
- {{domxref("Console.timeStamp()")}}
- Ставит маркер в браузерном инструменте измерения производительности Timeline или Waterfall.
- {{domxref("Console.trace()")}}
- Вывод трассировки стека.
- {{domxref("Console.warn()")}}
- Выводит предупреждающее сообщение. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.
Использование
Вывод текста в консоль
Чаще всего Консоль используется для вывода строк текста и других типов данных. Есть четыре категории вывода, которые вы можете создавать, используя функции: {{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 | Выводит ссылку на JavaScript-объект. Нажатие на ссылку приведёт к открытию инспектора кода. |
| %d or %i | Выведет целое число. Форматирование пока не поддерживается. |
| %s | Выводит строку. |
| %f | Выводит число с плавающей точкой. Форматирование пока не поддерживается. |
Каждая маска, принимая следующий аргумент, исключает его из списка параметров. Следующая маска берёт следующий параметр. Пример:
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("%cMy stylish message", "color: red; font-style: italic");
Note: Довольно много свойств стилей CSS поддерживается; но вам необходимо поэкспериментировать и посмотреть, что окажется более полезным.
Вы можете использовать вложенные группы для организации вывода, визуально комбинируя связанный материал. Для создания вложенного блока вызовите console.group(). Метод console.groupCollapsed() похожий, но создаёт новый блок свёрнутым, который побребует надать на кнупку, чтобы его раскрыть для чтения.
groupCollapsed() method is the same as group() at this time.To exit the current group, simply call console.groupEnd().
For example, given this code:
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");
The output looks like this:
{{h3_gecko_minversion("Timers", "10.0")}}
In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the console object. To start a timer, call the console.time() method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the console.timeEnd() method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.
For example, given this code:
console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");
will log the time needed by the user to discard the alert box:
Notice that the timer's name is displayed both when the timer is started and when it's stopped.
Стек вызова
The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:
foo();
function foo() {
function bar() {
console.trace();
}
bar();
}
The output in the console looks something like this:
Замечания
- At least in Firefox, if a page defines a console object, that object overrides the one built into Firefox.
- Prior to {{Gecko("12.0")}}, the console object's methods only work when the Web Console is open. Starting with {{Gecko("12.0")}}, output is cached until the Web Console is opened, then displayed at that time.
- It's worth noting that the Firefox's built-in
consoleobject is compatible with the one provided by Firebug.
См. так же
- Tools
- Web Console - how the Web Console in Firefox handles console API calls
- Remote debugging - how to see console output when the debugging target is a mobile device
- Debugging apps on Firefox OS - using the App Manager to debug apps running on Firefox OS
- On-device console logging - how to do logging on Firefox OS devices