- PVSM.RU - https://www.pvsm.ru -

Справочник методов console в JS

Справочник методов console в JS - 1Со времён систематизации методов объекта console прошло достаточно много времени, некоторые браузеры получили поддержку недостающих ранее методов. Таблица вызывает естественный интерес у разрабочиков, поэтому — почему бы её не обновить, дополнив в одной статье описаниями?

Справочник методов console в JS - 2 Chrome Справочник методов console в JS - 3 Firebug Справочник методов console в JS - 4 Firefox Справочник методов console в JS - 5 IE Справочник методов console в JS - 6 Node.js Справочник методов console в JS - 7 Safari Справочник методов console в JS - 8 Opera
assert(expression[, object, ...])

Если выражение expression ложно, выводит console.error, иначе — ничего не выводит.
  ✓   ✓ ✓ [1] (28.0+)   ✓ [2]   ✓   ✓   ±
clear()

Очищает окно консоли.
  ✓   ✓ -⊝-   ✓ [3] -⊝-   ✓   ✓
count([object])

Выводит, сколько раз данный код был выполнен. Если необязательный аргумент object передан, то перед значением счётчика, выводится object.toString()**.
  ✓   ✓ ✓ [4] (30.0+)   ✓ [5] -⊝-   ✓ ± ...
debug(object[, object, ...])

Эквивалент console.log для совместимости со старым вариантом объекта console, когда .debug выводил дополнительно ссылку на строку кода, из которой он был вызван.
   равно .log()   ✓   ✓   ✓   ✓ [6] -⊝-   ✓ ± ...
dir(object)

object выводится как Javascript-объект (для DOM-элементов — все их аттрибуты и методы). Похожим образом работает %O в console.log в Chrome.
  ✓   ✓ ✓ [7] (8+) ✓ [8] (9+)   ✓   ✓   ✓
dirxml(object)

Выводится XML-код объекта.
  ✓   ✓ -⊝- ✓ [9] (11+) -⊝-   ✓ ± ...
error(object[, object, ...])

Выводит ошибку и результат console.trace для места, откуда она была вызвана (не останавливая выполнение программы). Поддерживаются паттерны(%s, %d (%i), %f, %o, %O, %c), как в console.log.
  ✓ ± ... ± ... ✓ [10] (8+)   ✓   ✓ ± ...
exception(object[, object, ...])

Эквивалент error()
  равно .error() -⊝- -⊝- ✓ [11] (28+) -⊝-        -⊝- -⊝- -⊝-
group(object[, object, ...])

Начинает развёрнутую группу записей в консоли, которая вручную затем может сворачиваться. Группа оканчивается командой .groupEnd(). Поддерживаются паттерны (см. .log()).
  ✓   ✓ ± ... ✓ [12] (11+) -⊝- ✓ (4+)   ✓
groupCollapsed(object[, object, ...])

Начинает изначально свёрнутую группу записей в консоли, которая вручную затем может разворачиваться. Группа оканчивается командой .groupEnd(). Поддерживаются паттерны (см. .log()).
  ✓   ✓ ± ... (9+) ✓ [13] (11+) -⊝-   ✓ (5.1+)   ✓
groupEnd()

Обозначает конец группы.
  ✓   ✓ [14] ✓ [15] (9+) ✓ [16] (11+) -⊝-   ✓ (4+)   ✓
Справочник методов console в JS - 9 Chrome Справочник методов console в JS - 10 Firebug Справочник методов console в JS - 11 Firefox Справочник методов console в JS - 12 IE Справочник методов console в JS - 13 Node.js Справочник методов console в JS - 14 Safari Справочник методов console в JS - 15 Opera
info(object[, object, ...])

Аналогична .log(), но оформляется в ином дизайне, для различения типов сообщений, например, для градации важности или для иного смыслового значения этой группы сообщений. Поддерживаются паттерны (описаны в .log()).
  ✓   ✓   ✓   ✓   ✓   ✓   ✓
log(object[, object, ...])

Выводит аргументы в консоль, разделяя пробелами. Самая популярная из команд console.

Поддерживает паттерны — специальные имена в первом аргументе, указывающие, что его надо использовать как шаблон, в который будут подставляться следующие аргументы вместо термов (как в printf() на С, но значительно проще). Примеры:

