How to Debug Javascript Code using Browser Console API

When compared to other programming languages, debugging Javascript requires a different approach as we use our browser as a development environment. In other languages, you can catch lot of the issues in the IDE itself during development process.

In javascript, debugging is easier when you follow the best practices during development. The following are some suggestions:

• Keep consistent way of naming variable/properties and functions/methods. Naming convention should be short and meaningful.
• Write modular script which helps to group a set of related task together.
• Use var keyword to declare variable in javascript as it will avoid it from global scope. Variables in global scope is not favourable for implicit garbage collection.
• Use appropriate javascript design patterns according to your requirement. Design patterns implicitly avoids developers from coding certain types of logical errors.
• Be cautious while using comparison operator (= =) and equal( = ) operator. Similarly while using single quotes( ‘something’) and double quotes (“something”).
• Unit testing after development of each module will stop a bug from becoming a monster in a later stage.
• Avoid formatting the whole javascript code in single line during debugging stage. i.e Don’t minify the JS code before deploying it to production, as it will make it very difficult to set breakpoints using a debugging tool.
• Always comment your code properly, which will help you during debugging stage.
• Javascript linting can be done which enforces best practices and also helps in avoiding performance issues.

The following APIs that comes along with the browser can be used along with your debugging tools that you may use for your Javascript code.

Use Console api for debugging

Console api exposes certain methods using which we can write to the browser console which gives at the detailed insights and traces of the script execution.

Here are the few methods provided by this api generally in all major browsers:

1. console.log( Object/String )

This method can be used to display a string, javascript object or a DOM element in the browser console. This can be placed anywhere in the script where we want to get insights of above mentioned features at that line of script during its execution.

We can also pass format specifiers as the first argument depending upon the browser which we are using. For example:

var y = document.getElementById("someId");
// logs the javascript object
console.log("%o", y);
console.log("The script ends");

2. console.assert( expression, object )

This method logs the second argument( Object ) if the first argument( expression ) evaluates to false. For example:

var someString = document.getElementById("textBox1").value;
console.assert( someString.length > 0, "Blank input" );

3. console.count( label )

This method displays the count each time this method is executed in the script. It can be used to see how many times a function has been called. For example:

function computeSomething( ){
console.count("Computed Something");
}

If the function get called 2 times, the log on console will display the following:

Computed Something: 1
Computed Something: 2
Computed Something: 3

4. console.time( label ) , console.timeEnd( label )

console.time starts the time with label and console.timeEnd displays the time elapsed since the console.time has been called with given label. The strings passed as label should be same to get the time elapsed. For example:

function evalSomething( ){
  console.time( "Evaluation");
  // some evaluation logic goes here
  console.timeEnd("Evaluation");
}

The log of the above script in chrome browser console may be as follows:

Evaluation: 0.667 ms

5. console.trace( object )

This displays the stack traces from where this method is called with a link path to that line in the script. Only some browser allow passing object as a parameter to it. For example:

function someLogic( ){
console.trace( );
}

6. console.group( Object/string ) , console.groupEnd( )

These methods can be used in combination to group the logs in the console which can be seen formatted in console by indentation to specify the group under which it comes. For example:

console.group( "some task of level 1 started");
console.group("some group sub task of  level 1 started");
console.groupEnd( );
console.groupEnd( );

The log of the above script will be as follows, please not that log is indented in second line:

some task of level 1 started
	some group sub task of level 1 started

Similarly to the above 6 methods, there are lot more methods that are browser specific.

Use remote debugging

Some browsers like Google Chrome provides remote debugging option within their debugging tools. This is helpful to debug remote javascript code.

Use web debugging proxies

We can also use the web debugging proxies like Charles and Fiddler for using the local javascript files as proxy to the application in production/live. The debugged files can be pushed later in to the production which saves a lot of time and helps us to see the real time effect of it in the production or live application.

Use command line api for debugging

There are command line api’s which can be used to get insight by using it directly in browser console.

For example: $_, $ , $0, $1, debug( Object), monitor( Object ), keys( Object )

It is worthwhile to explore these in the corresponding browser api documentation and use it while debugging your javascript using the developer tools bundled with them.

Use Breakpoints

We can use the debugger tool bundled with the browsers to set the breakpoints in the script and execute the script line by line to get the insights using the command line api methods or the console api methods.

The following are the debugging tools that comes with various browsers:

• Firefox has firebug as an addons.
• Chrome has integrated Developer Tool.
• Similarly Internet explorer have integrated Developer Tool.
• Safari also have integrated Developer Tool.
• Opera have Dragonfly integrated with it.

All the above debugging tools have the ability to set breakpoints and debug our script. In Google Chrome, we can even set a breakpoint by adding the word “debugger” in your script, which is again a utility function provided by the Chrome API.