the Future of the Web
  • Home
  • Hire Us
  • Articles
  • About
  • Contact
  • 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.

    Tags: javascript debugging
    View 7 Comments | Add a comment
  • Comments

    1. Volker at 11: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 12:05pm 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 1:02pm 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 5:52pm 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 10: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 5:15am on November 14, 2007

    Thanks. I like Javascript.

    7. grayger at 5:58pm on March 28, 2008

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

    Add a Comment

    Note: HTML tags and entities will be converted so that they are displayed as you type them. This means if you type in <em>, people will see <em>, and if you type &lt;em&gt;, people will see &lt;em&gt;.

  • Request a Quote

  • Jesse Skinner

    Jesse Skinner
    • Hire Me
    • About Me
    • Email Me
    • RSS Feed RSS Icon
    • @JesseSkinner
  • Recent Articles

    • jQuery Live Events
    • I need web developers
    • buttons need type="submit" to submit in IE
    • Win $200 in a Web Dev Writing Contest
    • Use Arrays in HTML Form Variables
    • 5 Reasons Freelancers Can Succeed in a Shrinking Economy
    • Keeping a Live Eye on Logs
    • Using PHP's empty() Instead of isset() and count()
    • Testing Web Pages with Lynx
    • Stop CSS Background Flickering in Internet Explorer 6
    • See All...
  • Categories

    • javascript (39)
    • links (21)
    • about (19)
    • web (14)
    • html (12)
    • server (11)
    • css (8)
    • browsers (8)
    • carnival (7)
    • work (6)
    • design (4)
    • seo (4)
    • ads (4)
    • standards (4)
    • events (4)
  • Older Articles

    • February 2009
    • January 2009
    • December 2008
    • November 2008
    • October 2008
    • July 2008
    • June 2008
    • May 2008
    • April 2008
    • February 2008
    • January 2008
    • December 2007
    • November 2007
    • September 2007
    • August 2007
    • July 2007
    • June 2007
    • May 2007
    • April 2007
    • March 2007
    • February 2007
    • January 2007
    • December 2006
    • November 2006
    • October 2006
    • September 2006
    • August 2006
    • July 2006
    • June 2006
    • May 2006
    • April 2006
    • March 2006
    • February 2006
    • January 2006
    • December 2005
    • November 2005
    • October 2005
    • September 2005
    • August 2005
    • April 2005
    • See All...
Copyright © 2009 The Future of the Web