Плагин Illuminations для Firebug-а

    Хочу поделиться одной интересной находкой, откопанной среди плагинов Firefox-а. Называется этот плагин Illuminations for Developers for Firebug и представляет из себя дополнение к Firebug для работы с тяжеловесными JS либами, преимущественно с ExtJS и Sencha Touch. Помимо этого, создателями заявлено, что в beta-версии плагин поддерживает Dojo Toolkit, SproutCore, qooxdoo, YUI, Google Closure Library, jQuery UI.

    Поскольку по работе мне в основном приходится использовать ExtJS, то в первую очередь было интересно, как данный плагин поможет в разработке именно на основе этой библиотеки.
    Какие жи фичи мы имеем, устанавливая данное дополнение:

    1. Отображение классов объектов при дебагинге кода и в консоли Firebug, т.е. например при вызове Ext.getCmp('gridUsers') из консоли у нас в выведется «Ext.grid.GridPanel» вместо «Object» как раньше.



    2. Подсветка компонентов на странице, и новый пункт в контекстном меню «Inspect ...» для быстрой навигации по компонентам Ext-а



    3. Ну и самое главное, добавление специальной вкладки в Firebug — Illuminations Panel. В ней отображаются виджеты, хранилища данных (Stores) и прочие элементы, используемые на странице. Каждый компонент имеет древовидную структуру, которая раскрывается при клике. Подробно описаны все используемые свойства и методы, а так же хранимые данные (в случае, например, Store).



    Ещё есть, как мне показалось, очень и очень полезная фича — документация по соотвествующим компонентам (подгружаемая извне с сайта Ext-а). Так, например, если мы редактируем грид, то можем прямо из Firebug-а посмотреть примеры использования, свойства, события, методы и т.п.



    Подробнее про использование «Illuminations» с ExtJS можно прочитать тут. На данный момент, насколько я понимаю, этот плагин годится как для работы с 3ьей версией Ext-а, так и с 4ой.

    Касательно других библиотек — попробовал посмотреть, как будет использоваться плагин с jQueryUI и YUI, но если честно не заметил таких же серьезных преимуществ, как для использования с ExtJS. В случае jQueryUI, компоненты (accordion, tabs и т.п.) хоть и отображаются в панели, но не скажу что это дает каких-либо серьезных преимуществ при отладке. В случае же YUI у меня почему-то подхватывались не все виджеты (для YUI 2 в панели вообще практически ничего не цеплялось), но зато по тем виджетам, которые все же отображались в Illuminations Panel, можно было посмотреть все свойства и докуметацию к API.

    Ну и ложка дёгтя в бочку мёда. Увы плагин не бесплатный (существует два типа лицензии: Commercial License и Personal License, для организаций и отдельных разработчиков соответственно). Бесплатно можно использовать Trial версию. НО правда я так и не понял, в чем же принципиальные отличия Trial версии от неTrial. Как пишет один из разработчиков плагина в блоге Sencha: «PS: There are some hidden things not available in the trial version...».
    Метки:
    Поделиться публикацией
    Похожие публикации
    Комментарии 16
    • +1
      Спасибо.
      Проверил с Qooxdoo, работает.

      Есть правда небольшое отличие, от описанного вами:
      «2. Подсветка компонентов на странице, и новый пункт в контекстном меню «Inspect ...» для быстрой навигации по компонентам Ext-а».

      Нового пунтка нет, но при активной вкладке Illuminations в Firebug «инспектирует» именно компоненты qooxdoo.

      Ubuntu 10.10, Firefox 4.0.1
      • 0
        >Нового пунтка нет
        хм… к сожалению не работал Qooxdoo, но сейчас решил попробовать на demo-примерах с официального сайта — у меня не то что пункт Inspect — вообще конктекстное меню не работает :) Видимо разработчики его отключили через oncontextmenu=«return false» или что-то типо того. А вообще, скорее всего отсутствие пункта как-то свзано с тем, что библиотека Qooxdoo находится в beta-версии поддержки у Illuminations.
        • 0
          Стоп. Вы контекстное меню браузера по клику правой кнопки на странице имели в виду? В Qooxdoo оно по дефолту отключено. Я так понял, что контекстное меню должно по левому клику на элемент Inspect Firebug-а появляться.

          Короче, дело ясное, что дело темное :)
          Главное работает.
      • 0
        После попытки внедрения ExtJS клиенты стали жаловаться на то, что страницы дольше открываются, пришлось отказаться. слишком уж тяжеловесная
        • +2
          О.о а при чему тут Illuminations?

          Клево вы внедрили ExtJS, что потом смогли от него лихо отказаться по жалобе на тугость. Если у вас в проекте страницЫ, а не страницА, то видимо вы ExtJS не по назначению использовали.
          • 0
            это большой проект с тысячами страниц. просто начал внедрять с нескольких страниц, и сразу пошли жалобы
            кроме ExtJS там еще другие скрипты, но думаю дело не только в размере, а в том что у кого-то стояли старые машины, и IE6-7, который намного тормознее выполнял скрипты, особенно обработку большого количества строк.
            в общем сделал тоже самое, но своими руками и стало быстрее
            • 0
              Да, с IE-6 ничего не поделать. На нем реально все плохо. Но в любом случае ExtJS не особо хорош для многостраничных приложений. Накладные расходы на загрузку и инициализацию для каждой страницы великоваты.

              Кстати, если у вас приложение на ASP.NET, то можете посмотреть www.ext.net/, это конечно тот же ExtJS, но очень легко его внедрить в ASP.NET проект и использовать только то что нужно (там есть подгрузка по требованию и все такое).
              • 0
                да, ASP.NET
                спасибо, пока обхожусь jQuery и собственными наработками
                просто хотел по-быстрому пару красивых фишек добавить из ExtJS, но пришлось отказаться
          • +3
            А вы всю библиотеку сразу им грузили? ext-core занимает чуть меньше 100 кб. Отдавая его gzip ом, размер получается совсем малельнкий. Для ваших страниц его будет достаточно
            • 0
              ядро-ядром, но внятного способа четко разделить библиотеку на то, что нужно нет. Приходится отдавать всю целиком.

              права, в 4-й версии они, вроде, уже сделали загрузку компонентов автоматом on demand
              • +3
                Помню когда-то прямо на сайте ExtJS была страничка с загрузкой, где можно было выбрать блоки библиотеки, которые нужны. Т.е. можно было отметить галочками что нужны допустим Store, Grid, жмак «Скачать» и у вас архив с ужатым ядром + адаптер + код из пары указанных файлов классов. Но это было так давно, что я даже не могу с уверенностью сказать не моя ли это фантазия.

                А так попилить библиотеку ручками не проблема. Проблема не выпилить что-то нужное промежуточное, но это приходит с пониманием иерархии компонентов. Хотя когда это понимание наступает — в проекте уже нужно все, выкинуть нечего :)

                Если вы имеете ввиду загрузку частей по запросу, то да, тут все тяжко было. Но я бы не сказал что подзагрузка так уж всем хороша. Например она может добавить проблем при отладке, соответственно стабильность кода страдает.

                Но в любом случае ExtJS едва ли лучший инструмент в тех местах, где нужно повесить свистелку минимально нагрузив страницу — мое мнение.
                • +1
                  Было такое, во второй версии. В третьей оказалось невозможно так разделить компоненты.
          • 0
            Конечно, плагин действительно крутой и может оказать существенную помощь при разработке на ExtJS (за что спасибо), но с Sencha Touch он уж точно ничем не поможет, т. к. Sencha Touch работает только под WebKit браузерами.
            • 0
              К сожалению не имею опыта разработки под Sencha Touch, но на странице плагина написано следующее: Supports ExtJS and Sencha Touch. Либо опечатка, либо же мы не все знаем об этой разработке.
              • 0
                Я даже проверил. Он действительно работает, и это круто, но вопрос: «Зачем?» Всё равно Sencha Touch приложение не то, чтобы корректно не отобразится в FireFox, оно вообще в нём никак не отобразится.
                А вот если была бы подобная штука для Web Inspector в Safari, было бы вообще зашибись!
                • 0
                  Кстати, про Sencha Touch на официальном сайте ничего не написано. Там написано: «Now Shipping for Sencha Inc.'s ExtJS frameworks». Senhca — это общее название компании и линейки продуктов, в числе которых ExtJS и Senhca Touch.

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