Blog

Illuminations v1.1.13 -- Search is here!

3 days ago by www

Illuminations v1.1.13 is out and the biggest feature change is the addition of search to the Illuminations panel. It will search the side panels... things like properties and methods. This has been the most requested feature, and now it's here! This version also comes with a Japanese translation! Thanks everyone!

Translators Needed!

4 months ago by www

Hi everyone! For Illuminations v1.1.11 I will have the extension translated into several languages for the first time! If you want to help with the translations, please sign up for and use http://www.babelzilla.org/. We have Chinese, French, and more already! Could really use German, and whatever you are fluent in. Thanks!

Introduction to Illuminations for Developers

a year ago by sroussey

www.illuminations-for-developers.com

It makes Firebug know all about ExtJS (and you can try with Dojo, SproutCore, Closure, qooxdoo, and jQueryUI, though they are in beta status). And it is very very handy, and so let's discuss a few of the features (using ExtJS3 as the example framework):

Object Naming

It 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. And instead of random properties being appended, it looks for a ID-ish and a Value-ish property to show. This gives you an idea what you are looking at when you are debugging. See the example without and with Illumination:

Element Highlighting

Now, when you hover the mouse over the Ext.DataView above, it will highlight the component on the page. In the case above, 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. This works for Ext Components and for Ext Elements. It even works for Ext Composite Elements -- it highlights all of its 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 bring you to that element in the HTML panel. Illumination does the same sort of thing, but tries to find the best match: ideally some sort of UI widget, else an Ext Element.

Illumination-contexualmenu-2010-11-11_12

Illumination Panel

There is a new panel added to Firebug called Illuminations, and when you use the contextual menu above, this is where it brings you. The Illumination panel is the place to inspect ExtJS objects: Widgets (usually derived from Ext.Component, but not always), Data (Ext stores, records, fields), and Elements (Ext.Element and its brethren). These views show the hierarchical structure of your code:

screenshot

It really takes some playing around with all of the above to get a feel of how useful and fun debugging can be again.Try this example page and look at the DataView, and generally 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 what Events are connected. There is even a Docs side panel that will bring up documentation for the widget you are looking at! And the full array of DOM related side panels showing you where in the DOM the component is at, that DOM element's CSS, etc.

And whatever you click on can be found in the $0 variable in the console -- which is awesome if all the references to that object are hidden in JavaScript closures!

Have fun!

Illuminations ClientSide Debugger for Firefox 1.1.10

5 months ago by www

Illuminations ClientSide Debugger for Firefox 1.1.10 is now available. Auto update should install it for you, or you can download it from the homepage. It fixes a bug or two, and adds support for the forthcoming Firebug 1.9 (which we plan to have out by the end of the year).

New Firebug 1.9 coming...

6 months ago by www

There is a new version of Firebug coming, and it has some internal structural changes. Version 1.1.10 of Illuminations has been submitted to Mozilla so hopefully it will be out before the new Firebug version gets out. It has been suggested that I keep the blog up to date with new releases as they happen. Good suggestion!

Why Subscription Pricing

a year ago by sroussey

One of the issues with creating something like Illuminations is that it needs to update based on any of the following also updating: Firefox, Firebug, every JavaScript Framework update. It is a continuous battle to keep these all in sync. Thus the subscription pricing. But I priced it wrong, by having it renew at the same price every year. Perhaps if it was done monthly, it would have beenperceivedas more of a service. At any rate, it was seen as more of a product, and the pricing seemed off.

So today, I'm changing the renew rate to be 50% off the cost of the first year.So, if you have a $25 personal license, that comes to $12/yr for the later years ($1/month!).

TL;DR

JavaScript Framework updates:There are a few ways to deal with JavaScript Framework updates. There is a JavaScript file that encapsulates a strategy for each framework, and inside it are variations for each major branch. A change in these core files requires a bump in the version number for Illuminations. The other mechanism has Illuminations reach out over the internet and get a description file for each branch of a JavaScript framework. For example, I have the following: ExtJS1, ExtJS2, ExtJS3, ExtJS4, ClosureLib, YUI3, SproutCore1, qooXdoo1, Dojo1, jQuery1, and jQueryUI1. These are JSON files, and I can make some tweaks and add better support for individual classes in each framework that way.

Firefox and Firebug updates:The other problem is that the extension will break on pretty much every new version of Firefox and Firebug. Compatibility for extensions is not big priority. And remember, Mozilla will be releasing Firefox 4, 5, 6, and 7 this year. There will be a new Firebug version each time. And both projects will have minor version updates, though those will hopefully not cause compatibility issues. And think about Chrome changing major versions every six weeks. (Though, in that case they have such a tiny API that these issues should benegligible-- hopefully).

Illuminations just won’t work without me making continuous updates to it. And none of those are for new features, or new browsers. And there can be a lot of work for each of those. Hopefully, it is a little more obvious that Illuminations is a service more than a product. If not, then maybe it is more obvious why at leastI think it is!

Cheers!

Featured Blog Post at Sencha.com

a year ago by sroussey

I have written a guest blog post for Sencha, makers of ExtJS. It is a good intro to the Illuminations Web 2.0 Debugger. Give it a read!

What is new in v1.1.5: ExtJS4, YUI3, and Closure Library, and awesome inspecting

a year ago by sroussey

It is all there in the title: support for ExtJS4, YUI3, and Closure Compiler, and awesome new inspecting! But to get it you need the newest version of Illuminations (currently 1.1.5) and you need Firebug 1.7 (alpha right now, about to become beta next week). The cool inspect feature (more on that in a bit) works on Firefox 3.6 or Firefox 4. But the support for YUI3 and Closure Library require Firefox 4. Same goes for ExtJS4 if files are loading as required rather than in an "ext-all".

The big thing for YUI3 and Closure Library guys is that it is now working for those frameworks. YUI3, in particular, since so much gets "sandboxed". This is a huge productivity boost -- having access to sandboxed components. Thanks to the YUI people for helping! Closure Library (non-compiled) support is pretty hot too, but it must be revision 659 or later. Thanks to Google for the changeset to get this working!

ExtJS4 is a work in progress (just like the v4 code itself). It has some rough spots that are being worked on. Remember, the license for Illuminations is for a year, all updates included! Some neat things for ExtJS4 are how model names percolate. For example, if a store contains a bunch of People models, it might now be named Ext.data.JsonStore<People>. It is one of those little things that will help make everything more intuitive while debugging.

And now for the neat part: Inspect. From the Firebug Wiki:

Find elements with the mouse
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. Except that instead of showing the HTML element, it will highlight and show you the component instead! And the highlight will be in a different color to let you know that it is not HTML you are inspecting. In fact, in the case of the Ext.DataView, it will highlight both the components, plus the data elements (in orange) as seen below:

Blog

Archives

Illuminations v1.1.13 -- Search is here!

Translators Needed!

Introduction to Illuminations for Developers

Illuminations ClientSide Debugger for Firefox 1.1.10

New Firebug 1.9 coming...

Why Subscription Pricing

Featured Blog Post at Sencha.com

What is new in v1.1.5: ExtJS4, YUI3, and Closure Library, and awesome inspecting

Find elements with the mouse