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') и т.п.
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 23
    • +4
      Не успел добавить это в статью. Но так даже лучше, все сайты который нагло копируют контент с хабрабахабра не получат эту мелочь:
      Firebug, в отличае от Chrome не понимает символа перевода строки "\n", который идёт сразу после паттерна в console.log.
      Пример
      console.log('%s\n%s','первая','вторая');
      console.log('%s \n%s','первая','вторая');
      Скриншоты
      new line
      • +3
        Прибавлю: console.timeEnd() не просто останавливает указанный таймер, но и выводит в консоль количество прошедшего времени (в миллисекундах).
      • +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
                        console.clear() в firefox developer tools это заглушка, она ничего ничего не делает, консоль не очищается.
                        • 0
                          На момент написания статьи в firefox developer работало. Так или иначе спасибо за комментарий.

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