0,0
рейтинг
30 июля 2013 в 11:02

Разработка → FireBug* Console API

Введение


Firebug добавляет глобальную переменную с именем «console» к каждой веб-странице, загруженной в Firefox. Этот объект содержит много методов, которые возволят Вам писать на консоль Firebug и показывать информацию, проходящую через скрипты.
firebug.ru

К нашему счастью, не только firebug обладает данным функционалом:
  • Chrome Javascript console — практически точный аналог
  • Opera Dragonfly console — функционал реализован частично
  • Firefox Web console — функционал реализован частично

Эта статья — мануал по Console API.
Примеры даны из chromeChrome 28.0.1500.72 m, firebugFirebug 1.11.3, firefoxFirefox 22.0, operaOpera 12.15 (версия до ухода с presto)

Содержание




Мануал


console.log(object[, object, ...])

chrome+ firebug+ firefox± opera±
Выводит переданные аргументы сообщением в консоль. Если задано больше одного агрумента — при выводе разделяет их пробелом.
Это самый часто используемый метод объекта console.
Пример
var a = 'один аргумент';
console.log(a);
console.log('много аргументов', 12, true, [1,2,3], {a:1,b:2});
console.log('Node', document.getElementsByTagName('body'));
console.log('DOM', document);
console.log('функция', alert);
console.log('прочее', NaN, null, undefined);
Скриншоты
chromeChrome -> firebugFirebug -> firefoxFirefox -> operaOpera
console.log

Во всех приведённых реализациях консоли есть возможность по клику просмотреть структуру сложных элементов, таких как массивы, объекты, DOM элементы и т.п.

Существует особый случай использования console.log с несколькими аргументами.
Первый аргумент может содержать паттерны подстановки как в printf(), но их значительно меньше чем в реализации этой функции на C, PHP etc.
chrome± firebug± firefox± opera
Паттерн Описание
%s Строка.
%d или %i Число.
%f Число с плавающей точкой.
Официальная документация Firebug нагло врёт "(numeric formatting is not yet supported)" — не верьте ей
%o DOM элемент
Firebug выводит как ссылку на элемент.
Chrome кроме ссылки, ещё умеет отображать этот элемент в самой консоли. В текущей версии 28.0.1500.72 m есть баг(?) — каждый раз обновляя страницу, консоль DOM поочерёдно выводится то как DOM, то как Javascript объект.
Firefox по клику, открывает элемент в модальном окне. (в нём доступны все аттрибуты и методы этого объекта).
%O Объект JavaScript.
Не поддерживается в Firefox.
Chrome в случае, когда в %O попадает не просто объект, а DOM — преобразует его в js объект (доступны все методы и аттрибуты).
Firebug не отличает %o от %O.
%c css стиль (color,background,font).
Не поддерживается в Firefox.
Пример
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]);
Скриншоты
console.log patterns

комментарий от StreetStrider
Суть в том, что объект console может быть реализован по-разному в разных средах. В некоторых случаях объект реализуется с полноправными, хоть и нативными функциями, то есть если попробовать вывести console.log.toString(); мы получим вместо исходного кода функции [native code]. В некоторых средах, насколько я понял, этот объект просто предоставляет штуки, которые можно вызывать с круглыми скобками, но они не являются полноправными функциями: их нельзя вызвать с call / apply / bind. Из примеров: отладчик Хрома и отладчик ИЕ.
Основной минус:
Пусть есть EventEmitter и мы хотим прологировать его активации. Для этого достаточно подписать какой-нибудь логгер на него, например console.log.
object.on('event', console.log);

То есть будет вызван console.log со всеми параметрами, с которыми вызывается любой коллбек на этом эмиттере. Можно заменить это на console.dir, тогда в некоторых средах (Node.js) будет более подробный вывод первого параметра. В любом случае, если console.log, console.dir не будут функциями, то их нельзя будет вызвать, придётся писать обвязку. Причём в случае console.log обвязка будет неполноценная: мы не сможем передать все параметры, потому что мы не можем сделать apply.

function log (a1, a2, a3) {
   console.log(a1, a2, a3); // нельзя использовать arguments, потому что нельзя сделать apply
}

А разгадка одна — безблагодатность.
В общем, функции должны быть функциями.


console.assert(expression[, object, ...])

chrome+ firebug+ firefoxopera±
Если выражение expression ошибочно — выводит console.error, в противном случае, ничего не выводит ничего.
Об отличиях throw new Error() от console.error() более подробно в console.error
Если после выражения указанны ещё аргументы, то:
  • Chrome — выводит их через пробел.
  • Firebug — выводит дополнительно массив всех оставшихся элементов.

В Opera — если expression == false — срабатывает как console.log, в противном случае не выводит ничего.
Пример
console.assert(2>1);
console.assert(1>2);
console.assert(2>1,'выражение истинно');
console.assert(1>2,'выражение ложно');
console.assert(1>2,'выражение','ложно');
console.assert(1>2,'провека паттернов: [%s]','провалена');
console.assert(1>2,'много','аргументов',1,2,3,{a:1});
Скриншоты
console.assert


console.clear()

chrome+ firebug+ firefox+ opera+
Очищает консоль. Примеров не будет.

console.count([object])

chrome± firebug+ firefoxopera±
Выводит, сколько раз данный код был выполнен. Если необязательный аргумент object передан, то перед значением счётчика, выводится object.toString()**.
У всех реализаций есть свои особенности:
  • Chrome — объединяет несколько console.count с одинаковым результатом object.toString().
  • Firebug — не выводит отдельно несколько console.count, если они в цикле.
  • Opera — игнорирует сложные объекты вместо приведения их к строковому значению.
    Не выводит ссылку на строку, с текущим обращением к console.
Я не считаю реализацию от Chrome неточной, пусть и поставил ей ±. Просто взгляд программистов google на эту функцию отличается от программистов firebug.
Пример
console.count();
console.count(); // уже другой счётчик
console.count('первый');
console.count('первый'); // тот же счётчик только для Chrome
console.count('много','разных','аргументов');
console.count(document);
for (i=0;i<2;i++) console.count(); // один и тот же счётчик
for (i=0;i<2;i++) console.count('второй'); // один и тот же счётчик
Скриншоты
console.count


console.debug(object[, object, ...])

chrome± firebug± firefox± opera±
Алиас на console.log.
Существует для совместимости с древней версией Console API, в которой console.debug отличался от console.log тем, что выводил дополнительно ссылку на строку, в которой произошёл вызов console. В текущей реализации API console.log делает то же самое.
В Chrome — выводит текст синим (в console.log текст выводится тёмносерым).
Пример
var a = 'один аргумент';
console.debug(a);
console.debug('много аргументов', 12, true, [1,2,3], {a:1,b:2});
console.debug('Node', document.getElementsByTagName('body'));
console.debug('DOM', document);
console.debug('функция', alert);
console.debug('прочее', NaN, null, undefined);
console.debug('У Пети было %d %s',10,'яблок');
Скриншоты
console.debug


console.dir(object)

chrome± firebug± firefox± opera+
Выводит переданное значение как Javascript-объект (для DOM элементов — выводяться все их аттрибуты и методы).
Похожим образом работает %O в console.log в Chrome.
Как и в случае с console.count — у всех свой подход в реализации данного метода API:
  • Chrome — простые аргументы, у которох нету ни методов ни аттрибутов, выводит всё-равно как объекты.
  • Firebug — игнорирует все простые типы аргументов (String, Number, Boolean).
    Вывод такой же как во вкладке DOM.
    Не выводит ссылку на строку, с текущим обращением к console.
  • Firefox — работает аналогично Chrome.
    Вывод такой же как в модальных окнах.
  • Opera — может принимать более 1 аргумента.
    Простые аргументы выводит аналогично console.log.
    При выводе разделяет методы и аттрибуты на классы родители и прародители (заметно при выводе [1,2] и {a:1}).
Пример
console.dir('простой элемент');
console.dir([1,2]);
console.dir({a:1});
console.dir([1,2],{a:1});
console.dir(document);
Скриншоты
console.dir


console.dirxml(object)

