Using Hash for JavaScript Debugging

September 26th, 2007

No, I don't recommend smoking hash before doing your JavaScript debugging :) But I did figure out a technique which you can use to switch a page in and out of debugging mode.

What happens if you need to debug a site that's getting traffic, and you don't want everyone getting your alert() messages or whatever else you need to debug?

Well why not check location.hash and look for a special keyword:

function debug_mode() {
    return location.hash == '#debug';
}

if (debug_mode()) {
    alert('We are in debug mode!');
}

Now you can just add #debug to the URL (and hit enter) to turn on debug mode, or just drop the #debug to turn it off. You can even have more than one special "mode" and use different hash values to switch between these modes.

Comments

1 . Volker on September 27th, 2007

If you're developing with Firebug, the following code gives you another nice opportunity for debugging:

try { console.log("foo"); } catch(err) {}

...will only log in the Firebug console, if the browser knows the function. So your users won't see it, either does the evil IE.

2 . Jesse Skinner on September 27th, 2007

Good point, Volker. I often add a chunk of code when I'm working just in case I forget a few console.log's:

if (!window.console) {
window.console = {
log: function(){}
};
}

But I needed to come up with the hash technique to debug some JavaSscript in Internet Explorer on a live site.

3 . Binny V A on September 27th, 2007

Thanks for the tip - I have used '?debug=true' to show debug messages in PHP and server side. So I am going to do something like this...
function debug_mode() {
return document.location.href.match(/debug/);
}

4 . Tom on September 28th, 2007

Sorry to disappoint you, but most professional web developers have been using this (or a similar) technique for years.

5 . jeanmarie on October 2nd, 2007

@Tom
Thx for this useful comment. I was not aware of this dusty technique, because i'm a lame newbie.

6 . hu dongsheng on November 13rd, 2007

Thanks. I like Javascript.

7 . grayger on March 28th, 2008

Thanks for the tip. Using window.console in FF also looks good.

Comments are closed, but I'd still love to hear your thoughts.