• Using Hash for JavaScript Debugging

    Sep 26 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 at 5:50am on September 27, 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 at 6:05am on September 27, 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 at 7:02am on September 27, 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 at 11:52am on September 28, 2007

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

    5. jeanmarie at 4:46am on October 2, 2007

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

    6. hu dongsheng at 11:15pm on November 13, 2007

    Thanks. I like Javascript.

    7. grayger at 11:58am on March 28, 2008

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

    Commenting is now closed. Come find me on Twitter.