If you do a lot of web development then
chances are that you have worked with the FireBug tool in FireFox.
This FireFox extension has made web application debugging so much easier.
Of course after you have everything working great in Firefox you always
get somebody who opens the web application in a non-standards compliant
browser like Internet Explorer 7 or earlier and everything breaks.
The debugging options for Internet Explorer
have never been great but while working with DoJo in XPages I came across
a cross browser version of Firebug calledFirebug Lite.
It is a client side javascript library that you can include in your webpage
and it will give you the familiar FireBug interface in IE. While it does
not give you all the features of FireBug it is handy none the less.
Now DoJo includes FireBug Lite as part
of it’s packages but I couldn’t figure out an easy way to add the required
isDebug=True part to the djConfig so I decided to go another route and
just manually add the FireBug Lite code to my application. I’m going to
use the Phonebook application I wrote for the Learning Xpages series to
demo how to add it into an XPage application.
To do it I first visited the getFirebug
website and downloaded the Firebug-lite.js javascript file. Then I went
to the Code – Script Libraries section of my application and created a
new JavaScript library called firebug-lite and imported the code I had
just downloaded. This is a client side library so make sure you don’t select
the ‘Server Side JavaScript’ option when creating the script library.
Once I had my JavaScript library I created
a new Custom control called ‘debug_FireBugLite’ and dragged in a panel
control. I unticked the ‘visible’ property for the panel and then added
some text to say ‘FireBug Lite’. My reason for this is so when I include
the custom control on a XPage I’ll have a visual clue that the control
is there instead of a blank box that would normally appear.
Next in the resources setion of the
overall control properties I added my script library resource
If I save and then include this control
in any of my xpages then the firebug lite console will appear however I
don’t want it to appear to end users so I also set a ‘rendered property
for the script library. To do this I went to the ‘All Properties’ section
of the control and expanded out the resources section.
I then clicked the diamond for the rendered
property and entered in the following code
Now when the end user looks at my application
the firebug lite console does not get loaded but if the developer looks
at the page and they have the DEBUG role in the ACL the firebug lite console
will be displayed.
You could, of course, just add the script
library to each of the XPages in your application instead of adding a custom
control but I think that breaking it down into a custom control makes it
easier.
Dec's Dom Blog 