People say Ajax is hard…and this may be why.
I spent some time playing with Bob Buffone’s newest work on Ajax over the last few days. Bob built an xModify processor that runs on either jQuery, Dojo or Mootools. The xModify processor is powerful but quite lightweight (10KB without gzip). There will be more news on xModify but that is not the point of this post. Anyway, I wrote a little app that uses his stuff. The entire application uses three JavaScript file: jQuery library (70KB), xModify processor (10KB) and my little JavaScript file (2KB).
My target is to run the little app on Internet Explorer and FireFox. In particular, I have used FireBug on FireFox during development. FireBug is a popular FireFox browser add-on that provides JavaScript debugging capability. After a little while, without a lot of effort (thanks to FireBug, jQuery and xModify), my app is working. It does exactly what I intended. Flawlessly.
Then I applied a modified version of ShinkSafe, reducing the number of round trips as well as download size. ShrinkSafe is a tool provided by Dojo that compresses JavaScript files. Using ShrinkSafe, the three JavaScript files are combined into one and the total download footprint also reduced by about 30% to 40%. The result worked well on both IE and FireFox. At this point, I happily concluded my little project and moved onto my day job of web browsing.
However, it turns out that my browsing experience is unusually slow at this moment. Eventually I realized it is because I have my FireBug turned on due to my earlier little project. After I disabled FireBug, web browsing resumed its normal performance.
A few hours later when I tried to run my little application again, it surprisingly failed on FireFox. The app loads into FireFox, but it does not respond to any user interaction. It is not frozon or dead, as I can still type into text fields. It looks fine too as the UI is still rendered correctly. But it is just not responding to any event such as “submit” or “click”. On IE, the application is still working fine. The only thing that’s changed is that I have FireBug disabled now. Would disabling FireBug break my app? Hard to imagine. Nevertheless, I re-enabled FireBug. Surprisingly the application is working again. If I disable FireBug, the application stops working. So does disabling FireBug actually break my application?
There is one error message on the JavaScript console: Error: uncaught exception: [Exception... "Not enough arguments"
nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS
frame :: http://localhost:1000/app/javascript/jquery/all.js ::
anonymous :: line 1" data: no]
What does the error message mean? Where does the error come from?
My natural intuition is that my modified ShrinkSafe is the trouble maker here. It may have screwed up one or two characters when compressing jQuery, xModify or my own JavaScript code. For example, it may have incorrectly removed a “;” from the JavaScript source. IE browser and FireFox with FireBug turned on are able to handle this issue but FireFox without FireBug is not able to interpret JavaScript statements with a missing “;”.
Well, now enters a four-hour exciting debugging session….
After four hours, I finally figured out the problem. It is not FireBug. It is not ShrinkSafe. It is actually a coding issue in my little JavaScript code. In my code, I used “XmlHttpRequest” object. Here is the code snippet:
if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if (window.ActiveXObject)
req = new ActiveXObject((navigator.userAgent.toLowerCase().indexOf(‘msie 5′) != -1) ? “Microsoft.XMLHTTP” : “Msxml2.XMLHTTP”);
req.open(“GET”, url, false);
req.send();
The problem is the “req.send()” statement. When you call “send()” method for an XHR object, FireFox expects an argument for this method, even if it is “null”. Without an argument, FireFox throws the above exception. Once I changed “req.send();” to “req.send(null);”, the problem went away.
The strange thing is that that code works fine on IE, further, works fine on FireFox if FireBug is enabled. In a typical development environment where FireBug is enabled, the problem is never exposed. And then, in a production environment where FireBug is disabled, you get an error. But the message says “Error: uncaught exception: [Exception... "Not enough arguments"
nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS
frame :: http://localhost:1000/app/javascript/jquery/all.js ::
anonymous :: line 1" data: no]“.
Can the message be any more esoteric?
Happy coding!