chrome± firebug± firefoxopera±
Выводит XML код элемента.
  • Chrome — работает идентично console.log с паттерном %o глючит так же (:
  • Firebug — на все элементы кроме DOM выводит <>\n</>.
  • Opera — если аргументы — объекты, но не DOM — выводит их тип и ссылку на текущую строку в коде.
    В версии 12.15 при получении 2-х и более непростых объектов (например два массива, или объект и массив) — виснет движок dragonfly, из-за чего его приходится перезапускать.
Пример
console.dirxml('простой элемент');
console.dirxml([1,2]);
console.dirxml({a:1});
console.dirxml(document);
console.dirxml([1,2],{a:1});
Скриншоты
console.dirxml


console.error(object)

chrome+ firebug± firefox± opera±
Выводит ошибку и результат console.trace для места, откуда она была вызвана.
! Поддерживаются паттерны как в console.log.
Различия в реализациях:
  • Chrome — не выводит ничего, если не было переданно ни одного аргумента.
    Игнорирует message у ошибки (если передавать объект типа Error).
  • Firebug — результат console.trace и код, вызвавший error, выведет только в случае, если передан ровно 1 аргумент.
  • Firefox — вывод отличается от console.log только небольшим крестиком слева. Не выводит console.trace.
  • Opera — вывод всего, что не является объектом типа Error и его подклассов, отличается от console.log только красным цветом текста. Не выводит console.trace.
    Объекты типа Error и его подклассов в свою очередь выводятся весьма подробно.
    В версии 12.15 при попытке вывести console.error без аргументов — он не выводится, но выводится ссылка на строку справа, которая сбивает ссылку следующей строки вбок.

! Важно знать:
  • throw new Error('mesasge') — останавливает выполнение JavaScript-кода.
  • console.error('message') — просто выводит сообщение об ошибке, не прерывая работу остального кода.
Пример
console.error(); // без аргументов
console.error('ошибка с комментарием');
console.error('много аргументов', 12, true, [1,2,3], {a:1,b:2});
console.error('У Пети было %d %s',10,'яблок');
(function firstlevel () {
    (function secondlevel () {
        (function lastlevel () {
            console.error('проверка стэка');
        })();
    })();
})();
console.error(new Error('настоящая ошибка')); //  настоящая ошибка
Скриншоты
console.error


console.exception(error-object[, object, ...])

chromefirebug± firefoxopera±
Выводит ошибку и результат trace() для места, откуда она была вызвана.
Один из самых неоднозначных методов:
  • Firebug — в отличие от console.error, функционально далёк от console.log. Не поддерживает паттерны, все аргументы кроме первого выводит в следующий строке одним массивом.
    В случае, когда аргументов не передано — вместо message выводит «Ошибка в утверждении».
  • Opera — из-за попыток реализовать трассировку — выводит всё вразнобой. В остальном работает как console.error.
Пример
console.exception(); // без аргументов
console.exception('ошибка с комментарием');
console.exception('много аргументов', 12, true, [1,2,3], {a:1,b:2});
console.exception('У Пети было %d %s',10,'яблок');
(function firstlevel () {
    (function secondlevel () {
        (function lastlevel () {
            console.exception('проверка стэка');
        })();
    })();
})();
console.exception(new Error('настоящая ошибка')); //  настоящая ошибка
Скриншоты
console.exception



console.group(object[, object, ...])

chrome+ firebug+ firefox± opera+
Открывает новую развёрнутую группу записей в консоли.
! Поддерживаются паттерны как в console.log
В Firefox — группы нельзя свернуть или развернуть.

console.groupCollapsed(object[, object, ...])

chrome+ firebug+ firefoxopera+
Открывает новую группу сразу свёрнутой.
в Firefox — создаёт развёрнутую группу.

console.groupEnd()

chrome+ firebug+ firefox+ opera+
Закрывает открытую группу.

Пример
console.log('Текст вне групп');
console.group(); // без аргументов
    console.log('Текст в безымянной группе');
    console.group('первая группа', 'со', 'множеством', 'аргументов', 12, true, [1,2,3], {a:1,b:2});
        console.log('Текст в первой группе');
        console.group('вторая %cгруппа', 'color: red;');
            console.log('Текст во второй группе');
            console.groupCollapsed('третяя группа');
                console.log('Текст в третьей группе');
            console.groupEnd();
            console.log('Текст во второй группе');
        console.groupEnd();
        console.log('Текст в первой группе');
Скриншоты
console.group


console.info(object[, object, ...])

chrome± firebug+ firefox+ opera+
Выводит log с небольшими визуальными изменениями.
! Поддерживаются паттерны как в console.log
  • Chrome — без изменений. Почему в debug, а не тут строки выводяться синим цветом? Because fuck you, that's why!
  • Firebug — ставит иконку с синим восклицательным знаком слева от вывода, подсвечивает строку синим.
  • Firefox — ставит иконку с восклицательным знаком в круге слева от вывода.
  • Opera — сообщение выводится синим текстом.
Пример
var a = 'один аргумент';
console.info(a);
console.info('много аргументов', 12, true, [1,2,3], {a:1,b:2});
console.info('Node', document.getElementsByTagName('body'));
console.info('DOM', document);
console.info('функция', alert);
console.info('прочее', NaN, null, undefined);
console.info('У Пети было %d %s',10,'яблок');
Скриншоты
console.info



console.profile([title])

chrome+ firebug+ firefoxopera
Включает Javascript-профайлер.
Профилирование кода помогает отследить, какая его часть выполняется дольше всего. Полезный инструмент при отладке.

console.profileEnd()

chrome+ firebug+ firefoxopera
Выключает Javascript-профайлер

  • Chrome — выводит 2 сообщения, во втором — ссылка на профиль.
  • Firebug — профиль отображается прямо в консоли.
  • Firefox — движок профилирования есть, но не поддерживается данный метод console.
  • Opera — выводит сообщение о том, что поддержка ещё не реализована.
Пример
console.profile();
(function someFunction() {
  for (i=0;i<10000000;i++) {var s='a'; s+='a'; delete s;}
})()
console.profileEnd();
console.profile("мой профиль");
(function someFunction() {
  for (i=0;i<10000000;i++) {var s='a'; s+='a'; delete s;}
})()
console.profileEnd();
Скриншоты
console.profile


console.table(data[, columns])

chrome± firebug+ firefoxopera
Выводит таблицу.
В data ожидается массив или array-like объект.
Необязательный аргумент columns используется для того, чтобы задать имена колонкам таблицы, а также для гибкого контроля вывода array-like объекта.
(Этот функционал достоен отдельной статьи. За подробностями, идите туда, куда вас посылает официальная документация.)
Chrome не умеет выводить непростые значения, подставляя вместо них такой текст как «Array[3]», Object и т.п.
Пример
var table = [];
table[0] = [1,'2',[1,2,3]];
table[1] = [document,document.getElementsByTagName('body'),window];
table[2] = [{a:1},null,alert];
console.table(table);

function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
}
var family = {};
family.mother = new Person("Ольга", "Иванова", 32);
family.father = new Person("Иван", "Иванов", 33);
family.daughter = new Person("Дарья", "Иванова", 5);
family.son = new Person("Олег", "Иванов", 8);
console.table(family);
Скриншоты
console.table



