Illuminations plugin for Firebug

    I want to share one interesting find dug out among the Firefox plugins. This plugin is called Illuminations for Developers for Firebug and is an addition to Firebug for working with heavy JS libs, mainly with ExtJS and Sencha Touch. In addition, the creators stated that in the beta version the plugin supports Dojo Toolkit, SproutCore, qooxdoo, YUI, Google Closure Library, jQuery UI.

    Since I mainly have to use ExtJS for work, it was first of all interesting how this plug-in will help in development on the basis of this library.
    What features do we have when installing this add-on:

    1. Display of object classes during code debugging and in the Firebug console, i.e. for example, when calling Ext.getCmp ('gridUsers') from the console, we will see “Ext.grid.GridPanel” instead of “Object” as before. 2. Highlighting components on the page, and a new item in the Inspect ... context menu for quick navigation through Ext components . 3. And most importantly, adding a special tab to Firebug - Illuminations Panel. It displays widgets, data storages (Stores) and other elements used on the page. Each component has a tree structure that expands when clicked. All properties and methods used are described in detail, as well as stored data (in the case of, for example, Store).











    There is still, as it seemed to me, a very, very useful feature - documentation on the appropriate components (loaded externally from the Ext site). So, for example, if we are editing a grid, we can look directly at Firebug's examples of usage, properties, events, methods, etc. Read more about using Illuminations with ExtJS here . At the moment, as I understand it, this plugin is suitable for both working with the 3rd version of Ext and the 4th.





    Regarding other libraries, I tried to see how the plugin will be used with jQueryUI and YUI, but to be honest I did not notice the same serious advantages as for use with ExtJS. In the case of jQueryUI, components (accordion, tabs, etc.), although they are displayed in the panel, but I will not say that this gives any serious advantages when debugging. In the case of YUI, for some reason, not all widgets were picked up for me (for YUI 2, the panel didn’t catch anything at all), but on the widgets that still appeared in the Illuminations Panel, I could see all the properties and documentation for the API.

    Well, a fly in the ointment. Alas, the plugin is not free (there are two types of licenses: Commercial License and Personal License, for organizations and individual developers, respectively). You can use the Trial version for free. BUT I really didn’t understand what the fundamental differences between the Trial version and non-Trial are. According to one of the developers of the plugin on the Sencha blog: “PS: There are some hidden things not available in the trial version ...”.

    Also popular now: