Firebug: Part 1 — console

    Данной статей я хочу начать серию, посвященную всеми любимому Add-on к Firefox под названием Firebug.

    Весь цикл: Console, Commands, Debugging ,Profiling

    Я постараюсь раскрыть известные и не очень его возможности, которые могут пригодиться любому Web-разработчику(а могут и не пригодиться, но это врядли).

    Если у вас его еще нету, то можно скачать со страницы http://getfirebug.com.



    Все примеры выполнялись на странице http://getfirebug.com/index.html, поэтому вы можете пройти за мной все проверить.

    Начнем с простого:
    Вывод в консоль строки 'Hello World!'.
    console.log('Hello World!');


    Вывод в консоль строки содержащейся в переменной data.
    Преимущество данной функции в том, что она показывает справа файл и строку из которой была вызвана.
    data = $$('.bigPara')[0].firstChild.data;
    console.debug('текст внутри элемента ".bigPara" = %s', data);


    Если вы хотите «разукрасить» консоль, то следующие 3 функции для вас:
    Вывод в консоль общего количества ссылок:
    (используется для информационных сообщений)
    links = $$('a');
    console.info('общее число ссылок на странице = %i', links.length);


    Вывод в консоль дробного числа:
    (в жизни может всякое пригодиться)
    console.warn('число Pi = %f', Math.PI);


    Вывод в консоль самого объекта ".bigPara", нажав на который можно увидеть все его свойства:
    (используется для сообщений об ошибках)
    console.error('объект ".bigPara" = %o', $$('.bigPara')[0].firstChild);


    Если нужно вывести сообщения группой, то можно сделать следующее:
    groupname = 'Группа 1';
    console.group(groupname);
    console.log("сообщение 1 из %s", groupname);
    console.log("сообщение 2 из %s", groupname);
    console.log("сообщение 3 из %s", groupname);
    console.groupEnd();


    Также можно заглянуть внутрь любому объекту(dir)/элементу(dirxml)
    (к сожалению их сайт скуден на объекты, поэтому сделаем свой):
    console.dir({a: 'test', b: function() {return true;}});
    console.dirxml($$('.bigPara'));


    Небольшая проверка иногда тоже не помешает:
    console.assert(1 === true);


    Иногда можно потеряться в коде и чтобы узнать все вызванные функции вставьте в нужное место:
    console.trace();


    Также можно замерять время выполнения операции:
    timeName = '100';
    console.time(timeName);
    for(var i=0;i<100;i++){
     console.log(i);
    }
    console.timeEnd(timeName);


    Статья основана на Firebug Console API и блоге Michael Sync.

    * This source code was highlighted with Source Code Highlighter.
    Поделиться публикацией

    Похожие публикации

    Комментарии 46

      +14
      То-то я думаю, зачем она нужна… Спасибо.
        +5
        Спасибо! А я имея Firebug вечно под рукой, вечно делал велосипеды для дебага объектов… Не зная про console.dir и console.dirxml…
        С нетерпением жду Part 2
          +5
          Спасибо!
          До этого пользовался лишь console.log()
            +3
            Спасибо! Не использовал вообще консоль.
            Побежал по линкам читать маны
              0
              Аналогично.
              Большое спасибо автору! С нетерпением ждём продолжения.
                0
                Всё хорошо, только на браузерах без Firebug будет JS ошибка.
                мне нравится модель FirePHP — где используются HTTP headers для передачи сообщений.
                  0
                  можно написать «обертки» на подобии

                  function log( _str ){
                  if( window.console ){
                  console.log( _str );
                  }
                  }

                    0
                    Гораздо проще в начале кода написать
                    if (!console)
                    {
                    console = {
                    log: function(){}, error: function(){}, info: function(){} ...
                    };
                    }
                      0
                      !console&&console = {}&&console.error=console.log=console.info=function () {}
                        –1
                        Зачем же заниматься некромантией, да ещё и с «выпендрёжистым» комментарием? :)

                        Да, приведённый пример короче, но имеет два недостатка:
                        а) Не очевиден и не дружелюбен для спокойных и не perl программистов;
                        б) А вдруг в одном из браузеров вдруг будет баг и пустой объект будет равен булевому false? Не так уж и маловероятно.
                          0
                          это не «выпендрёж» — так действительно быстрее и удобней. А проблем с совместимостью нет, пустой объект это не undefined, и не false и не 0.
              0
              Спасибо, ожидал от него чего то подобного, но так и не выяснил этого раньше =)
                +1
                Автор, был бы признателен, если в одной из статей вы бы описали решение возникающих аномалий в фаербаге. Например, если я пытаюсь вывести информацию из консоли, когда страница еще не прогрузилась, то возникает ошибка "Firebug cannot find firebugCommandLineAttached attribute on firebug console element, its too early for command line". Причем после полной загрузки страницы и перезагрузки эта ошибка продолжает иметь место.

                Или же очень часто во вкладке Net не отображаются загружаемые файлы. Например, наблюдал такую картину — когда перезагружаю страницу с игнорированием кеша (Ctrl+F5), то загрузка изображений не выводится, а если просто обновляю (F5), то выводятся запросы с получением 304 HTTP-ответа.

                Кто-то еще сталкивался с регулярными ошибками в Firebug?
                  0
                  Довольно часто тело ответа от сервера во вкладке Net не соответствует полученному. В Firebug'e отображается какое-то старое от подобных запросов и выяснить что происходить сложновато.
                  Замечено при использовании jQuery.AjaxForm когда в форме есть файлы, и запрос поэтому в скрытый фрейм посылается…
                    0
                    Тоже регулярная ошибка — Firebug не показывает структуру документа, если это XML, преобразованный в HTML XSLT-преобразованием. Приходится запускать XSLT-процессор и открывать уже полученный файл.
                      0
                      Столкнулся с этим на сайтах второго старкрафта и третьего дьябло. Близзарды тоже так извратились :)
                      +1
                      Поставьте себе Web Developer, там есть прекрасная вкладка Disable, в которой помимо всего прочего есть опция Disable Cache, меня она очень выручает.
                      А писать в firebug до того как страница загрузилась это издевательство над прекрасным инструментом. Он же должен DOM-дерево обработать, рассчитать загрузку ресурсов и только потом (!) прикрепить консоль. Особенности инструмента и работы в вебе, здесь имхо ничего не поделаешь.
                        0
                        Я описал поведение вкладки NET фаербага в зависимости от типа загрузки страницы, кеш тут не при чем. А когда страница грузится долго, открыта консоль, и у тебя идет жесткий дебагинг, то автоматически (даже не замечая, что страница еще вся не загрузилась) начинаешь работать с консолью.

                        Я считаю это багом, потому что если мне доступна консоль, то я должен иметь возможность в нее писать (и имею) и получать адекватный ответ (с этим проблемы).

                        Более того, я эту особенность заметил только недавно. Ранее не натыкался.
                        0
                        На вкладке скрипт периодически октлючаеся возможность добавить watch. Происходит это обычно тогда, когда оставишь выражения которые недоступны до загрузки страницы (например связанные с dom) и обновишь её несколько раз. Приходится закрывать вкладку или перезапускать ff. Появляеся не всегда.
                        0
                        Не то чтобы с ошибками сталкивался. Проблема вот какая может настичь: в IE объекта console НЕТ (и не только в IE — в FireFox тоже) — соответственно, сайт, нормально работающий у разработчика, не будет работать у клиента. Выход — либо самому конструировать заглушку для отсутствующего console, либо тщательно вычищать его из кода рабочего сайта.
                          +2
                          Ну, надо полагать, что отладочный код нужно все же «тщательно вычищать» =)
                            +1
                            Не совсем так. Общепринятая практика в обычных приложениях — отладочный код имеет систему приоритетов. При исполнении в боевом режиме выводятся только сообщения о фатальных ошибках, при исполнении в целях отладки — все сообщения. Это хорошо бы внедрять и для JavaScript программ, так как они уже бывают достаточно сложными и выполняются в очень разных условиях.
                            0
                            Это отличная замена стандартным alert. До этого только ими и пользовался и был приятно удивлен когда узнал о console.log
                            +1
                            Спасибо за статью, узнал много нового, раньше пользовался только console.log :).
                            Исправьте ошибку: везде где написано
                            $('.bigPara')
                            должно быть
                            $$('.bigPara').
                              0
                              Помимо Prototype в мире есть еще jQuery. Стоит попробовать! ;)
                                0
                                Я в курсе, что есть jQuery, mootools, dojo, prototype и еще много других хороших библиотек. Я всего лишь указал автору на его ошибку/опечатку в примере.
                                  +1
                                  лучше было бы использоваться в статье pure javascript :)
                                0
                                уже поправил
                              • НЛО прилетело и опубликовало эту надпись здесь
                                  0
                                  На самом деле автор использовал какой-то из фреймворков а-ля jQuery или prototype.js.
                                  Это пунктуация селекторов. Ноги растут оттуда.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    не все сразу, это будет в следующей части :)
                                      –4
                                      $name = ’123’;
                                      /* 123 Невероятно, но это будущее имя переменной!!! */
                                      $$name = ’456’;
                                      // а это будущее значение
                                      echo ${’123’};
                                      //без проблем выводим ’456’

                                      nikitag.habrahabr.ru/blog/50079/
                                        0
                                        А вы не путаете PHP и JavaScript?
                                          0
                                          Вот что значит, в промежутке между запарками на работе комментить…
                                          Признаю ошибку, не вчитался, мне конструкции PHP привычнее…
                                      0
                                      Захожу на сайт getfirebug
                                      включаю консоль
                                      вбиваю в ней data = $('.bigPara')[0].firstChild.data;
                                      а он мне ругается что TypeError: $(".bigPara") is null source=data = $('.bigPara')[0].firstChild.data;
                                        0
                                        я выше ответил.
                                          0
                                          С $$ тоже не выводит содержимое
                                        +1
                                        Простите, но кому удобно было читать комментарии к коду, да и сам код с таким маленьким шрифтом? Мне лично пришлось в три раза увеличить размер шрифтов на странице, чтобы не напрягать зрение.
                                          –1
                                          Спасибо за статью, узнал много интересного
                                            0
                                            Почему бы не дать ссылки на русскоязычный ресурс?
                                            firebug.ru
                                            firebug.ru/console.html
                                              0
                                              Вот это уже намного лучше. Спасибо.
                                              –1
                                              А кто в каких случаях использует консоль? просто я пока не понимаю её смысла, это отладочная информация, т.е. в рабочем проекте её не должно быть, а при отладке, если нужно что то вывести, можно в див какой то, или алерт, выводить
                                                0
                                                выводить в консоль можно не просто строку, а и объект, и потом смотреть что у него внутри.
                                                Кстати, AJAX запросы очень хорошо отлаживать именно в консоли.
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                  0
                                                  Вместо console.info, console.warn, console.error, console.dir, можно просто использовать console.log

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

                                                  Самое читаемое