console.time(name)

chrome± firebug± firefox± opera±
Создаёт новый таймер и привязывает его к name. При этом к name применяется toString()**.
  • Chrome — выбрасывает ошибку, если не было передано ни одного аргумента.
  • Firebug — выбрасывает ошибку, если не было передано ни одного аргумента.
  • Firefox — игнорирует вызовы без аргументов.
  • Opera — игнорирует вызовы без аргументов.
    В версии 12.15 прекращается вывод в консоль, без выбрасывания ошибки, в случаях, когда было переданно несколько элементов, или в качестве аргумента DOM-объект.


console.timeEnd(name)

chrome± firebug± firefox± opera±
Останавливает таймер, привязанный к name.toString() и выводит в консоль количество прошедшего времени спасибо mithgol за поправку.

console.timeStamp(name)

chromefirebug± firefoxopera
Выводит текущий timestamp с текстом, который был передан в name.
Opera выбрасывает ошибку, если натыкается на строку с console.timeStamp(); Chrome и Firefox — их просто игнорируют.

Пример
console.timeStamp();
console.time('мой таймер');
(function someFunction() {for (i=0;i<1000000;i++) {var s='a'; s+='a'; delete s;}})()
console.time('мой второй таймер');
(function someFunction() {for (i=0;i<1000000;i++) {var s='a'; s+='a'; delete s;}})()
console.timeEnd('мой второй таймер');
(function someFunction() {for (i=0;i<1000000;i++) {var s='a'; s+='a'; delete s;}})()
console.timeEnd('мой таймер');
console.timeStamp('второй таймстамп');
console.time(12);
(function someFunction() {for (i=0;i<1000000;i++) {var s='a'; s+='a'; delete s;}})()
console.timeEnd(12);
console.time(document.getElementsByTagName('script'));
(function someFunction() {for (i=0;i<1000000;i++) {var s='a'; s+='a'; delete s;}})()
console.timeEnd(document.getElementsByTagName('body'));
console.time(1,2,3); // много аргументов
(function someFunction() {for (i=0;i<1000000;i++) {var s='a'; s+='a'; delete s;}})()
console.timeEnd(1,3,2);
console.time(); // без аргумента
(function someFunction() {for (i=0;i<1000000;i++) {var s='a'; s+='a'; delete s;}})()
console.timeEnd();
console.timeStamp('последний таймстамп');
Для тестов Opera строки с timeStamp пришлось закомментировать.
Скриншоты
console.time


console.trace()

chrome+ firebug+ firefox± opera±
Выводит стек вызовов приведший к выполнению этого кода (он так же выводиться при сообщениях об ошибке).
Не принимает никаких аргументов.
  • Firefox — вместо стека выводит ссылку на строку где код был вызван + название вызвавшей его функции.
  • Opera — выводит весьма странным образом.

Пример
console.trace();
(function firstlevel () {
    (function secondlevel () {
        (function lastlevel () {
            console.trace('проверка стэка');
        })();
    })();
})();

Скриншоты
console.trace



console.warn(object[, object, ...])

chrome+ firebug+ firefox+ opera+
Как и console.info, выводит console.log с небольшими визуальными изменениями.
! Поддерживаются паттерны как в console.log
  • Chrome — ставит иконку с восклицательным знаком слева от вывода.
  • Firebug — ставит иконку с жёлтым восклицательным знаком слева от вывода, подсвечивает строку жёлтым.
  • Firefox — ставит иконку с восклицательным знаком в треугольнике слева от вывода.
  • Opera — сообщение выводится оранжевым текстом.
Пример
var a = 'один аргумент';
console.info(a);
console.info('много аргументов', 12, true, [1,2,3], {a:1,b:2});
console.info('Node', document.getElementsByTagName('body'));
console.info('DOM', document);
console.info('функция', alert);
console.info('прочее', NaN, null, undefined);
console.info('У Пети было %d %s',10,'яблок');
Скриншоты
console.warn


Заключение


Console — очень мощный и полезный инструмент для веб-разработчика. Советую запомнить хотя бы основные тезисы:
  • console.log можно форматировать!
  • Существует не только console.log, но также console.warn и console.info. Грамотный выбор одного из этих методов будет весьма приятной мелочью, повышающей удовольствие от работы с вашим кодом.
  • Иногда безопаснее отловить ошибку и поместить её в объект, который уже передавать через console.error (с комментариями), чем выбрасывать её напрямую в стек.
  • Не забывайте про группы! Они очень удобны. Например, можно вызывать console.groupCollapsed с несколькими console.info/console.log после — если надо просто вывести какую-то статистику. И console.group с несколькими console.warn/console.error — если возникла ошибка.
  • Используйте console.profile, а там, где это невозможно, console.time — для оптимизации своего кода.


Полезные ссылки




  *  Скорее «Common Console API» потому что некоторые методы Firebug поддерживает хуже чем Chrome.
