Recently at work, I asked to build a web-based report designer, and this must be all at client side, so I turned to play around with JavaScript, it sounds pretty until I reach the point where I have to debug dozen lines of code, classes, functions…. Especially when I have to debug mouseMove event, watching width, height, left, top properties.

Window.alert() does not serve me, so I workaround this and try to make my debugging more dynamic, writing specific value, watching variables …

Div element was the hero in this battle, I put div and dynamically I started to write my individual values and properties to it using .innerHTML property, and everything seems to be okay.

After debugging and writing 10 values, I want to change the values I debugged and watching new values, so I started to comment all last wrote values , It starts to bother me,  type comment operator then remove it, type remove type remove….

So I decided to build a small javaScript debugger using div element as a primary element

I wrote I jsDebugger class and start to put methods support our goals

·         Write(string) //to write to debugging board(div)

·         WriteLine(string)//to write on debugging board with new line

·         Clear()//clears debugging board

·         stopDebugging()//stop writing values on debugging board so you don't have to go an comments all wrote values : )

One last thing, you can configure jsDebugger using a config object in constructor (it's optional)

Configuration contains

writingColor // the color of write

height//the height of debugging board (div)

bgColor// div background color

borderWidth// div border width

borderStyle// div border style

borderColor// div border color

fontFamily// writing font type

fontSize// writing font size

enabled:true// enable or disable jsDebugger

Like this

d = new jsDebugger( {

        writingColor:"black",

        height:"auto",

        bgColor:"#D0CFCC",

        borderWidth:"3px",

        borderStyle:"solid",

        borderColor:"gray",

        fontFamily:"Calibri",

        fontSize:"15px",

        enabled:true}

    );

Downloads:

• jsDebugger class
  
• Demo