Blog, Steven Roussey, Blog!

Featured Blog Post at Sencha.com

a year ago by sroussey
Tags extjs illumination
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! Don't forget the Illuminations site itself!
   
   
   
1 Comment
Read More

Illuminations is Growing!

a year ago by sroussey
Tags illumination
Average Daily Users this Week +31.69% from last week

This is more than the average of 20% per week, as Firebug had an update (1.6.2) and that tends to bump the numbers. I expect the Firefox 4.0 and Firebug 1.7 dual release to really make things pop in a few weeks! Maybe I'll get another of those > 100% increases. Crossing my fingers!

http://www.illuminations-for-developers.com/
   
   
   
0 Comments
Read More

Hockeypuck, while it lasts... (one day)

a year ago by sroussey
Tags illumination
Click image for larger version:
2010-12-02_0017.png
   
   
   
0 Comments
Read More

Quick Peek at Illuminating Dojo

a year ago by sroussey
Tags debugging dojo illumination
Right clicking to find and inspect something in the Illumination panel of Firebug:

              Illumination-dojo-contextual-2010-11-13_



Looking around at various widgets, selecting one to see some info on the side properties panel, and the mouse is above it so it is highlighted in blue in the page itself:

 2010-12-10_2255.png


[Edit: 12/11/2010] Here is an example of the Events/Connects side panel

 2010-12-11_1325.png
   
   
   
1 Comment
Read More

Illumination and ExtJS

a year ago by sroussey
Tags debugging extjs illumination
Firebug 1.6 is almost ready for release, and before it goes final I want a few more people to start using, playing with, and testing my extension to Firebug 1.6 called Illumination for Developers:


It makes Firebug know all about ExtJS. And it is very very handy, and so let's discuss a few of the features:


Object Naming

It presents ExtJS 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:

Illumination-console-2010-11-11_1201.png


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 Illumination, 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:

Illumination-2010-11-11_1334.png

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, inspect the Store (use the side panel to see its records!), and generally browse around. Have fun!
 
   
   
   
0 Comments
Read More