**  При этом из-за toString метод не отличает вызовы с аргументом document.getElementsByTagName('script') от вызовов с document.getElementsByTagName('body') и т.п.
Кунцевич Андрей @titulusdesiderio
карма
28,0
рейтинг 0,0
JS-dev | IT-specialist
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (23)

  • +4
    Не успел добавить это в статью. Но так даже лучше, все сайты который нагло копируют контент с хабрабахабра не получат эту мелочь:
    Firebug, в отличае от Chrome не понимает символа перевода строки "\n", который идёт сразу после паттерна в console.log.
    Пример
    console.log('%s\n%s','первая','вторая');
    console.log('%s \n%s','первая','вторая');
    Скриншоты
    new line
  • +3
    Прибавлю: console.timeEnd() не просто останавливает указанный таймер, но и выводит в консоль количество прошедшего времени (в миллисекундах).
    • +1
      Спасибо. Добавил в статью.
  • +1
    Интересный материал, всегда использовал только «console.log», не знал о таких возможностях, спасибо!
    • 0
      3 недели назад я тоже о них не знал (:
      Статью написал как раз по той причине, что в интернете нету толкового мануала. Так что я сам буду сюда подглядывать ещё не раз.
      Рад что и вам она оказалась полезной.
      • 0
        На самом деле, в отдельно взятой части интернета это всё есть:
        habrahabr.ru/post/114483/
        habrahabr.ru/post/50445/
        , но Ваш сборник хорошо систематизирован и будет очень полезен.
        Отдельно можно упомянуть о модификаторах вывода консоли:
        habrahabr.ru/post/116852/
        ещё ряд, отыскивается поиском,
        удалённая консоль: jsconsole.com/
        Небольшой код:
        var wcl = function(a){ a = a!==undefined ? a :''; //консоль как метод строки или функция
        	if(window.console && settings.erLevel <=2)
                Function.prototype.apply.call(console.log, console, this instanceof String
        			? ["'=="+ this +"'"].concat([].slice.call(arguments))
        			: arguments);
            if(cons0 && settings.erLevel <=2){
                cons.innerHTML += (this instanceof String
                		? ["<i class=consLog>'=="+ this +"'</i>"].concat([].slice.call(arguments))
                		: [].slice.call(arguments)
                    ).join('<i class=consDelim>/ </i>') +'<br>';
            	cons.scrollTop = Math.max(0, cons.scrollHeight - 700);
            }
        };
        String.prototype.wcl = wcl;
        //(позволяет писать ''.wcl(список для вывода); и выводить в консоль или плавающий див, если в браузере нет консоли)
        
  • 0
    Как дела с поддержкой всех прелестей в IE?
  • 0
    Почему нет упоминания об Internet Explorer? В нем тоже потихоньку развивается console.
    • 0
      Под рукой только winXP, а в ней нету поддержки IE 9 и 10. А тестировать в IE8 уже не вижу особого смысла. Примеры с Opera dragonfly тут только от большого уважения к данной компании.

      З.Ы. По поводу IE, на хабре как-то публиковался обзор расширения, добавляющего более менее вменяемую поддержку console API в него.
  • 0
    А в Safari что с этим?
    • 0
      Тоже не имею возможности проверить. Но если я правильно понимаю, то в нём тот же WebDev Tools что и в Chrome
      • 0
        Тогда это уже самому. В Safari другие WebDev Tools, они отличаются от тех что в Chrome и других Webkit (фирменные Apple).
        • 0
          пробуйте в своё удовольствие

          весь код из примеров
          var a = 'один аргумент';
          console.log(a);
          console.log('много аргументов', 12, true, [1,2,3], {a:1,b:2});
          console.log('Node', document.getElementsByTagName('body'));
          console.log('DOM', document);
          console.log('функция', alert);
          console.log('прочее', NaN, null, undefined);
          
          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]);
          
          console.assert(2>1);
          console.assert(1>2);
          console.assert(2>1,'выражение истинно');
          console.assert(1>2,'выражение ложно');
          console.assert(1>2,'выражение','ложно');
          console.assert(1>2,'провека паттернов: [%s]','провалена');
          console.assert(1>2,'много','аргументов',1,2,3,{a:1});
          
          console.count();
          console.count(); // уже другой счётчик
          console.count('первый');
          console.count('первый'); // тот же счётчик только для Chrome
          console.count('много','разных','аргументов');
          console.count(document);
          for (i=0;i<2;i++) console.count(); // один и тот же счётчик
          for (i=0;i<2;i++) console.count('второй'); // один и тот же счётчик
          
          var a = 'один аргумент';
          console.debug(a);
          console.debug('много аргументов', 12, true, [1,2,3], {a:1,b:2});
          console.debug('Node', document.getElementsByTagName('body'));
          console.debug('DOM', document);
          console.debug('функция', alert);
          console.debug('прочее', NaN, null, undefined);
          console.debug('У Пети было %d %s',10,'яблок');
          
          console.dir('простой элемент');
          console.dir([1,2]);
          console.dir({a:1});
          console.dir([1,2],{a:1});
          console.dir(document);
          
          console.dirxml('простой элемент');
          console.dirxml([1,2]);
          console.dirxml({a:1});
          console.dirxml(document);
          console.dirxml([1,2],{a:1});
          
          
          console.error(); // без аргументов
          console.error('ошибка с комментарием');
          console.error('много аргументов', 12, true, [1,2,3], {a:1,b:2});
          console.error('У Пети было %d %s',10,'яблок');
          (function firstlevel () {
              (function secondlevel () {
                  (function lastlevel () {
                      console.error('проверка стэка');
                  })();
              })();
          })();
          console.error(new Error('настоящая ошибка')); //  настоящая ошибка
          
          console.exception(); // без аргументов
          console.exception('ошибка с комментарием');
          console.exception('много аргументов', 12, true, [1,2,3], {a:1,b:2});
          console.exception('У Пети было %d %s',10,'яблок');
          (function firstlevel () {
              (function secondlevel () {
                  (function lastlevel () {
                      console.exception('проверка стэка');
                  })();
              })();
          })();
          console.exception(new Error('настоящая ошибка')); //  настоящая ошибка
          
          console.log('Текст вне групп');
          console.group(); // без аргументов
              console.log('Текст в безымянной группе');
              console.group('первая группа', 'со', 'множеством', 'аргументов', 12, true, [1,2,3], {a:1,b:2});
                  console.log('Текст в первой группе');
                  console.group('вторая %cгруппа', 'color: red;');
                      console.log('Текст во второй группе');
                      console.groupCollapsed('третяя группа');
                          console.log('Текст в третьей группе');
                      console.groupEnd();
                      console.log('Текст во второй группе');
                  console.groupEnd();
                  console.log('Текст в первой группе');
          
          var a = 'один аргумент';
          console.info(a);
          console.info('много аргументов', 12, true, [1,2,3], {a:1,b:2});
          console.info('Node', document.getElementsByTagName('body'));
          console.info('DOM', document);
          console.info('функция', alert);
          console.info('прочее', NaN, null, undefined);
          console.info('У Пети было %d %s',10,'яблок');
          
          console.profile();
          (function someFunction() {
            for (i=0;i<10000000;i++) {var s='a'; s+='a'; delete s;}
          })()
          console.profileEnd();
          console.profile("мой профиль");
          (function someFunction() {
            for (i=0;i<10000000;i++) {var s='a'; s+='a'; delete s;}
          })()
          console.profileEnd();
          
          var table = [];
          table[0] = [1,'2',[1,2,3]];
          table[1] = [document,document.getElementsByTagName('body'),window];
          table[2] = [{a:1},null,alert];
          console.table(table);
          
          function Person(firstName, lastName, age) {
              this.firstName = firstName;
              this.lastName = lastName;
              this.age = age;
          }
          var family = {};
          family.mother = new Person("Ольга", "Иванова", 32);
          family.father = new Person("Иван", "Иванов", 33);
          family.daughter = new Person("Дарья", "Иванова", 5);
          family.son = new Person("Олег", "Иванов", 8);
          console.table(family);
          
          console.timeStamp();
          console.time('мой таймер');
          (function someFunction() {for (i=0;i<1000000;i++) {var s='a'; s+='a'; delete s;}})()
          console.time('мой второй таймер');
          (function someFunction() {for (i=0;i<1000000;i++) {var s='a'; s+='a'; delete s;}})()
          console.timeEnd('мой второй таймер');
          (function someFunction() {for (i=0;i<1000000;i++) {var s='a'; s+='a'; delete s;}})()
          console.timeEnd('мой таймер');
          console.timeStamp('второй таймстамп');
          console.time(12);
          (function someFunction() {for (i=0;i<1000000;i++) {var s='a'; s+='a'; delete s;}})()
          console.timeEnd(12);
          console.time(document.getElementsByTagName('script'));
          (function someFunction() {for (i=0;i<1000000;i++) {var s='a'; s+='a'; delete s;}})()
          console.timeEnd(document.getElementsByTagName('body'));
          console.time(1,2,3); // много аргументов
          (function someFunction() {for (i=0;i<1000000;i++) {var s='a'; s+='a'; delete s;}})()
          console.timeEnd(1,3,2);
          console.time(); // без аргумента
          (function someFunction() {for (i=0;i<1000000;i++) {var s='a'; s+='a'; delete s;}})()
          console.timeEnd();
          console.timeStamp('последний таймстамп');
          
          console.trace();
          (function firstlevel () {
              (function secondlevel () {
                  (function lastlevel () {
                      console.trace('проверка стэка');
                  })();
              })();
          })();
          
          var a = 'один аргумент';
          console.warn(a);
          console.warn('много аргументов', 12, true, [1,2,3], {a:1,b:2});
          console.warn('Node', document.getElementsByTagName('body'));
          console.warn('DOM', document);
          console.warn('функция', alert);
          console.warn('прочее', NaN, null, undefined);
          console.warn('У Пети было %d %s',10,'яблок');
          
          console.log('%s\n%s','первая','вторая');
          console.log('%s \n%s','первая','вторая');
          
  • +2
    Монументальненько. Сколько ж сил ушло на то, чтобы все эти скриншоты (спрятанные за два клика) сделать…
  • 0
    Благодаря Vendict узнал, что после 12.15 вышла ещё одна последняя версия на presto — 12.16
    Но исходя из changelog никаких изменений в Dragonfly не было. Так что все примеры с Opera так же актуальны.
  • 0
    Это очень круто, спасибо.
  • 0
    Единственное что не понятно, почему апи консоли без событий?

    Очень пригодилось бы для селениум тестов отлавливать, если warn, например, проскакивает.
  • 0
    console.log — у вас там стоит плюс для Хрома, но я бы поставил плюс-минус. Для меня важно, чтобы эти примитивы консоли также были полноправными функциями, потому что это удобно при отладке: я могу передавать .log, .warn, .info, .dir в качестве коллбека без необходимости писать (если вдуматься, то абсолютно бессмысленную) обвязку в духе:
    function log (...)
    {
       console.log(...);
    }
    

    В Хроме же я получаю Illegal invocation при попытке сделать call / apply на примитивах консоли. В Фаирфоксе (и Баге) же эти полноправные функции можно вызывать даже в отвязке от объекта console.

    Мне этот небольшой недостаток Хрома периодически припекает, и, кстати, является одной из ряда мелких причин почему я предпочитаю Фаирбаг, несмотря на всю его тормознутость.
    • 0
      Весьма дельное замечание! Если опишете подробнее с примерами — добавлю в статью, думаю такая информация может пригодиться.
      • 0
        Собственно, я уже описал то, что хотел. Суть в том, что объект console может быть реализован по-разному в разных средах. В некоторых случаях объект реализуется с полноправными, хоть и нативными функциями, то есть если попробовать вывести console.log.toString(); мы получим вместо исходного кода функции [native code]. В некоторых средах, насколько я понял, этот объект просто предоставляет штуки, которые можно вызывать с круглыми скобками, но они не являются полноправными функциями: их нельзя вызвать с call / apply / bind. Из примеров: отладчик Хрома и отладчик ИЕ.
        Основной минус:
        Пусть есть EventEmitter и мы хотим прологировать его активации. Для этого достаточно подписать какой-нибудь логгер на него, например console.log.
        object.on('event', console.log);
        

        То есть будет вызван console.log со всеми параметрами, с которыми вызывается любой коллбек на этом эмиттере. Можно заменить это на console.dir, тогда в некоторых средах (Node.js) будет более подробный вывод первого параметра. В любом случае, если console.log, console.dir не будут функциями, то их нельзя будет вызвать, придётся писать обвязку. Причём в случае console.log обвязка будет неполноценная: мы не сможем передать все параметры, потому что мы не можем сделать apply.
        function log (a1, a2, a3) {
           console.log(a1, a2, a3); // нельзя использовать arguments, потому что нельзя сделать apply
        }
        

        А разгадка одна — безблагодатность.
        В общем, функции должны быть функциями.
        • 0
          Добавил в пост.
  • 0
    console.clear() в firefox developer tools это заглушка, она ничего ничего не делает, консоль не очищается.
    • 0
      На момент написания статьи в firefox developer работало. Так или иначе спасибо за комментарий.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.