console.log('У Пети было %d %s',10,'яблок');
console.log('Пи равно %f',Math.PI);
console.log('%cКаждый %cОхотник %cЖелает%c знать где сидит фазан','color:red;','font-size:16px;color:orange;','background:black;color:yellow;','font:normal;color:normal;background:normal;');
console.log('body as DOM: %o',document.getElementsByTagName('body')[0]);
console.log('object: %O',{a:1,b:2});
console.log('body as Object: %O',document.getElementsByTagName('body')[0]);

Виды паттернов и тип данного, в который преобразуется значение подставляемого аргумента:
%s — строка.
%d или %i — число.
%f — число с плавающей точкой (Firebug тоже поддерживает).
%o — DOM-элемент (Firebug выводит как ссылку на элемент. Chrome, кроме ссылки, отображает элемент в консоли. Firefox по клику открывает элемент в модальном окне (доступны все аттрибуты и методы этого объекта)).
%O — JS-объект (не поддерживается в Firefox; Chrome преобразует DOM-объект в js-объект для этого паттерна; Firebug не отличает %o от %O).
%c — CSS-стиль (color, background, font, ...; не поддерживается в Firefox).
    (важно)   ✓   ✓   ✓   ✓   ✓   ✓ ± ...
markTimeline()

Аналог .timeStamp() для Safari, но в нём .timeStamp() не поддерживается, и наоборот.
 =.timeStamp() -⊝- -⊝- -⊝- -⊝- -⊝-   ✓ -⊝-
profile([label])

Запускает Javascript-профайлер [17], затем показывает результаты под именем «label».
  ✓   ✓ (devtools) ✓ (10+) -⊝-   ✓ -⊝-
profileEnd()

Выключает Javascript-профайлер.
  ✓   ✓ (devtools) ✓ (10+) -⊝-   ✓ -⊝-
table(data[, columns])

Двумерные табличные данные — в формате таблицы. Data — массив или объект (или объект из объектов, объект из массивов), каждый элемент которого будет строкой в таблице. Первый столбец двумерного массива будет его индексом (от 0). Или, если это — объект, первый столбец будет состоять из ключей объекта. Пример из Firefox (объект объектов):
Справочник методов console в JS - 16
  ✓   ✓ [18] ✓ [19] (34.0+) -⊝- -⊝- -⊝- -⊝-
time(label)

Включает счётчик (миллисекунд) под именем label.
  ✓ ✓ [20] ✓ [21] (10+) ✓ (11+)   ✓ ✓ (4+)   ±
timeEnd(label)

Останавливает счётчик (миллисекунд) под именем label и публикует результат под этим именем. Пример (Хром):
Справочник методов console в JS - 17
  ✓   ✓ [22] ✓ [23] (10+) ✓ (11+)   ✓ ✓ (4+)   ±
timeStamp([label])

Отрисовыввает метки времени на диаграмме таймингов скрипта, что позволяет следить за динамикой поведения программы. Пример (Firebug):
Справочник методов console в JS - 18
  ✓   ✓ [24] -⊝- -⊝- -⊝- -⊝- -⊝-
trace()

Показывает стек трассировки функции на данный момент исполнения (то же, что обычно показывается при остановке на месте ошибки). Пример в Safari (в боковой панели), в Хроме (в консоли):
Справочник методов console в JS - 19 Справочник методов console в JS - 20
В Firefox:
Справочник методов console в JS - 21
  ✓   ✓ ✓ [25] (10+) ✓ (11+)   ✓ ✓ (7.0.1+) ± ...
warn(object[, object, ...])

Аналогична .log() и .info(), но оформляется в ином дизайне, для различения типов сообщений. Поддерживаются паттерны (описаны в .log()).
  ✓   ✓   ✓   ✓   ✓   ✓   ✓
debugger;

Останавливает выполнение Javascript на текущей строке. Равносилен установке точки останова (breakpoint) в отладчике. Кроме остановки, никак не отражается на исполняемой программе.
  (оператор)   ✓   ✓   ✓   ✓   ✓   ✓   ✓
throw new Error('mesasge');

Останавливает выполнение Javascript на текущей строке, прерывая выполнение. (Поддерживается всеми средами исполнения Javascript.)
Справочник методов console в JS - 22 Chrome [26] Справочник методов console в JS - 23 Firebug [27] Справочник методов console в JS - 24 Firefox [28] Справочник методов console в JS - 25 IE [29] Справочник методов console в JS - 26 Node.js [30] Справочник методов console в JS - 27 Safari [31] Opera [32]

