Sencha Inc. | HTML5 Apps

Blog

Firebug Plugin: Illuminations for Developers

March 08, 2011 | Steven Roussey

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.

I created Illuminations because I was having issues figuring out which data “object” was which when developing a large JavaScript application. The debugger and inspector didn’t deal in design patterns, they simply dealt with code and data. I built Illuminations to bridge that gap — to make the debugging, inspecting, and browsing experience of Firebug include the level of abstraction I needed.

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.

Object Naming

Ext JS Firebug Illuminations Object Naming 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:

Method Naming

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:

Ext JS Firebug Illuminations Method Naming

Element Highlighting

Ext JS Firebug Illuminations Element Highlighting 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.

Contextual Menu

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.

Illuminations Panel

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:

Ext JS Firebug Illuminations Panel

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.

In addition, when you click on any object in the panel it can be found in the $0 variable in the console — which is awesome if all the references to that object are otherwise hidden in JavaScript closures.

Inspect Mode

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 Firebug Illuminations Inspect Mode

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<People>. It’s one of those little things that will help make everything more intuitive when debugging.

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.

There are 58 responses. Add yours.

Jay Garcia

3 years ago

Go STEVE!!!!

AwesomeBob

3 years ago

:O

Anup

3 years ago

Realized I had firebug 1.7 so saw problems. After installing 1.6 instead, it worked amazingly. This is awesome. Many thanks! (Hope firegbug 1.7 support is in the works too!)

Loiane

3 years ago

This plugin is great!

Steven Roussey

3 years ago

Anup, send me an email and we will figure it out. Might be another plugin like FireCookie.

Jonathan Griffin

3 years ago

I’ve been using it since we spoke at SenchaCon. It’s been a life saver!

James Mills

3 years ago

This is awesome stuff!!

Great work Steve!

cheers
James

Ed Spencer

3 years ago

Amazing work Steven - this is a big bonus for everyone developing with Ext JS and Firefox

Sébastien Volle

3 years ago

This plugin is great for Ext JS users. Too bad I recently moved away from Firefox in favor of Chromium.
Can’t wait to see your extension for Chromium Steve! wink

keniled

3 years ago

I cannot say it’s not useful, but $25 per year (not even a one time price) is not little. That’s probably the most expensive Firebug extension. And a trial doean’t make a difference :/

Nicolas BUI

3 years ago

Hi,

I’ve been testing this tools since a month. It’s a very nice tool and it’s sometime very handy. But do advanced developers really need this tools ? +90% of the problems I’ve encounter is from IE whil only a few from Firefox or Chrome (Firebug is still better than chrome in this area).
I wanted to buy the tools until I realized that is a annual subscription. Even if 25$ is not that expansive, but something is not right ...
Sure it’s very handy to have this tools to inspect or debug, but as an advanced developper, I still prefer the classic console.log.
So, why would I pay a subscription for such a tool when any other tools a onetime fee ? I prefer to renew to pay a upgrade every year to feel like the product is mine and I would prefere to upgrade only when necessery is.

Ionna

3 years ago

Agree with keniled.
Extjs users become true piggy bank !!

John Strickler

3 years ago

I agree with most of the comments so far.  It’s an amazing extension but will I really use it?  It’s more of a convenience than a necessity something that I’d be willing to pay once for but not subscribe to.  The subscription plan threw me off too…  people want to feel like they own the product they purchase rather than leasing it.

Javier Rincon

3 years ago

I don’t care if it cost 25$ or 50$ this is awesome and if you are an ExtJS developer that works for 25$+ an hour and you say a tool that helps your work it’s too expensive for 25$ a year… well, you have issues.

Nice work Steven, i am testing and we will purchase soon a license for our team… if it works as expected. (have to test in real world/debugging sessions, but right now its amazing)

Les

3 years ago

Very nice addition to Firebug!

Tomy

3 years ago

Great work!

Is there any date set for the release of Ext JS 4 Beta, finally?

Thank you

Steven Roussey

3 years ago

keniled, and others, I understand that sometimes even $25 is a lot (and based on some exchange rates, it could be a great deal). I didn’t mention it in this blog post, but I have elsewhere: if you want a free license you can volunteer for Firebug for a bit. All Firebug contributors/volunteers (either coding or helping with bug reports) get a free license. It is a great choice if you have more time than cash. And the precious few of us working on Firebug can use all the help people are willing to provide!

morfeo

3 years ago

Pay for a Firebug extension?? Firebug is free, Firefox is free, that has no sense. This people (Mozilla and Firebug teams)  works for you and you just make a simple plugin for $50 per year??.
You are WRONG!!

Steven Roussey

3 years ago

morfeo: Hi! I think you missed the part where I am part of the Firebug team, and volunteer means I don’t get paid.

However, your sentiment is both a huge win and burden for Mozilla: it is a win for free software to have such champions, however, by not promoting paid extensions very well (they do the donation bit), they are losing developers to Chrome’s extension and app store. And Apple’s app store. And the Android market. Etc.

And if anyone wishes to donate to Firebug, there is a donate button on AMO. It will go to Pedro in Brazil, who is working on core parts of Firebug 1.8 and is in charge of FirebugLite. I’m sure he wouldn’t mind me saying that it would be greatly appreciated!

Les

3 years ago

I created a bunch of Firebug bug reports over many years.

How do I get the free license?

Les

Tane Piper

3 years ago

+1 this is a great plugin - used it during it’s beta phase and it really helped me get to grips with ExtJS - buying a licence was a no-brainer

Steven Roussey

3 years ago

Hi Les, send me an email. We could use some help on triage and STR (which besides being my initials, means Steps To Reproduce). Thanks!

As far as subscriptions… I struggled with pricing quite a bit. Do I charge separately for Firefox/Firebug and again for Chrome? Again for Safari? For ExtJS3 and again for ExtJS4? Illuminations gets updates both to the software and some JSON files that describe the framework/version combo. Charge for updates? Minor versions? Major? I decide what is what, so it really doesn’t matter. What are the tax implications? If not a subscription, then I need to add another 10% sales tax for California.

What if life takes me in a different direction a year from now? I don’t like to start something without considering how it might end. I don’t plan on leaving Illuminations behind (in fact, I have all sorts of ideas and what it is doing now is just a fraction of what is possible), but just in case? How can I get someone else to take over if that happens? Firebug with millions and millions of users has a tiny team, thankfully Mozilla pays one of them, but Illuminations has a smaller base, so I ran the numbers and they came out to zero. And in the worst possible scenario where I don’t make any updates and there is no one to take over, I’ll likely just kill the subscription and push the end date for all users out to 2032. If value isn’t being added, then I shouldn’t charge. Duh! wink

Andrew Peacock

3 years ago

Hi Steven,

Great job. Purchase made. $25 is great value for money, and as Javier implied, if $25 is alot, then people can do out and do a job on Elance, Rentacoder, etc, and make a lot more than that back. Thanks for your efforts.

Regards,
Andy

Paul Punta

3 years ago

The article is very much informative and knowledgeable. The subject is of my special interest and I, curiously await further article in this regard.

Luke

3 years ago

Well $25 is nothing.. but I hate every type of subscription, period,  sneaking on me, taking money from me when I least expect it.  I used to look at my bank statement and it was littered with little $5 items here, $20 there, etc.. so, as a policy, I try to avoid them all together.  Yes, I would rather pay $25 for Illuminations, $10 or $15 for the updates whenever I want.  Maybe you release something I think is worth the extra money, if so, I upgrade, if not I wait til you put out a few more versions.  I dunno, just my personal take on it.  I’d also like to pay for the chrome extension, etc, you should be paid what your work is worth.. even if your extension ends up being $100—people look at it, the decide if they want to pay it, then its done.  Ditch the subscriptions, double your price, and you’ll still get more sales.

