Debugging Javascript used to be a tedious task, but due to advances in browser technology (thanks Google) things have improved for poor Javascript developers. Browsers nowadays come fully equipped with tools that allow you to test & debug your code easily.

Let’s look at how it’s done in Google Chrome browser.

First, open up a page, then fire up Developer Tools (Control+Shift+J on PC, ⌥+⌘+J on Mac). It should look something like:

Now let’s debug a piece of code.

First, click on the Scripts (1) tab. This will open the script selector (2) where you select a javascript file to debug.  Now, find the line containing a suspicios piece of code (one you wish to debug) then click on that line number (3). You’ve added a breakpoint – a point at which code execution will stop for for you to examine what’s going on.

Now, reload the page. Execution stops when breakpoint is reached (if it doesnt, your code never reaches the line where the breakpoint is and you should probably look for errors elsewhere). From here, you can inspect the variables or evalue some piece of code inside the console (4).

But wait, let’s have a look at those buttons at top right of the screen (5).

From left to right, these are:

• Pause script execution – Resume script execution until the next breakpoint is reached or script ends.

• Step over next function call – This will execute the following line in code, and if that line is a function call it will not dive into that function.

• Step into next function call – Same as the above, but will go into the function that is executed on the following line.

• Step out of current function – This will take you out of current evaluating function. Useful if you’ve steped into a function yet see nothing of interest to inspect.

• Deactivate all breakpoints – Click here to deactivate all breakpoints.

Those three step-related buttons may seem unclear at first, but try using them and you’ll get a hang of it. They are valuable for tracking code execution on per line basis but most of the time you’ll just move in between breakpoints (the first button).

Setting the breakpoint inside code

Another way of  seting up a breakpoint is by using a debugger; keyword inside code. This has the same effect as placing a breakpoint on a line with that keyword. Useful for setting up breakpoints using the editor.

The console log

Sometimes you’d want to see the inspect value of some expression at runtime, without interrupting the execution. You may do so by using the console object. Just pass one or more arguments to console.debug() method and they’ll show up inside console.

If you’re used to ancient debugging methods such as printing of values with alert(), think of this as prettier version of the same.

So, in a nutshell, that’s debugging of javascript. Of course theres more than this, but most of the time this is what you’ll use to keep those pesky bugs away.