Firebug 1.3 и 1.4 alpha — что нового и интересного?

    Если вы профессиональный веб-разработчик и постоянно имеете дело с разработкой и отладкой сложных AJAX приложений, то наверняка знаете и используете Firebug — плагин для браузера Firefox, предназначенный для отладки и исследования веб-приложений. Текущая его версия, 1.2х достаточно стабильная и функциональна, чтобы помочь в 99% проблем, которые могут возникнуть при разработке. Но и этот инструмент не лишён если не недостатков, то некоторых фич, которые могли бы облегчить работу. И даже идеальный инструмент можно сделать ещё более идеальным, как бы это не звучало.

    Не так давно, если зайти на основную официальную страницу Firebug, я обнаружил там два небольших сюрприза. Первый — это бета-версия следующего поколения, версии 1.3. А второй сюрприз — разработчики думают не только о ближайшем будущем, но и ещё дальше — доступна сразу и альфа версии 1.4. А вот что там нового и интересного, мы сейчас рассмотрим.

    Firebug 1.3

    Одним из существенных изменений и дополнений этой версии является модуль Tracing. Он позволяет отслеживать все изменения в поведении как браузера, так и других плагинов, состояние кеша, отслеживать операции с CSS и DOM и многое другое. По сути это логгер (и достаточно подробный) всех событий, что происходят в браузере. Модуль очень пригодится для отладки как веб-приложений, так и компонент браузера или расширений, так как работает на более высоком уровне (или глубоком), чем просто сам Firebug. Что бы не утонуть в море сообщений, предусмотрена гибкая настройка, что именно перехватывать и отображать в логе.



    Модуль отладки JavaScript также подвергся модификациям, в частности модифицирована структура отображения исходного кода для того, чтобы более эффективно работать с большими файлами. Это хорошо, так как раньше работать с библиотеками вроде ExtJS (особенно дебаг-версией) было иногда сложно из-за торможения на таком большом коде. Остальные изменения направлены на улучшения работы дебаггера в случае работы с замыканиями (подробнее отлично описано в этой статье), что не менее важно при работе с сложными конструкциями на JavaScript.

    Вкладка, где отображаются все DOM-объекты страницы, теперь выводит список в алфавитном порядке (гм, а я даже не замечал, как оно раньше выводило-то).

    Вкладка Net, которая помогает следить за сетевой активностью приложения, теперь также существенно расширена и переделана, при этом даже не надо быть супер профессионалом, чтобы начать использовать её нововведения — она просто преобразилась на глазах и теперь это реальный инструмент для оптимизации веб-приложений. Теперь для каждого компонента у нас собирается и выводится подробнейшая статистика обработки — сколько времени занимает создание подключения к серверу, отсылка запроса, ожидание ответа сервера, передача самих данных. Кроме этого, мы можем отслеживать два главных события в «жизни» страницы — событие DOMContentLoaded сигнализирует, что все данные для формирования DOM загружены (я не уверен, но похоже это событие есть только в Firefox/Gecko), а потом уже генерируется событие onload (объект window), которое сообщает приложению, что все готово к работе. С новой панелью мы можем видеть затрачиваемое время на каждую стадию, а также временные метки каждого компонента (относительно описанных выше событий). С такой информацией мы можем производить тонкие операции по настройке и оптимизации как сервера так и клиента с целью уменьшить время отображения страницы.



    Среди остальных изменений: усовершенствования для разработчиков расширений для Firebug-а, улучшена локализация (правда, среди них пока нет русского языка) и закрыто около 40 обнаруженных ошибок.

    Отмечу, что сейчас предлагается для установки две версии — с модулем Tracing Console и без него, так что если вы не занимаетесь разработкой плагинов или не исследуете внутренности браузера, можно ставить обычную версию. Пока ещё консоль не до конца оттестирована и может вызвать зависания браузера, особенно если вы в опциях включили отслеживание множества событий.

    Firebug 1.4

    Эта версия является дальнейшим развитием версии 1.3 и, несмотря на то, что пока только альфа-версия, её уже можно использовать в реальной работе (что я и сделал). Пока разработчики заявляют, что в этой версии они делают акцент на разработчиков расширений (как для браузера, так и для самого Firebug), заявлено, что будет улучшенный CSS Explorer, улучшенный редактор для различных типов данных, чтобы корректно отображать разные передаваемые по сети данные (расширение панели Net). Хорошая новость для дизайнеров — планируется, что вносимые изменения в CSS стили можно будет сразу же сохранить назад на сервер в исходный файл.

    Полный список запланированного в 1.4 выложен в SVN-версии исходных кодов здесь, и там очень много интересного, конечно же, не все будет реализовано в этой версии, что-то станет не актуальным, однако даже если часть из описанного будет реализована, Firebug снова подтвердит звание самого мощного инструмента для отладки и исследования AJAX веб-приложений.

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 44

      +1
      Давно использую firebug, но честно говоря его возможности по отладке и просто работе с javascript'ом не всегда устраивают (торможение, сложность в работе с большими библиотеками). В своё время я пытался поставить отладчик на основе Aptana студии, которая также обещает отладку и для IE (хотя конечно можно использовать Web Developer Studio от майкрософта или офисный дебагер, но она не очень удобна). Поэтому у меня есть вопрос: у кого есть реальный опыт работы с другими инструментами, помимо firebug?
        +5
        в аптане отладчик тоже на основе фаербага.
        Небыло никогда необходимости сменить инструмент — более мощного или хоть бы схожего пока не встречал. Простите, а скакими такими библиотеками большими он не справляется то? тем более что сами либы редко надо отлаживать а только свой код на их основе.
          0
          У меня на машине любой файл с больше, чем 1000ю строк кода начинает подтормаживать несколько при прокруте и включённой подсветке синтаксиса. Расстраивает отстутствие фолдинга.

          И ещё вспомнил одну вещь: не очень удобно искать по коду место, где надо поставить брейкпоинт. Честно говоря периодически эта проблема сильно снижает скорость работы. Хотя у меня есть такая мысль — может я чего-то не знаю и можно искать быстрее?

            +2
            для этого есть инструкция в коде — debugg или debugger — ставите и там открывается автоматом отладчик
              +3
              debug(fn)
              Adds a breakpoint on the first line of a function.
              Тысяча чертей! Для кого пишут доки, по-вашему?
                0
                За это большое спасибо. Честно говоря как-то упустил из виду.
                0
                может пара обновить компьютер?
              0
              и кстати именно в этом направлении совершенствуют плагин — для работы с большыми скриптами. по крайней мере с 900+Кб екстом отладочным проблем нет
                0
                Это меня как раз порадовало. Буду ждать стабильной версии, т.к. потестировать на работе не удаётся в связи с большой загруженностью и зависаний системы не очень хочется видеть. Вот сегодня планирую посмотреть его дома. Но вообще сам процесс развития инструмента не может не радовать.
                  0
                  Использую Firebug 1.3 в работе для дебага, в частности, ExtJS-приложений — никаких крэшей замечено не было. 40000-ный код библиотеки ExtJS подгружается моментально.
                +1
                venkman — классический отладчик мозиллы, который существовал еще до файрбага.
                там только отладчик, зато поудобнее
                +1
                «Хорошая новость для дизайнеров»
                А дизайнеры-то при чем?
                  +1
                  Думаю автором просто имелись в виду верстальшики и ничего больше.
                    +3
                    Просто я не очень рад, когда их путают, ибо про дизайнеров сказано уже так много…
                  0
                  Надеюсь они реализуют нормальный поиск в скриптах и стилях.
                  А вообще, врят ли бы рискнул себе его поставить. Спасибо за обзор!
                    0
                    между прочим, для верстальщика firebug-тоже незаменимый инструмент.
                      +2
                      так же как и Internet Explorer Developer Toolbar и DragonFly
                      ибо просто нечем заменить. хотя firebug всех переплюнул.
                        –1
                        Все что под IE такое г… как и сам IE. нечего полезного, единственно можно смотреть где что находится, но в работе это и так ясно… был бы такой же как и firebug другое дело…
                          0
                          ну почему же, на лету редактировать свойства CSS тоже можно: начните писать название свойства в колонке аттрибутов, типа «backg…», и получится «background-color (css)».
                          [url=http://img.yiffa.net/view/3821][img]http://img.yiffa.net/i3821.jpg[/img][/url]
                            +1
                            вротмненоги, совсем не выспался:

                            0
                            да не, девелопер полезная штука) тока у меня не работает почему то(((( из-за нескольких ИЕ наверное…
                              0
                              Если в html 4 дива, то да, где и что находится, ясно. При работе над достаточно сложной вёрсткой IE Dev toolbar здорово облегчает жизнь.
                              0
                              Кстати, все знают про магическое действие кнопки F12 в ie8? :) Мне сегодня верстальщик сказал, я когда увидел чуть со стула не упал :)))
                                0
                                А что там?
                                  0
                                  вот результат

                                  Я вначале подумал, что это dev toolbar, ибо он у меня стоит, но под ie8 вроде бы как не работал, но нет — это штатный функционал ie8 :)
                                    0
                                    блин, не хотят теги вставляться… кому интересно — кинул картинку сюда: piccy.info/view/690c94021a11cf3b2700ef09c2345bc5/
                                • UFO just landed and posted this here
                                  • UFO just landed and posted this here
                              +1
                              Чувствую что Firebug совсем скоро превратится в отдельное приложение по отладке.
                                0
                                Вот полный список изменений для версии 1.3

                                Там наконец-то починили console.assert()!
                                  +2
                                  Жаль автор не описал всех самых нужных нововедений… получился просто анонс новой версии =)

                                  p.s
                                  Интересно сколько нужно собрать денег, чтобы заплатить команде грамотных программистов которые бы написали КАЧЕСТВЕННЫЙ отладчик для Internet Explorer 5,6,7,8… я думаю… можно было бы сделать большую копилку и верстальщики со всего мира бы туда приложились))

                                    0
                                    Лучше верстальщикам платить пользователям, чтобы они не использовали IE (:
                                      0
                                      В IE8 на мой взгляд вполне нормальный отладчик сделали. Не то, чтобы часто им пользуюсь, но пока никаких нареканий он у меня не вызывал.
                                        0
                                        Основная мысль была в том, чтобы это был единый отладчик для всего семейства :) так же лучше? =)
                                          0
                                          Ну для всего семейства он конечно не годится, но в режиме совместимости с 7-й версией он у меня работал. Я оптимист — верю что в ближайшие год-два 6-х IE будет много меньше чем 7 и 8.
                                      0
                                      Ещё они начали разрабатывать интересное расширение под названием ChromeBug.
                                        –1
                                        Простите, но кроме слова как «охуенно» на ум ничего не приходит.
                                        Поскорей бы WebInspector из WebKit достиг такого уровня.
                                          0
                                          А кто-нибудь использовал т.н. Firebug Lite?
                                            0
                                            я использовал, Firebug Lite — js скрипт. Не рекомендую, ибо работает медленно, да и не понимаю зачем нужна эта Lite версия, когда есть нормальная
                                          • UFO just landed and posted this here
                                              0
                                              Да, с появлением в моей деятельности такого инструмента, многое изменилось.., т.к. я начинающий разработчик если так можно выразиться, плагин помогает разобраться… да и понять, что я сотроврил)))
                                              Спасибо огромне за сию новость, не смотрел ещё альфа версию))
                                                0
                                                Чего не хватает, так это показа в панели net полного траффика для каждого запрошенного ресурса (с учётом заголовков, cookie), как это сделано в HttpWatch или IBM Page Detailer
                                                  0
                                                  httpFox
                                                  0
                                                  А что, у меня одного глюк с постоянно светящимся значком в углу статус бара броузера, в не зависимости от того активирован firebug на странице или нет?

                                                  Only users with full accounts can post comments. Log in, please.