Illuminations plugin for Firebug
I want to share one interesting find, dug out among Firefox plug-ins. This plugin is called Illuminations for Developers for Firebug and is a Firebug add-on for working with heavyweight JS libs, mostly 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 for work I mostly have to use ExtJS, it was first of all interesting how this plugin will help in developing it based on this library.
What features we have by installing this add-on:
1. Display of classes of objects when debugging code and in the Firebug console, i.e. for example, when you call Ext.getCmp ('gridUsers') from the console, we will have “Ext.grid.GridPanel” instead of “Object” as before.
')
2. Highlighting components on the page, and a new item in the context menu of “Inspect ...” for quick navigation through Ext components
3. And most importantly, the addition of a special tab in the Firebug - Illuminations Panel. It displays widgets, data stores (Stores) and other items used on the page. Each component has a tree structure, which is revealed with a click. All used properties and methods, as well as stored data (in the case, for example, Store) are described in detail.
There still is, it seemed to me, a very, very useful feature - documentation on the respective components (loadable from the Ext site from outside). So, for example, if we edit a grid, we can look directly from Firebug for examples of usage, properties, events, methods, etc.
You can read more about using “Illuminations” with ExtJS here . At the moment, as far as I understand, this plugin is suitable both for working with the 3rd version of Ext, and with the 4th version.
Regarding other libraries, I tried to see how the plugin will be used with jQueryUI and YUI, but I honestly did not notice the same serious advantages as for use with ExtJS. In the case of jQueryUI, the components (accordion, tabs, etc.) are displayed in the panel, but I will not say that it gives any serious advantages when debugging. In the case of YUI, for some reason, not all widgets were picked up (for YUI 2, in the panel, almost nothing clung to anything), but on those widgets that were still displayed in the Illuminations Panel, you could see all the properties and documentation to the API.
Well, a spoonful of tar in a barrel of honey. 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 the truth is, I still do not understand what are the fundamental differences between the Trial version and the non-Trial version. As one of the plug-in developers in the Sencha blog writes: "PS: There are some hidden things not available in the trial version ...".
Since for work I mostly have to use ExtJS, it was first of all interesting how this plugin will help in developing it based on this library.
What features we have by installing this add-on:
1. Display of classes of objects when debugging code and in the Firebug console, i.e. for example, when you call Ext.getCmp ('gridUsers') from the console, we will have “Ext.grid.GridPanel” instead of “Object” as before.
')
2. Highlighting components on the page, and a new item in the context menu of “Inspect ...” for quick navigation through Ext components
3. And most importantly, the addition of a special tab in the Firebug - Illuminations Panel. It displays widgets, data stores (Stores) and other items used on the page. Each component has a tree structure, which is revealed with a click. All used properties and methods, as well as stored data (in the case, for example, Store) are described in detail.
There still is, it seemed to me, a very, very useful feature - documentation on the respective components (loadable from the Ext site from outside). So, for example, if we edit a grid, we can look directly from Firebug for examples of usage, properties, events, methods, etc.
You can read more about using “Illuminations” with ExtJS here . At the moment, as far as I understand, this plugin is suitable both for working with the 3rd version of Ext, and with the 4th version.
Regarding other libraries, I tried to see how the plugin will be used with jQueryUI and YUI, but I honestly did not notice the same serious advantages as for use with ExtJS. In the case of jQueryUI, the components (accordion, tabs, etc.) are displayed in the panel, but I will not say that it gives any serious advantages when debugging. In the case of YUI, for some reason, not all widgets were picked up (for YUI 2, in the panel, almost nothing clung to anything), but on those widgets that were still displayed in the Illuminations Panel, you could see all the properties and documentation to the API.
Well, a spoonful of tar in a barrel of honey. 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 the truth is, I still do not understand what are the fundamental differences between the Trial version and the non-Trial version. As one of the plug-in developers in the Sencha blog writes: "PS: There are some hidden things not available in the trial version ...".
Source: https://habr.com/ru/post/119574/
All Articles