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:
- 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.
Never miss a guide like this!
Disclaimer: This post may contain affiliate links. I might receive a commission if a purchase is made. However, it doesn’t change the cost you’ll pay.