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