With that said, I ran with Illuminations for a week or two, and while I think it has some hidden or unseen potential that I probably overlooked, its not really worth anything to me at this point.  When I console.dir, I know what to expect.. if I don’t, I console.log first telling me what to expect.  Heh, keep at it tho, you’ll get there and I’ll buy it when you do.

Luke

3 years ago

Oh.. forgot to mention.. that “hovering” thing is the reason I decided to put it down.  It never worked how it expected to.  It also had some glitches that gave me grief even when I wasn’t using illuminations actively.

Steven Roussey

3 years ago

Luke: There is a hovering issue when there are multiple tabs open—it is in Firebug. I found where the problem was, Mike fixed it, and Honza will put it in Firebug 1.7b2.

I suppose, for those that really hate the subscription idea, I can offer lifetime (subscription free) for a higher price if you email me.

PS: There are some hidden things not available in the trial version…

Nico Barten

3 years ago

This is obviously very useful. However, as some already stated, firebug alone does 95% of the time its job good enough. If free, it would have been great, but i simply don’t see reason why to pay for it when it adds that little.

Nicolas BUI

3 years ago

@luke you have express what I want to say smile

@steven: thank you for participating to the discussion and your clear replies.
A subscription is a “service” where you kinda like chained and relies on a certain period of time. And you generally expect something else as a service. What your subscription have to offert but the tools you provide.
So, what happen if I decide to unsubscribe ? So do I fall back to a trial and loosing all for what I’ve paying for ?

As luke mention, I would rather pay a higher price and pay for an upgrade every major version… so please don’t
make 5 major versions a year wink Its a pay as you go smile

Can you tell us what’s your price for a subscription free version ?

morfeo

3 years ago

Steven:
  There is a lot of free extensions and complete software for Chrome or Android. Even Firefox has now very much more users than Chrome or Safari. There are millons of free extension and free software (Aplications, Operating Sistems), and free software developers. Its not important the amount of them or if they are working now in Apple or Microsoft. The point is: this pligin is a very simple plugin inside a powerfull FREE estension (Firebug, and congratulations for your work in it) over a owerfull FREE borwser (Free of freedom, not free as “free beer”). And a plugin IS NOT A SERVICE. I think you may consider charge for support, teaching, adapptation, new features… NOT FOR TIME (and not not for to use a plugin based on the work of a lot free software developers, its not OUR philosophy).
This is my point of view.

Michael

3 years ago

I don’t know why everybody expects to get something for nothing. Maybe because they’re used to it.

If your time is worth more than a dollar an hour, this tool is well worth it. $25 is more than fair, and kudos to you Steve for taking the time to write it. I hope you make a million dollars from it - or more.

morfeo

3 years ago

Michael:
  I think the problem is not the price, is the philosphy. “everybody expects to get something for nothing”: Steven gets something for nothing from Firebug and Firefox (nothing of money, even he makes some contributions, thas IS the philosphy) and he want make money using the work of a COMUNITY. And doing it every year for a plugin developed ONCE.
I belive in charge for your work, not for the time i use your work (especially if it is based in a lot of work of other people). Using Free (LIBRE) software to make privative software, IS WRONG, no matter if the price is $100 or $0.01 or free.

Steven Roussey

3 years ago

Considering that the Firebug developers themselves are in support (and I am not the first to have a paid Firebug extension), and the Firefox team is in support (the head of Firefox gave me a quote for the home page), I don’t think there is much more that I can say.

I’m afraid you will be even more up in arms when you see what Mozilla is planning for paid extensions late in the year. And you must be quite angry at Google for creating a store for their free browser. And angry at RedHat. And…

Michael: I’m afraid I promoted this blog entry at a lot of places, so it brought in some outside the community. There is no “morfeo” on the forums here. He probably does not even know or like ExtJS, etc. Based on past experience with forum and comment trolls, “morfeo” will keep posting until he has the last word, i.e., the last post. At this point I don’t recommend anyone respond to him (or another name which will likely also be him but is posting the same argument).

Luke

3 years ago

@Steven: Yes, my comments were meant to be critical, but I had not expected it to turn into a flame session.  I want to just summarize this in case this thread, and particularly my comments, has had a negative impact on potential buyers.

Illuminations is a clever app.  Programmers (like most of us here) need to pay bills too.  Steve has done his part contributing to firebug.  If you hate subscriptions, Steve has offered to sell those who email him a one-time license (though I could not easily locate his email address, guess I overlooked something obvious).

I personally like Illuminations and will keep an eye on it.  Once it crosses the threshold into a “must have tool” (based on my ever-changing personal opinion) I will buy it the same day for any reasonable rate.

Good luck smile

Jonathan Ferrer

3 years ago

Steven, Luke, and even morfeo present valid points, remember that we are all entitled to our opinion and if you expect people to respect your opinion, you must in turn, respect theirs.

But I think the most important thing is not to criticize the work of others but to question what we can do for others, be it as free or paid programs, with EXTJS 4 when it is released. Because the following code is “buggy”

var count  = 1;
while(true)
{
    var title = “Ext JS 4 Releases and Notes (4.0PR” + count + “)”;
    if(title == “Ext JS 4 Beta”)
    break;
    count++;
}

Steven Roussey

3 years ago

By the way, on the Illuminations site, two of the four tabs have my phone number and email address on them!

Jonathan Ferrer

3 years ago

Steven,
We know that your work is great thank you, by the way you know something about extjs4 beta?

Vishal Kr Singh

3 years ago

Have already been using it, after Jay suggested it to its followers, an awesome plugin

cojack

3 years ago

Awesome! Release the extjs4 as well, I can not wait any more!

Steven Roussey

3 years ago

I don’t have any inside info on when the beta will be released, sorry. The latest release was PR3.

Frank Mayer

3 years ago

Great plugin Steven!!! Thumbs up. Very useful. Can’t wait to get my hands on extjs4 with it. wink

Chris

3 years ago

It’s a shame about the subscription.  I could’ve convinced my boss if that was a one-time purchase…

Drop the subscription and let people choose to pay for *major* updates instead.  Then you’ve got a deal.

As many have said, it would be nice to have, but you can get along fine without it.

Steven Roussey

3 years ago

I plan a 2.0 version pretty soon, so a major version increase will happen soon. The other problem in version numbering is that the extension will break on pretty much every new version of Firefox and Firebug. I could make it such that it lasts forever without a subscription for the version of Firefox and Firebug released at that time. But remember, Mozilla will be releasing Firefox 4, 5, 6, and 7 this year. So, under this reasoning, you could use it with Firefox 3.6/Firebug1.6 without subscription. The real problem is that the software just won’t work without me making continuous updates to it. Well, unless you freeze on an old version across the board. And think about Chrome changing major versions every six weeks.

I *really* did think a lot about it. But I really *did not* explain it well. Actually, I didn’t explain it at all, now that I review the site.

One other option that I thought of was to split the price between a license and a “support” subscription (the total being what it is currently). I could then have the support subscription be a maintenance price in future years, rather than re-billing the “total” amount. The mechanics of that is more difficult, though I have 11 months to figure it out….

Tony

3 years ago

Just out of idle curiosity, what is the purpose of the google analytics code that Illuminations downloads from http://www.illumination-for-developers.com/firebuganalytics/

Les

3 years ago

>>> I plan a 2.0 version pretty soon…

What’s new and exciting in version 2.0?

Steven Roussey

3 years ago

The privacy policy is here on AMO:
https://addons.mozilla.org/en-US/firefox/addon/illuminations-for-developers/privacy/

I’ll copy it over to the main site (I started with it only on AMO at first). It says: “Illumination uses Google Analytics for basic usage statistics: loading, unloading, discovering a framework on a page, and the inspect context menu.”

