I do a lot of JavaScript authoring at my day job. (I create user interfaces for web based applications, on top of other general web-site-related stuff)
I am always tickled by this, as I took the job not knowing a lick o’ JavaScript, and now I feel quite confident with it. (I’m no PPK, but hey. I’m competent)
If you do a lot of web development, or serious web design, you quickly discover that Windows Internet Explorer has lousy JavaScript error handling.
First there’s that stupid icon in the lower left of your browser window that announces to the world “hey this doofus can’t write a decent script”. Clicking that icon yields cryptic useless error messages that only an engineer could love (with zen-like seemingly arbitrary line numbers to boot).
I use Firefox’s JavaScript console at work (Windows) and both Firefox and Safari at home (Mac OS X - yay!) for JavaScript debugging. Both of these are highly useful.
However both the Windows and Mac version of Internet Explorer are just sub-par for JavaScript debugging.
In addition to not being useful for debugging while authoring JavaScriptat some point the interfaces I design are going to end up in production, supported by someone else. So there will be a JavaScript error at some point.
If (when) that happens, I don’t want to deluge the poor future users with scary yellow danger icons in their browser.
So I created this error handling object to capture errors and send them to a nice clean new browser window.
By setting “_debug” to “true” error reporting is enabled, showing all the errors that might normally appear in the browser’s default JavaScript error reporting console in a plain text popup window. This text can be copied into an email to send to tech support, or back to that flaky, arty UI person who got us in this mess to begin with. (ahem).
Once the application/web site/ whatever is in production, set “_debug” to false to simply have the errors fail quietly without angry icons or pop up windows.
But there’s more. Say a user is reporting seemingly broken functionality. Append “?debug” to the end of the URL, and reload the page. Viola debugging is back in full effect and errors are reported.
This error handler works in:
• Mozilla/FireFox (all platforms) - perfectly. (though you may not get onload errors displayed if you have popup blocking enabled)
• Windows and Mac Internet Explorer - really well (IE still has cryptic error messages…but hey. at least you can copy and paste them)
• Apple Safari - not at all.
Unfortunately Safari and other KHTML based browsers do not yet support the onerror event on the window object, so there’s not a means to capture errors at this time. This is ok however as Safari, by default, allows JavaScript to fail gracefully and quietly without alarming the user to something they typically can’t fix. (And there is still the JavaScript console available for developers) So it’s only a minor drawback .
The full content of the script is below. I typically place this in its own external JavaScript file and link to it in each HTML document. See a working example.

JavaScript Debugger

// enable debugging
var _debug = true;
// true = use custom debugger
// false = don’t report errors

/* debugger object */
var Debugger = {
thisWindow: window,
msg: null,
url: null,
line: null,
console: null,
init: function(msg,url,line) {
if (_debug==false) {return true;} // break, don’t report errors
Debugger.msg = msg;
Debugger.url = url;
Debugger.line = line;
Debugger.errorHandler();
return true;
},
errorHandler: function() {
var msg = “Line: “+Debugger.line+”; ” +
Debugger.msg + “
” + Debugger.url + “

“;
if (Debugger.console==null || Debugger.console.closed) {
Debugger.console =
Debugger.thisWindow.open(”",”console”,”width=600,height=300,resizable=1,scrollbars=1″);
Debugger.console.document.open(”text/html”);
}
Debugger.console.focus();
Debugger.console.document.writeln(msg);
},
setDebugging: function() {
if (Debugger.thisWindow.location.search.match(/debug\b/)) {
_debug = true;
alert(’Debugging Enabled!’);
}
}
}

// apply debugging handling
window.onerror = Debugger.init;
var applyDebugOnLoad = (window.onload) ? window.onload : function(e){};
window.onload = function(e) {
Debugger.setDebugging();
applyDebugOnLoad(e);
}

« Previous | Next »

Leave a comment.
Trackback.