Click here to Skip to main content
13,737,233 members
Click here to Skip to main content
Add your own
alternative version


52 bookmarked
Posted 28 Sep 2006

JavaScript Debugging Tool

, 3 Oct 2006
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


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.


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.


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:

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

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," + 
    //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:

    <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)
                    case "showWindow":
                    case "hideWindow":
                    case "message":
                    case "warn":
                    case "exception":
                    case "throwError":
                        throw Error("throwing error");
               debugHelper.Exception(ex, document.URL, document.lastModified,
                                     document.referrer, arguments);

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)
        //your code here
        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.


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


Some great resources on the web:


  • 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.


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 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 Colnaghi16-Oct-07 17:59
memberRoberto Colnaghi16-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 Colnaghi8-Jan-07 4:59
memberRoberto Colnaghi8-Jan-07 4:59 
GeneralUrgent help required Pin
ab62842-Jan-07 1:46
memberab62842-Jan-07 1:46 
GeneralRe: Urgent help required Pin
Roberto Colnaghi2-Jan-07 3:27
memberRoberto Colnaghi2-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 Colnaghi8-Jan-07 4:51
memberRoberto Colnaghi8-Jan-07 4:51 
GeneralGreat job Pin
Massimo Beatini11-Dec-06 22:37
memberMassimo Beatini11-Dec-06 22:37 
GeneralRe: Great job Pin
Roberto Colnaghi12-Dec-06 0:41
memberRoberto Colnaghi12-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 Colnaghi29-Sep-06 13:27
memberRoberto Colnaghi29-Sep-06 13:27 
AnswerRe: great job Pin
Roberto Colnaghi29-Sep-06 13:28
memberRoberto Colnaghi29-Sep-06 13:28 

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

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

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06-2016 | 2.8.180920.1 | Last Updated 3 Oct 2006
Article Copyright 2006 by Roberto Colnaghi
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid