html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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


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') и т.п.
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

1

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • habrahabr.ru
          • домен habrahabr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции