THE ART OF DEBUGGING: Unveiling the Craftsmanship in Software Development

#javascript #webdev #programming #beginners

One feature that every beginner or aspiring developer encounters early in the software development journey is bugs.

Bugs are unexpected guests that disrupt the seamless execution of your code. They manifest in various forms: a malfunctioning feature, unexpected crashes, or simply, outputs that defy logic. Acknowledging their existence is the first step in mastering the art of debugging.

Bugs means I expect my code to work in a certain way but the output is partially or entirely different.

The art of debugging is a skill that separates novices from seasoned developers, revealing the craftsmanship required to create robust and flawless code.

The Debugging Mindset

I have met quite many young developers who out of frustration burst out: why can't the code just work as expected. Bugs can be annoyingly frustrating, especially when you have exhausted all measures. Developers should have the mindset of failing forward while writing codes, anticipating the code to fail while brainstorming on how to achieve the desired result, it sometimes helps reduce anxiety.

Patience: Debugging is a process that requires patience. Rushing through it may lead to oversight. developers are mostly advised to spend time understanding what the code does before attempting to fix bugs. After spending long hours trying to fix a bug(s), It's sometimes necessary to take a break to focus on activities that relaxes and refreshes the mind such as playing a game, watching a movie, eating, going for a walk, sleeping, jumping on a call with a friend etc.
Curiosity: Cultivate curiosity to explore the code deeply. Be open to learning and discovering unexpected facets of the programming language or framework. Having a curious mindset where critical questions are raised: one question that stands out is what if, it often helps to sometimes anticipate bugs that might surface later while building.
Documentation: Document your debugging journey. The steps you took, the hypotheses you formed, and the solutions you tried. This not only helps you but also your fellow developers. One effective way of documenting your journey is also by ensuring to write clean and easy to understand codes. It's frustrating to return to an earlier code you wrote and struggle to understand what you were trying to achieve probably due to the ambiguities involved in the codebase.

Steps to Effective Debugging:

For debugging to work effectively, definite steps should be taken.

Observation: Begin with a keen observation of the bug's manifestations. Understand when and where it occurs.
Recreation: Reproduce the bug consistently. A bug that can be recreated is a bug that can be fixed.
Isolation: Narrow down the scope of the issue. Identify the specific part of the codebase where the bug originates.
Questioning: Ask yourself questions. What was the expected behavior? What conditions trigger the bug?
Hypothesis: Form a hypothesis about the root cause of the bug. Use your understanding of the code and its logic.
Experimentation: Test your hypothesis. Introduce changes to the code and observe the impact.
Validation: Verify that your changes have addressed the issue. If not, repeat the process with a revised hypothesis.

In this article, we shall focus on JavaScript as I further illustrate how to debug while writing codes.

Tools of the Trade

console.log()

The most popular debugging tool that every developer encounters in the course of learning and building in JavaScript is console.log(), it is the humblest of tools for every beginner. console.log() statements that allow you to trace the flow of your code by printing variable values or messages to the browser console or terminal.

The addition of 5 and 3 is expected to be equal to 8, however, 53 is displayed on the browser. Let's troubleshoot to see what went wrong.

The first thing to do is to check the data type of the value of both input num1 and num2


const calculator = document.querySelector(".calculator");
const add = document.getElementById("add");
const Output = document.getElementById("display");
let num1 = document.getElementById("num1").value;
let num2 = document.getElementById("num2").value;

let sum = 0;
const addNum = () => {
 console.log(typeof num1);
  console.log(typeof num2);
  console.log({ num1 });
  console.log({ num2 });
  sum = num1 + num2;
  console.log({ sum });
  Output.innerHTML = sum;
}

The results of the logs indicate that input values are of string format and need to be converted to data type. This is achieved by using parseInt().

let num1 = parseInt(document.getElementById("num1").value);
let num2 = parseInt(document.getElementById("num2").value);

It's important to mention that it's necessary to remove all console.log() from your codebase before deploying to production as they can add undesired effects to performance.

Other console tools also used during development include:

console.warn()
console.table()
console.error()
console.time()

JavaScript Debugger


const calculator = document.querySelector(".calculator");
const add = document.getElementById("add");
const Output = document.getElementById("display");
let num1 = document.getElementById("num1").value;
let num2 = document.getElementById("num2").value;

let sum = 0;
const addNum = () => {
  debugger
  sum = num1 + num2;
  Output.innerHTML = sum;
}

This is an efficient JavaScript tool for checking for bugs and fixing them, instead of having numerous console.log() that make the codebase untidy. It can be as integrated as an inline code in place of console.log() as seen above, It involves setting of breakpoint on the line where the developer chooses to begin troubleshooting from.

Alternatively, instead of integrating inline debugger into your codebase, the debugging extension can be used, and the results are displayed.

The Joy of Conquering Bugs

The joy of a developer knows no bounds whenever he/she successfully debugs a persistent issue. Debugging isn't just about fixing errors, but also about the satisfaction of solving a puzzle. Each bug conquered can be seen as a badge of honor, showcasing your dedication and skill as a developer.

Remember, every developer, no matter how experienced, encounters bugs while writing code. It's not the presence of bugs that defines your skill but your approach to debugging. Whether you are learning to code or building projects, embrace the art of debugging, and with each bug solved, you elevate your craft in the intricate world of software development.

Happy debugging!