I don’t have it working too well (it says there is only one unique user). But the other parts are working—most importantly, what version of the framework people are using. It was more important early on when I only tested the latest version of each major series. But some things changed internally between minor versions that broke Iluminations completely (since I am accessing internal private data structures). Sencha pointed me to a list of every released version, which become very helpful.

2.0 will be in Q2 if all goes well. I don’t want to say too much other than it is related to a metal in wide use on cars in the 1950s.

Tony

3 years ago

Does this mean the URL of every site I work on would be centrally tracked by this extension?

Steven Roussey

3 years ago

Tony: Yikes! No!

Technically, what I see are “hits” at my own site (at the URL you pointed out) with a little extra info (GA Events) like “Started”, and “ExtJS 3.3.1”. It is pretty innocuous. And it does obey Privacy Mode, etc.

Steven Roussey

3 years ago

I can’t make everyone happy, even with free software, but I can make some people a little bit happier at least. I changed subscriptions: future years are half the price of the fist year. More on the blog:

http://www.illuminations-for-developers.com/blog/article/2011/03/14/55171/Why-Subscription-Pricing

Pete Haidinyak

3 years ago

<FLAME>Programmers have to be the cheapest profession out there. I can think of no other profession that expects their tool to be provided to them for free and that they work flawlessly. I’ve just started with JavaScript and ExtJS and I think the $25 I’ve spent on this tool was a great investment. I feel I’m a professional Software Developer and if a tool can make me better at my job I have no problem paying for it. Crap, I pop more than this for a box of paintballs and I don’t agonize over that either. BTW, great tool. </FLAME>

Luke

3 years ago

Heh, I’d say just the opposite.  I have about $12,000 equity in just my computers and spend $3 or $4k each on new ones and supplemental hardware. I have a home office that drains almost as much power as my A/C, and I buy about 50% of the software I use.  I also have to keep some basics around, like paper, printer toner, high speed internet, etc.  So, I’d say that programming is one of the more expensive professions, from an employee point of view, since a pretty high percentage of programmers telecommute.

Pete

3 years ago

I would say Luke that you are not the norm. I too invest heavily in my profession but most programmers I know don’t. I also would dispute your comment that a high percentage of programmers telecommute. I only know of one that does.  But you’re right, it can be an expensive profession.

Luke

3 years ago

Fair enough, perhaps a high percentage do not.  Our company went seeking developers and its just about all we could find.  The local markets are filled with sub-par programmers, all of our higher-end, higher pay, developers are remote.  So, I’d say, every programmer I know personally telecommutes, without knowing if I know more than the average person.  Even in the jobs I’ve had where I worked in-house I had to get software approved for purchase, blah blah, took forever, then they wanted to keep the licenses and so forth… so I just got in the habit of buying what I need if its less than $300.  Really, most of the programmers I know jump into low risk, low pay, startups that have almost zero capacity to build an office.  When not doing that they fish for fast money on rent-a-coder and sites like that.  But, I relent, I could very well be abnormal.

Pete

3 years ago

I worked remote once. I still haven’t decided if I liked it. I ended up putting in a lot more hours since there wasn’t this hard divide between work and home. Usually I bring my work home anyway but I just noticed I work less on my personal projects while working at home. When I start a new gig I usually bring my own computer, monitor, and development software with me since most companies don’t provide what I consider a decent setup to develop on. Funny, they pay good money for talent and then provide sub-standard equipment to work on. Go figure.

DB

3 years ago

I just had my company buy a license for me. The ROI math was very simple: I4D saves me a conservative 1 hour a month in debugging time.  That’s an easy investment to make.

Mayoralito

3 years ago

I like that plugin! it’s great

arno niem

3 years ago

just installed the extension, but i see only “[Trail] Ext.Elements” but nothing more ... :-(

it works with Ext2.0.2 and gwt-ext?

i can not see much informations, the records tab is empty.


i dont think its useful for me because in the trial i see nothing :-(

Steven Roussey

3 years ago

ExtJS2—yes. But gwt-ext, no. GWT does all sorts of odd things that make it impossible to debug. :(

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.