Debugging Javascript Like a Pro

Discover the best debugging tools Chrome has to offer

Photo by Nicole Wolf on Unsplash

Are you one of those who are console logging your way to a solution when your code is not behaving the way you expect? If yes, read on.

This article aims to explain to you the most useful tools and techniques provided by the Chrome Dev Tools to debug your Javascript code better and faster than ever before.

By the end of this article, you’ll be able to debug your code better and faster than ever before.

This is a summary of what we’re going to go through:

setting breakpoints to debug code at a specific line

navigating the call stack

pausing/resuming the script execution

setting watch expressions

productivity tips and tricks for the Dev Tools

Before we continue — a free tip: Use Bit (Github) to easily manage, share and reuse your JS components. Modularity and reusability are key factors to a better and more sustainable code!

Debugging Runtime Code

If the cause you’re debugging your code is due to a bug or unexpected behavior, you’re likely interested in the “Sources” tab in the Dev Tools, which is the section we’re going to explore in depth through a set of various scenarios.

Breakpoints

If you are reading this article, you probably are used to debugging a particular line by logging to the console a certain value. But I want you to introduce to a more powerful way that goes way deeper in the code than simply logging: breakpoints.

Setting breakpoints is normally the first step of the debugging process. The built-in development tools in most browsers allow you to stop the execution of your code at a particular line of code and at a particular statement on every line of code running on the page being debugged, but for the purpose of this article, we will be specifically using the Chrome Dev Tools.

What are Breakpoints for?

Normally, you may want to stop the execution of the code so that you can interactively inspect the particular context that we’re interested in.

Once the code has stopped at the breakpoint, we can start the debugging process by getting access to the scope, navigating the call stack, and even change the code at runtime.

How to set Breakpoints?

In order to explain how to set breakpoints, we will debug an Angular codebase of one of the side projects I use for education purposes, although the technology used doesn’t really matter.