A quick introduction to debugging

Debugging is the process of examining a computer program to find and fix the issues (a.k.a bugs 🪲) that cause the program to deliver unexpected results.

Debugging can be done in two ways:

The first approach is to place temporary print statements at specific locations in the code to print the program’s state (calculated values) at those points.

The other option is to use a debugger. A debugger is a tool to make the former approach automated.

With a debugger, you can define breakpoints in multiple lines of your code you suspect are causing the bug.

Consequently, when you run the program, it’ll pause when it reaches each of those points, and it’ll display all the values at that time.

In most cases, using temporary print statements is enough to trace down a bug. This method is the preferred way of debugging by many programmers.

Imagine you’re doing a set of calculations on a number, but the output isn’t what you want. 

You suspect that line 2 is causing the issue.

So you put a temporary print statement at line 3 to see the state of the value at that point.

var x = 12

x = x + 3.14 * 2

// This is a temporary print statement (with console.log) to see the value of x before it’s divided by 12

console.log(‘the value of x here is:’ + x)
x = x / 12

When you find and fix the bug, you remove the temporary print statement.

Web browser’s developer tools

When debugging a client-side code, you can use the developer tools built into the most popular web browsers, including Chrome and Firefox.

Developer tools (on Firefox) and Devtools (on Google Chrome) provide convenient tools to help developers diagnose issues quickly.

You can use these tools to: 

• Debug JavaScript code
• Monitor network activities
• Modify the DOM/CSS
• And more

Developer tools can also help you improve your website’s performance in terms of speed and accessibility.

I suggest you invest some time in mastering the developer tools of the browser you use for development; it’ll save you a good deal of time when trying to locate a bug.

If you use a JavaScript framework, like React or Vue.js, you can use their specialized Devtools too. They help you examine your program from your framework’s point of view; they are usually available as browser extensions.

Reza Lavarian Hey 👋 I'm a software engineer, an author, and an open-source contributor. I enjoy helping people (including myself) decode the complex side of technology. I share my findings on Twitter: @rezalavarian