• Console API Reference for Chrome [26]
• Console API in Firebug [27]
• Console object (MDN) [28]
• Console object in IE10 (MSDN) [29]
• in Node.js v0.12.0 [30]
• … in Safari Web Inspector Guide [31]
• Console in Opera Dragonfly [32]

• Используем console на полную [33]
• Продвинутая JavaScript отладка при помощи console.table() [34]
• Релиз Firebug 1.6 [35] (console.table)
• Using the F12 Tools Console to View Errors and Status [36] (MSDN)

• FireBug* Console API [37] — описаны тонкости реализации, замеченные в тестах браузеров 2013 г;
• API консоли Javascript [38]

Автор: spmbt

Источник [39]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/86159

Ссылки в тексте:

[1] ✓: https://developer.mozilla.org/en-US/docs/Web/API/Console/assert

[2] ✓: https://msdn.microsoft.com/en-us/library/ie/hh772171%28v=vs.85%29.aspx

[3] ✓: https://msdn.microsoft.com/en-us/library/ie/jj152131%28v=vs.85%29.aspx

[4] ✓: https://developer.mozilla.org/en-US/docs/Web/API/Console/count

[5] ✓: https://msdn.microsoft.com/en-us/library/ie/dn265064%28v=vs.85%29.aspx

[6] ✓: https://msdn.microsoft.com/en-us/library/ie/dn265066%28v=vs.85%29.aspx

[7] ✓: https://developer.mozilla.org/en-US/docs/Web/API/Console/dir

[8] ✓: https://msdn.microsoft.com/en-us/library/ie/jj152132%28v=vs.85%29.aspx

[9] ✓: https://msdn.microsoft.com/en-us/library/ie/dn265067%28v=vs.85%29.aspx

[10] ✓: https://msdn.microsoft.com/en-us/library/ie/hh772176%28v=vs.85%29.aspx

[11] ✓: https://developer.mozilla.org/en-US/docs/Web/API/Console/error

[12] ✓: https://msdn.microsoft.com/en-us/library/ie/dn265068%28v=vs.85%29.aspx

[13] ✓: https://msdn.microsoft.com/en-us/library/ie/dn265069%28v=vs.85%29.aspx

[14] ✓: https://getfirebug.com/wiki/index.php/Console.groupEnd

[15] ✓: https://developer.mozilla.org/en-US/docs/Web/API/Console/groupEnd

[16] ✓: https://msdn.microsoft.com/en-us/library/ie/dn265070%28v=vs.85%29.aspx

[17] Запускает Javascript-профайлер: https://developer.chrome.com/devtools/docs/console-api#consoleprofile

[18] ✓: http://www.softwareishard.com/blog/firebug/tabular-logs-in-firebug/

[19] ✓: https://developer.mozilla.org/en-US/docs/Web/API/Console/table

[20] ✓: https://getfirebug.com/wiki/index.php/Console.time

[21] ✓: https://developer.mozilla.org/en-US/docs/Web/API/Console/time

[22] ✓: http://www.stoimen.com/blog/2010/02/02/firebugs-console-time-accuracy/

[23] ✓: https://developer.mozilla.org/en-US/docs/Web/API/Console/timeEnd

[24] ✓: http://www.softwareishard.com/blog/firebug/firebug-1-8-console-timestamp/

[25] ✓: https://developer.mozilla.org/en-US/docs/Web/API/Console/trace

[26] Chrome: https://developer.chrome.com/devtools/docs/console-api

[27] Firebug: https://getfirebug.com/wiki/index.php/Console_API

[28] Firefox: https://developer.mozilla.org/en-US/docs/Web/API/Console

[29] IE: https://msdn.microsoft.com/en-us/library/ie/hh772169%28v=vs.85%29.aspx

[30] Node.js: https://nodejs.org/api/console.html

[31] Safari: https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW3

[32] Opera: http://www.opera.com/dragonfly/documentation/console/

[33] Используем console на полную: http://habrahabr.ru/post/114483/

[34] Продвинутая JavaScript отладка при помощи console.table(): http://habrahabr.ru/post/202394/

[35] Релиз Firebug 1.6: http://habrahabr.ru/post/109046/

[36] Using the F12 Tools Console to View Errors and Status: https://msdn.microsoft.com/library/gg589530

[37] FireBug* Console API: http://habrahabr.ru/post/188066/

[38] API консоли Javascript: http://habrahabr.ru/post/198372/

[39] Источник: http://habrahabr.ru/post/253359/