Click here to Skip to main content
11,580,580 members (66,303 online)
Click here to Skip to main content

JavaScript Debugging Tool

, 3 Oct 2006 68.5K 459 50
Rate this:
Please Sign up or sign in to vote.
This article introduces a very simple, and yet very versatible, JavaScript debugging tool for cross-browser development. Strongly based on web standards, this code runs on IE5+, Opera, and Gekco based browsers (FireFox, Netscape).

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:

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

Share

About the Author

Roberto Colnaghi
Software Developer
United States United States
I'm a passionate developer and videogame player.
Been in touch with Objective-C, Javascript, C#, C, Guild Wars 2, Tera and many more.

Javascript is one of my favorite languages.

You may also be interested in...

Comments and Discussions

 
QuestionDo I Have a Configuration Problem? Pin
BobCrunch18-Apr-12 8:21
memberBobCrunch18-Apr-12 8:21 
AnswerRe: Do I Have a Configuration Problem? I found the answer myself Pin
BobCrunch20-Apr-12 6:33
memberBobCrunch20-Apr-12 6:33 
GeneralRe: Do I Have a Configuration Problem? I found the answer myself Pin
Roberto Colnaghi20-Apr-12 11:54
memberRoberto Colnaghi20-Apr-12 11:54 
Generalsome code Pin
zleeway29-May-07 2:48
memberzleeway29-May-07 2:48 
GeneralRe: some code Pin
Roberto 'Obi-Wan' Colnaghi Junior16-Oct-07 17:59
memberRoberto 'Obi-Wan' Colnaghi Junior16-Oct-07 17:59 
Generalautomatically opening error console on error Pin
ab62843-Jan-07 21:48
memberab62843-Jan-07 21:48 
GeneralRe: automatically opening error console on error Pin
Roberto 'Obi-Wan' Colnaghi Junior8-Jan-07 4:59
memberRoberto 'Obi-Wan' Colnaghi Junior8-Jan-07 4:59 
GeneralUrgent help required Pin
ab62842-Jan-07 1:46
memberab62842-Jan-07 1:46 
GeneralRe: Urgent help required Pin
Roberto 'Obi-Wan' Colnaghi Junior2-Jan-07 3:27
memberRoberto 'Obi-Wan' Colnaghi Junior2-Jan-07 3:27 
GeneralRe: Urgent help required [modified] Pin
ab62842-Jan-07 17:33
memberab62842-Jan-07 17:33 
GeneralRe: Urgent help required Pin
Roberto 'Obi-Wan' Colnaghi Junior8-Jan-07 4:51
memberRoberto 'Obi-Wan' Colnaghi Junior8-Jan-07 4:51 
GeneralGreat job Pin
Massimo Beatini11-Dec-06 22:37
memberMassimo Beatini11-Dec-06 22:37 
GeneralRe: Great job Pin
Roberto 'Obi-Wan' Colnaghi Junior12-Dec-06 0:41
memberRoberto 'Obi-Wan' Colnaghi Junior12-Dec-06 0:41 
GeneralI could've used this in the past! Pin
Shawn Poulson29-Sep-06 1:21
memberShawn Poulson29-Sep-06 1:21 
AnswerRe: I could've used this in the past! Pin
Roberto 'Obi-Wan' Colnaghi Junior29-Sep-06 13:27
memberRoberto 'Obi-Wan' Colnaghi Junior29-Sep-06 13:27 
AnswerRe: great job Pin
Roberto 'Obi-Wan' Colnaghi Junior29-Sep-06 13:28
memberRoberto 'Obi-Wan' Colnaghi Junior29-Sep-06 13:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150603.1 | Last Updated 3 Oct 2006
Article Copyright 2006 by Roberto Colnaghi
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid