Firebug Plugin: Illuminations for Developers
Illuminations for Developers is a tool that makes developing web applications more intuitive when using Ext JS and Firebug. Illuminations helps developers in three main ways: making it easier to understand what a particular object is, changing the concept of Inspect from just HTML elements to Ext JS components, and giving an extra overview panel for Ext JS.
Illuminations for Developers Features
Illuminations enhances Firebug to understand the Ext JS libraries and framework, making objects more obvious and helpful when debugging. Let’s review a few of the features.
Firebug with Illuminations presents the framework objects in a smarter way. It recognizes what they are and shows the whole name, like “Ext.DataView” instead of “Object” in the console and the other Firebug panels. Plus, instead of random properties being appended, it looks for an ID-ish and a Value-ish property to show. This gives you a clearer picture when you’re debugging. See the example below with standard Firebug output versus with Illuminations:
Utilizing the option “Method Naming” as found in the Illuminations panel options menu, methods of objects get better names. This can make a big difference when stopped at a breakpoint and stack trace is filled with identical names. Take a look at the example below and see the difference with initComponent:
With Illuminations, when you hover the mouse over the Ext.DataView above, it will highlight the component on the page (like hovering over an html element would do). In this case, the coder didn’t give a descriptive itemId or name, so hovering over it does the trick — it shows you exactly what that object is all about by displaying it to you on the page. This works for Ext Components and for Ext Elements. It even works for Ext Composite Elements — by highlighting all of the composite’s nodes on the page.
When you right click on an element in Firefox, Firebug adds an “Inspect Element” menu item to open Firebug and displays that element in the HTML panel. Illuminations does the same sort of thing, but it tries to find the best match: ideally some sort of UI widget, else an Ext Element. When you select that component, it will switch to the Illuminations panel and selects it.
A new panel has been added to Firebug called Illuminations. When you use the contextual menu above, you see the panel below. The Illuminations panel lets you inspect Ext JS objects: Widgets (usually derived from Ext.Component, but not always), Data (Ext stores, records/models, fields), and Elements (Ext.Element and its brethren). These views show the hierarchical structure that results from your code:
Once you play around with all of the elements above, you start to see how useful and fun debugging can be again. Try this example page — look at the DataView and browse around. You can click on a data store and look at the records in the Records side panel.
Other side panels include Properties (sorted by the object that defined the property) and Methods. See which Events are connected. There is even a Docs side panel that will bring up documentation for the widget you are looking at. Plus, the full array of DOM related side panels showing you where the component is located in the DOM, that DOM element’s CSS, etc.
Now for the neat part. Illuminations extends the functionality of Firebug’s Inspect Mode. The Firebug Wiki explains, “Something in your page doesn’t quite look right and you want to know why. There’s no faster way to get answers than to click the “Inspect” button on Firebug’s toolbar and then prepare for immediate gratification. As you move around the page, whatever is beneath your mouse will be instantly revealed within Firebug, showing you the HTML and CSS behind it.”
Now, that same button works in the Illuminations panel; but instead of just showing the HTML element, it will highlight and show you the component instead. Components are highlighted in purple and Ext.Elements in orange. Plus, in the case of the Ext.DataView, it will highlight both: the component, plus the data elements (in orange) as seen below:
Ext JS 4 Support
Ext JS 4 support is a work in progress, and I will track changes as Ext JS 4 matures to final release. There are some awesome things that will be possible, such as the way model names percolate. For example, if a store contains a bunch of People models, it could now be named Ext.data.JsonStore
How to Get Illuminations for Developers
There is a free trial that you can install at: illuminations-for-developers.com. Additional details on licensing and system requirements are available as well. Follow @illuminations4d for Twitter updates as well.