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

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

392
ПОДЕЛИТЬСЯ

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

Chrome
Firebug
Firefox
 IE
Node.js
Safari
Opera
assert(expression[, object, …])Раз выражение expression ложно, выводит console.error, по другому — ничего не выводит.
  ✓
  ✓
✓ (28.0+)
  ✓
  ✓
  ✓
  ±
clear()Очищает окно консоли.
  ✓
  ✓
-⊝-
  ✓
-⊝-
  ✓
  ✓
count([object])Выводит, сколько раз данный код был выполнен. Раз необязательный аргумент object передан, то перед значением счётчика, выводится object.toString()**.
  ✓
  ✓
✓ (30.0+)
  ✓
-⊝-
  ✓
± …
debug(object[, object, …])Эквивалент console.log для сопоставимости со старенькым вариантом объекта console, когда .debug выводил дополнительно ссылку на строчку кода, из которой он был вызван.
   равно .log()
  ✓
  ✓
  ✓
  ✓
-⊝-
  ✓
± …
Схожим образом работает %O в console.log в Chrome. dir(object)object выводится как Javascript-объект (для DOM-частей — все их аттрибуты и способы).
  ✓
  ✓
✓ (8+)
✓ (9+)
  ✓
  ✓
  ✓
dirxml(object)Выводится XML-код объекта.
  ✓
  ✓
-⊝-
✓ (11+)
-⊝-
  ✓
± …
Пример с трассировкой стека вызовов (Firefox 31+): Поддерживаются паттерны(%s, %d (%i), %f, %o, %O, %c), как в console.log. error(object[, object, …])Выводит ошибку и итог console.trace для места, откуда она была вызвана (не останавливая выполнение программы).

  ✓
± …
  ✓
✓ (8+)
  ✓
  ✓
± …
exception(object[, object, …])Эквивалент error()
  равно .error()
-⊝-
-⊝-
✓ (28+)
-⊝-       
-⊝-
-⊝-
-⊝-
.log()). Группа оканчивается командой .groupEnd(). group(object[, object, …])Начинает развёрнутую группу записей в консоли, которая вручную потом может сворачиваться. Пример кода и результата (из статьи "Способности консоли браузера", 2013): Поддерживаются паттерны (см.
console.group("module A")
console.log(‘a’)
console.log(‘a’)
console.log(‘a’)
console.group("nested module B")
console.log(‘b’)
console.log(‘b’)
console.log(‘b’)
console.groupEnd()
console.groupCollapsed("nested collapsed module C")
console.log(‘c’)
console.log(‘c’)
console.log(‘c’)
console.groupEnd()
console.groupEnd()
console.group("module D")
console.log(‘d’)
console.log(‘d’)
console.log(‘d’)
console.groupEnd()

  ✓
  ✓
± …
✓ (11+)
-⊝-
✓ (4+)
  ✓
Поддерживаются паттерны (см. .log()). groupCollapsed(object[, object, …])Начинает вначале свёрнутую группу записей в консоли, которая вручную потом может разворачиваться. Группа оканчивается командой .groupEnd().
  ✓
  ✓
(9+) ± …
✓ (11+)
-⊝-
  ✓ (5.1+)
  ✓
groupEnd()Обозначает конец группы.
  ✓
  ✓
✓ (9+)
✓ (11+)
-⊝-
  ✓ (4+)
  ✓
Chrome
Firebug
Firefox
IE
Node.js
Safari
Opera
Поддерживаются паттерны (описаны в .log()). info(object[, object, …])Подобна .log(), но оформляется в ином дизайне, для различения типов сообщений, к примеру, для градации значимости либо для другого смыслового значения данной группы сообщений.
  ✓
  ✓
  ✓
  ✓
  ✓
  ✓
  ✓
Самая популярная из команд console. log(object[, object, …])Выводит аргументы в консоль, разделяя пробелами.

Поддерживает паттерны — особые имена в первом аргументе, указывающие, что его нужно применять как шаблон, в который будут подставляться последующие аргументы заместо термов (как в 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 (Firefox): %c — CSS-стиль (color, background, font; не поддерживается в Firefox).

    (принципиально)
  ✓
  ✓
  ✓
  ✓
  ✓
  ✓
± …
markTimeline()Аналог .timeStamp() для Safari, но в нём .timeStamp() не поддерживается, и напротив.
 =.timeStamp()
-⊝-
-⊝-
-⊝-
-⊝-
-⊝-
  ✓
-⊝-
profile([label])Запускает Javascript-профайлер, потом указывает результаты под именованием «label».
  ✓
  ✓
(devtools)
✓ (10+)
-⊝-
  ✓
-⊝-
profileEnd()Выключает Javascript-профайлер.
  ✓
  ✓
(devtools)
✓ (10+)
-⊝-
  ✓
-⊝-
table(data[, columns])Двумерные табличные данные — в формате таблицы. 1-ый столбец двумерного массива будет его индексом (от 0). Data — массив либо объект (либо объект из объектов, объект из массивов), каждый элемент которого будет строчкой в таблице. Либо, раз это — объект, 1-ый столбец будет состоять из ключей объекта. Пример из Firefox (объект объектов):

Columns — доп массив заглавий колонок для заголовков таблицы, раз строчки сделаны из массивов, а мы не желаем, чтоб наименованиями были числовые индексы. Ниже — что было бы из массива массивов без параметра columns: Выше — был пример результата (Firefox), приобретенного либо из именованных колонок, либо из объекта объектов.

  ✓
  ✓
✓ (34.0+)
-⊝-
-⊝-
-⊝-
-⊝-
time(label)Включает счётчик (миллисекунд) под именованием label.
  ✓

✓ (10+)
✓ (11+)
  ✓
✓ (4+)
  ±
timeEnd(label)Останавливает счётчик (миллисекунд) под именованием label и публикует итог под сиим именованием. Пример (Хром):

  ✓
  ✓
✓ (10+)
✓ (11+)
  ✓
✓ (4+)
  ±
Пример (Firebug): timeStamp([label])Отрисовыввает метки времени на диаграмме таймингов скрипта, что дозволяет смотреть за динамикой поведения программы.

  ✓
  ✓
-⊝-
-⊝-
-⊝-
-⊝-
-⊝-
Пример в Safari (в боковой панели), в Хроме (в консоли): trace()Указывает стек трассировки функции на данный момент выполнения (то же, что традиционно показывается при остановке на месте ошибки).

В Firefox:

  ✓
  ✓
✓ (10+)
✓ (11+)
  ✓
✓ (7.0.1+)
± …
Поддерживаются паттерны (описаны в .log()). warn(object[, object, …])Подобна .log() и .info(), но оформляется в ином дизайне, для различения типов сообщений.
  ✓
  ✓
  ✓
  ✓
  ✓
  ✓
  ✓
Равносилен установке точки останова (breakpoint) в отладчике. debugger;Останавливает выполнение Javascript на текущей строке. Не считая остановки, никак не отражается на исполняемой програмке.
  (оператор)
  ✓
  ✓
  ✓
  ✓
  ✓
  ✓
  ✓
throw new Error('mesasge');Останавливает выполнение Javascript на текущей строке, прерывая выполнение. (Поддерживается всеми средами выполнения Javascript.)
Chrome
Firebug
Firefox
IE
Node.js
Safari
Opera

• Console API Reference for Chrome
• Console API in Firebug
• Console object (MDN)
• Console object in IE10 (MSDN)
• in Node.js v0.12.0
• … in Safari Web Inspector Guide
• Console in Opera Dragonfly

• Используем console на полную
• Продвинутая JavaScript отладка при помощи console.table()
• Релиз Firebug 1.6 (console.table)
• Using the F12 Tools Console to View Errors and Status (MSDN)
• … + much more – Firefox Developer Tools Episode 31 — console stack traces, styled console logs в Fx31.

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

(Корень описания — британский вариант, но до него нужно довести до свойства разметку таблицы на Гитхабе). UPD: для того, чтоб каждый мог доводить до совершенства это описание, перевести его на иной язык, внести обновления по мере развития браузеров, код выложен на Гитхаб и заложены базы мультиязычности и способности дописывания в эту табличку собственного спойлера (спойлеры в статье, естественно, привязаны к веб-сайту публикации). habrahabr.ru