XPages – How to get a proper JavaScript debugger in XPiNC!

Posted by:

The low down: Download FireFox 5 + FireBug 1.8.4 and BAM! Instant CSJS debugger!

Yup! It’s basically that simple (for once). Read on for the gory details…

In one of my client projects I had the opportunity to work with XPages in the Notes Client, or XPiNC for short. Being a developer with almost 20 years experience I take “limited pleasure” in developing for the Notes client. My opinion is that you’re too restricted in what you can achieve front-end and graphical layout is unmistakably Notes – in a bad way. IBM Notes has it’s benefits – like you only have to worry about the shortcomings of one client, where as web clients have a legion of different vendors and versions. Sometimes even the same vendor is incompatible with it’s own versions! Yes – I’m looking at you Internet Explorer! But still, the benefits of web based development outweighs the negatives, at least for me.

But, hey! We have a new kid in town: XPages! Who’s supposed to run in the Notes client, more or less without modification…

“Wow! What a totally amazing, excellent discovery!”-Wayne Campbell


Excellent! Or – It could have been

XPiNC uses a browser to render your XPage inside the Notes client. We have been able to do parts of this for years, by utilising an embedded browser control in the Notes client:

Domino Designer – Form – Create / Object / Control – “Microsoft Web Browser”

You can see in action here, from an application I did a while back. We’re jumping straight into the action at 3:04 showcasing the embedded  “Microsoft Web Browser”-control in an ordinary Notes form, no XPages as far as the eye can see!

video demo of the "Microsoft Web Browser"-control in action

Video demo of how an embedded web browser control can interact with a Notes client, without using XPages

Yes – Yes! I Know! It doesn’t have the full potential of XPiNC, like offline support, field level encryption and so on. But still, it usually impresses the “general population”. You might notice that the performance of the web part of the GUI isn’t stellar? It’s because the client used IE7 which is “less then great” (to put it kindly) at performance in general and JavaScript in particular.


Speaking of old browsers

Anywho! Where was I…? Yes! This could be really great news – the ability to run XPages in the Notes client. But it has some shortcomings. The browser we’re stuck with is something called a “XULRunner”, more about that in a bit. The version of your embedded browser differs depending on the version of IBM Notes in use. In my case: IBM Notes 8.5.3FP1 UP1 translates to R5.0 of XULRunner. One way to check what version your particular installation is using is to run a JavaScript snippet: window.navigator.appVersion on an XPage in your environment. Now, there’s a gazillion different ways to achieve this. Well, maybe not a gazillion exactly – but there abouts. I will demonstrate a particularly cumbersome way, just because I can! (And you will see some added benefits to your development environment in the process).


Getting FireBug Lite

When I first started dealing with XPiNC I found that you can set some params in the XSP.properties file to enable some version of FireBug Lite:

That’s one way of doing it. But you’re stuck with a really old (and ugly!) version (surprise! NOT!) A much better way is to inject the FireBug addOn thru an Eclipse plugin. This way, no other developers will be bugged (pun intended) by the debugger and you can always enjoy the latest version of FireBug, regardless of what IBM seems fit.

So, without further ado, I present the excellent work by Mr Karsten Lehman: XPiNC app development tool


XPiNC front-end performance

Once that is over and done with, you can run my earlier JS snippet:  window.navigator.appVersion – In my case that would return “5.0 (Windows; sv)”.

– Ok, great! We now know that you’re running R5.0 of something called a “XULRunner”. That’s neat and all! But why should I care?

Well, because XULRunner 5.0 is in all useful purposes equivalent to FireFox 5.0!

– Wohoo! Sweet! But.. But? Isn’t that like reallllly old?

Yes, yes it is. It was released back in the day: 21 of June 2011. 14 releases, or almost two years ago (That’s like 20 “web years”). The latest version, at the time of this writing, is R19.0!

(Earlier version of IBM Notes uses the XULRunner equivalent of Firefox 3.6.x)

HTML5 support

Below is a comparison between the HTML5 capabilities between the different versions of Firefox currently used in IBM Notes vs the latest release of Firefox available:

Comparing HTML5 capabilities Firefox browser versions

[Click the image for the full comparison.]Comparing the HTML5 capabilities of the different versions of Firefox

As you can see the capabilities aren’t great, but whether it’s a real problem is entirely up to the application being developed. Put simply, if you’re not taking advantage of the capabilities in HTML5 (you should!) then this won’t be a problem.

To get some ideas, regarding the benefits of using HTML5, I recommend the site HTML5Rocks.

CSS3 support

But the limitations doesn’t end there I’m afraid. I’ve included a comparison for CSS3 support below. Showing R3.6, R5.0 and R19 in that order. (Click the image for the full comparison! But be warned, it’s BIG!)

Comparing CSS3 support across Firefox versions

This is not an exhaustive comparison, but should give a good indication.

If you click the image, you will be painfully aware of small nuances that will plague your road to the pixel perfect heavens of stardom!

JavaScript performance

If that wasn’t bad enough, the JavaScript performance is about 200% faster in Firefox 19 compared to Firefox 5. (Haven’t been able to test Firefox 3.6, but do expect it to be quite a bit slower.)

Running the browsers thru the ECMAScript testing page (click here to test it yourself) will make you even more depressed. Firefox 3.6 fails in 4247 tests, Firefox 5.0 fails 282 and Firefox 19 in 170. Granted that Firefox 5 scores pretty good, but for instance it doesn’t support the very common DOM operation parentElement. Makes you wonder what else it has in store for you programming endeavours doesn’t it?

Basically, what all this boils down to, is that to keep your XPages compatible with XPiNC you have to limit your webpages to the old standard that particular version of Firefox supports (dragging newer browsers down), or support two different versions of your XPages. Not a very appealing proposition either way.

I expected IBM Domino 9 to update the XULRunner, but no luck there. At least the public Beta 1 is still running R5.0 of XULRunner. I’m not expecting this to change for the released version, which is too bad.

Still some good news

If you’re a “Copy / Paste”-developer – who sticks with the default widgets provided with XPages,  then the above probably won’t cause you much headache and I’m afraid you’ve read most of this in vain. Because XPages in combination with Dojo will make most of the differences go away and the ones that are left might be tolerable to you.

But if you like to not only push the envelope, but to kick the crap out of it! Then the above will be the cause of some major grief and sleepless nights.

Hopefully you can limit some of the pain, revelling in the fact that you can do your front-end debugging using all the glory of FireFox 5 instead of mocking about with the embedded XULRunner client in the Notes client. This includes installing a big fat and juicy version of FireBug 1.8.4 in FireFox 5, no more debuggers on a diet for you!

You can download FireFox 5 here and FireBug 1.8.4 here.

Yet to come

I plan a follow up post where I share my experience developing for XPiNC, like potential pitfalls and how to circumvent those.

Keep watching this space!

In the meanwhile you can follow me @JBoive &| Google+