JavaScript debugging – keeping track of your variables

One problem that I keep running into writing JavaScript is trying to keep track of all the objects and variables. With other programming languages your IDE of choice helps you step in and out of functions, insert breakpoints and show you how your variables are being modified. What do you do if you are writing JavaScript which doesn’t have this level of support and you don’t want your console logs printing out on a live site?

I use –

   1:  if(window.console && debug){
   2:      console.log('my variables ');
   3:  }
   4:   
   5:  var debug = true;

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

What this statement does is check for an instance of a console. The console is a web development aid included most modern browsers, excluding Internet Explorer.  If it present, “window.console” is true which avoids IE throwing errors when it gets to “console.log”.

The next variable is “debug”. I set this to false once the code is ready.

The benefit is I can log the progress of my program(s) in JavaScript as I develop. If the code is sent back for modifications/improvements/troubleshooting I can turn on the logging and more quickly find out where the problem is. Most useful before 10:30 am and at around 3 pm. 😉

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s