4 Tricks to debug Javascript with Google Chrome like a Pro

1. Control the flow with Breakpoints

A breakpoint is an intentional stopping or pausing place in a script, which was put in place for debugging purposes. When a breakpoint is reached, you can "step-through" the code line-by-line and see if things follow the right logic. This view also allows you to inspect the values of any variables to ensure they are what you expect them to be. A very frequent error is you try to use a variable, but it is undefined in the current flow. And thank to breakpoints, it is easy to trace back and see where the bug is.

There're 2 ways to set a breakpoint: manually clicking on the line-number in the Source tab of Chrome Dev Tools, or programmatically using the debugger; in your scripts.

After that, you can control the execution flow with these buttons:

 Continue: continues code execution until we encounter another breakpoint.

 Step over: step through code line-by-line to get insights into how each line affects the variables being updated. Should your code call another function, the debugger won't jump into its code, instead stepping over so that the focus remains on the current function.

 Step into: like Step over, however clicking Step into at the function call will cause the debugger to move its execution to the first line in the functions definition.

Step out: having stepped into a function, clicking this will cause the remainder of the function definition to be run and the debugger will move its execution to the parent function.

Toggle breakpoints: toggles breakpoints on/off while leaving their enabled states intact.

Pro tips:
1. Make sure you understand your codes and logic before using breakpoints.
2. Too many breakpoints is a very bad idea!
3. A detailed guide to use the breakpoints will be available in another post.

2. Master the console API

The Console API is a collection of methods, which was defined by Chrome Dev Tools. It can be accessed via the global console object, to log all kinds of information you need: a property value, an entire object, or even a DOM element. These information are displayed in the Console tab of Chrome Dev Tools.

While there're a lot of useful methods in the Console API, the below methods are definitely the most popular:

console.log

This method takes one or more expressions as parameters and writes their current values to the console.

console.dir

console.dir() displays all the properties of an object. You can also log an element's JavaScript representation.

console.table

Display formatted information of arrays and objects as tables. Columns can be sorted, too.

console.time

Using together with console.timeEnd() to start and stop a timer (identified by a string label). Time is logged in millisecond.

console.trace

Output a stack trace from the point where the method was called, including links to the specific lines in the script source. A blue counter on the left indicates the number of times that method was invoked at that point.

3. De-minify or prettify your codes

Minified Javascript is intentionally made for machines, not for humans. But, sometimes, you have to dig in the minified codes to track down bugs. If you are reading in the Source tab of Chrome Dev Tools, a pretty printing option is available to make your life easier. Just click on the curly brace  ("Pretty Print") icon in the bottom left corner, the JavaScript is transformed into a more human readable form. This is more easy for debugging and setting breakpoints as well.

4. Live edit scripts while running (locally)

Dev Tools allows you to edit script files and run them locally. Just clicking the file you want in the Resources tab, making modifications and Save/Save as with Ctrl+S.

---

Authored by Karmi Phúc. Reference: https://developers.google.com/chrome-developer-tools/