As a software engineer, you know how frustrating debugging can get. It's an essential skill that can make or break your development process, yet sometimes it's more challenging than writing code. That's why Hashnode recently invited me and a few other software engineers to share our experiences and insights about debugging techniques, tools, and best practices. In this 3 part Demystifying Debugging series, I'll walk you through some of the key takeaways from our conversation and explore some effective debugging strategies that you can start using right away to improve your debugging skills.

1. Putting One's Ego Aside

   • As humans, we come with a greater deal of complexity and emotional investment than computers do. This is one of the reasons why putting your ego aside can help you approach a problem with clarity. Practicing this radical form of mindfulness can help you see things you may have overlooked, soften your heart to meaningful feedback and prevent you from getting stuck in an endless debugging loop.

2. Reproduce the Issue

   • Reproducing the issue is such a valuable technique that it's become a popular practice for support teams and testers to accurately document the steps needed to replicate an issue. By leveraging this technique, developers can effectively isolate specific problems and understand their root causes, particularly when the bug can be reproduced consistently.

3. Browser Dev Tools

   • Nearly every front-end developer has used the browser's dev tools to inspect and manipulate their code. But yall, hear me out... that's only a fraction of what the dev tools can do! The browser dev tools is soooo much more powerful than it's given credit for. Other uses for it during debugging are:

     • Adhoc mobile responsiveness testing. Notice how in the screenshot of the Chrome devtools below, you can select the device type, or manually update the height & width.

       

     • Analyzing network traffic

     • Finding performance issues. In the screenshot below you can see the analysis of data for a webpage, and it shows how much time it took in milliseconds for scripting, rendering, etc.

       

     • and even debugging cross-browser compatibility issues

4. Automated Tests

   • Some folks practice Test Driven Development, where they write a failing test before they write the code to get that test to pass. Others write their automated tests after implementation. Either way, automating tests can help immensely during the debugging process by helping developers:

     • Catch issues early by shortening the time for feedback

     • Isolating the problem. If a test case you've written fails, you are one step closer to getting to the root cause.

     • Gain a deeper understanding of the codebase and potentially decrease bugs in their work. They provide a representation of how the code works and can help developers identify issues quickly and efficiently.

5. Binary Elimination

   • This technique works by having the developer eliminate half of the problem space with each iteration by commenting it out until the root cause is found. Binary elimination can be a helpful technique when you have a large number of potential causes for an issue and need to narrow down the possibilities systematically. It can also help you approach the problem with a more organized and structured mindset, making it easier to identify and fix the issue.

6. Papertrail

   • Using clear and descriptive Git commit messages, GitHub issues, and pull request descriptions can be extremely helpful during the debugging process. For example, if you encounter an issue with a particular line of code, having a GitHub issue number associated with the relevant commit can help you quickly find related information. By navigating to the related pull request, you can gain context into the original issue that caused the problem, making it easier to identify and fix the issue more efficiently.

7. Forums

   • Whether it's StackOverflow, Github Issues or Reddit, forums exist where we can navigate the paper trail others have left behind for us. Or if you're gutsy enough, you can post your issue and potentially get feedback from others. You may have to deal with a weirdo or two with a stick up their butt telling you to go read the docs, but most people are genuinely willing to help.

     

8. Error Messages

   • Error messages may not always be the most welcoming sight for aspiring developers, but I promise they can be your friend – at least most of the time. They're there to help you debug and identify potential issues in your code. Taking the time to become familiar with common error messages that you might encounter when working with a new programming language or technology can be incredibly valuable when it comes to debugging. By doing so, you can save yourself a lot of time and frustration, and be better equipped to identify and resolve issues quickly and efficiently.

     

9. Rubber Ducking

   • Whether you're doing it with a rubber duck, or some other inanimate object, the concept is the same: Explain your problem! The act of verbalizing the problem out loud can often help you identify issues or solutions that you might not have otherwise considered. By explaining the problem in simple terms, you may be able to uncover new insights or approaches to the problem or even catch issues you might have overseen.

With all that being said, a software engineers' debugging skills are only as strong as their knowledge and the tools they use. While these are not all of the techniques and tools mentioned during the Hashnode Twitter Space, they are some of the most accessible to budding developers. Stay tuned for parts two and three in this Demystifying Debugging series, where we'll dive deeper into debugging best practices for teams and wrap it up with how to tackle non-reproducible bugs. Here's to putting bugs in their place and knocking every programming task out of the park.

P.S. While you're waiting for part 2, make sure to follow the amazing panelists:

• Tiger Abrodi

• Akos

• Jintao Zhang

• Sadra Yahyapour

• Shai Almog