CodeProject: JavaScript Debugging Tool. Free source code and programming help

Report Article

Discuss

Send to a friend

14 votes for this Article.

Popularity: 5.17 Rating: 4.51 out of 5

Download source files - 3.67 Kb

Sample Image - Javascript_Debugging_Tool.png

Disclaimer

The author does not accept responsibility for any effects, adverse or otherwise, that this code may have on you, your computer, your sanity, your dog, and anything else that you can think of. Use it at your own risk. (Deja Vu? I also love the Allegro disclaimer.)

Quick and dirty tour

So you don't like to read all articles you see on the web, or you don't have time for it? Then, just download the source files, and open the "debugDemo.htm" file on your favorite browser.

Background

Although the inner works require you to be an advanced web developer to understand and improve it, you need only to have basic knowledge of HTML and JavaScript to use the tool.

Introduction

Alright, you may be thinking right now: "I have the last Fire Bug extension for FireFox, I've got my WebDev bar for Fire Fox and Internet Explorer, and even Opera has a concrete JavaScript console. Why would I care about a tool for JavaScript debugging?". Well, please, let me try to convince you!

The need for a debug tool

Although browsers have their JavaScript console, it's mostly common to see people still use those famous alert("I'm here!") code all along their HTML code. In most development environments, it is recommended, if not required, that you get yourself a Fire Bug like extension to improve your debugging capabilities. However, sometimes, you need to deal with browsers that do not have such debugging power, or maybe you just can't install extensions. You may also need a place to write variable values as time goes by and as events occur on your page without thoese annoying alert pop-ups interrupting your navigation. You may also need more robust exception handling on your code, to help you debug systems, even when they are already deployed on servers. Enough talking, let's get to the code!

The debug tool

The debug tool is composed of a js file (and an internal css file), which must be included on your HTML page, as shown in the example below:

<html>
    <head>
        <title>Debug Demo</title>
        
        <script type="text/javascript" src="DebugHelper.js"></script>
...
    </head>

When you run the debug tool by opening its window, you will see a floating popup like the image in the top of this article, where your will find all information you send to one of these class methods: Message(), Warn(), or Exception(). You will also see error messages when an exception occurs on your code. The tool allows you a great deal of control on the type of information you want it to display, its default name, and window style.

//debug helper class to control popup windows

var DebugHelper = function()
{
    this.Active = true;
    this.OpenWindowOnFirstMessage = true;
    this.ShowCallee = true;
    this.ShowInputArguments = true;
    this.ShowCaller = true;    // may not work on all browsers, since it is 

                               // deprecated

    this.ShowCallStack = true; // may work on few browsers [Gecko], since 

                               // it is not a W3C recommendation

    this.ShowException = true;
    this.ShowURL = true;
    this.ShowLastModified = true;
    this.ShowReferrer = true;
    this.VerboseMode = false;
    //reference to the popup window

    this.DebugWindow = null;
    this.CssStyleFile = new String("debugHelper.css");
    this.WindowStyle = new String("left=0,top=0,width=300,height=300," + 
                                  "scrollbars=yes,status=no,resizable=yes");
    //no spaces to run correctly on internet explorer

    this.WindowName = new String("JavascriptDebugWindow");
    this.WindowTitle = new String("Javascript Debug Window");
}

Although the debug tool has so many configurations, you don't usually need to change it as the default values will suffice.

Using the debug tool

As a code is worth thousand article words, let's start with it:

<body>
    <button onclick="ShowMe('showWindow');">Show the debug window</button>
    <button onclick="ShowMe('message');">Show me a message</button>
    <button onclick="ShowMe('warn');">Show me a warning</button>
    <button onclick="ShowMe('exception');">Show me a exception</button>
    <button onclick="ShowMe('throwError');">Throw a Error()</button>
    <button onclick="ShowMe('hideWindow');">Hide the debug window</button>
    <script type="text/javascript">
        function ShowMe(type)
        {
            try
            {
                switch(type)
                {
                    case "showWindow":
                        debugHelper.ShowWindow();
                        break;
                    case "hideWindow":
                        debugHelper.HideWindow();
                        break;
                    case "message":
                        debugHelper.Message("message");
                        break;
                    case "warn":
                        debugHelper.Warn("warn");
                        break;
                    case "exception":
                        debugHelper.Exception("exception");
                        break;
                    case "throwError":
                        throw Error("throwing error");
                        break;
                }
            }
            catch(ex)
            {
               debugHelper.Exception(ex, document.URL, document.lastModified,
                                     document.referrer, arguments);
            }
        }
    </script>
...
</body>

Our demo page is a straightforward read, where you must mind some good coding practices. The function ShowMe() could be any other function created by you, as long as you maintain the following code skeleton:

function NameOfYorFunction(anyParameters)
{
    try
    {
        //your code here

    }
    catch(ex)
    {
        debugHelper.Exception(ex, document.URL, document.lastModified, 
                             document.referrer, arguments);
    }
}

Keeping your code under a TRY/CATCH block will guarantee that you code safely and that you catch any undesired script behavior. By disabling the debug tool, you may safely deploy your system without changing your code.

My code is already deployed, can this debug tool help me?

Although I cannot see all possible situations you may use this code in, my common answer is yes, it may be. If you add TRY/CATCH blocks in your code, you will benefit from the automatic exception writing, and if you call message methods, you will be able to debug your system. But how do you turn debugging ON without annoying other system users? There is a trick for this matter. Leave your debugHelper disabled on the JS file, open the system on a browser, and now type "javascript: debugHelper.Active = true; debugHelper.ShowWindow();" on the browser address textbox. Now, just navigate through the system. This change will affect only you, and the moment you close the browser, the debugHelper will get back to its disabled state. Pretty simple, uh?

What about security?

If you are thinking that anyone could activate debugging on your system, yes, you are right. This debugging technique is not for use with sensitive or private data. Although JavaScript is not indented to hold any type of sensitive data at all, it is always worthy to give that tip.

Conclusion

And that’s it for the JavaScript debugging tool! I hope you enjoy it as much as I do.

References

Some great resources on the web:

W3 Schools (1999). Last access on 05/26/2006.
W3C (1994). World Wide Web Consortium. Last access on 05/26/2006.

History

09-29-2006:
- Original article.
09-29-2006:
- Added “ex.message” to the catch block, since some browsers do not overwrite the toString() method to show the message property automatically.
10-02-2006:
- Added functionality to catch syntax errors and page loading errors. Added another example HTML page to the source code.

01-13-2007:
- Added extra information to exceptions: caller, callee, arguments, lineNumber [Moz] , number [IE], call stack [Moz] and error type. Changed behavior so TRY/CATCH blocks can pass strings or exceptions to debugHelper. Changed default behavior to all ENABLED.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Roberto 'Obi-Wan' Colnaghi Junior

Roberto Colnaghi Junior is an experienced developer, winth background on both web and windows worlds. He's passionate about technology, game programming and AI. His personal web site can be found at www.rationalcode.com.

To contact Junior, e-mail him at colnaghijr@gmail.com.