The Art of Debugging

I will start out by saying, I am a junior developer, so 85% of the time... I am the bug. I have however developed some tips and tricks along the way that have helped pinpointing my bugs as well as in writing cleaner and dryer code.

Steps to Debugging

1. Start by writing clearly planned and tested code:
   This may seem like a no brainer but the process of "sharpening the axe before cutting down the tree" really, really helps in the debugging process. Before I code at all or even write a README.md I start by asking myself 3 questions and writing them out in Evernote (for searchability later on).

   1. What am I trying to code and/or what is the bug that I am trying to solve? What do I already know about said code?
   2. What questions do I have/things do I not know?
   3. Answers to those questions as I find them. I then begin to make my README.md, user stories, and diagrams (if not already existing). When I have a pretty clearly documented plan I begin to write or modify tests. Often once I solve or find a bug, I will come back and modify or update tests and documentation.

2. Check for esLint errors or highlighted/non highlighted code in VS Code. It is always worth taking the time to set up esLint for a project.

3. Check variables and spelling check syntax.

4. Dev Tools: I really love Chrome Dev tools. I think it is worth it though to test code in multiple browsers.

   • Check the console for errors: is the error obvious?
   • Reproduce the error if semantic (enter data into a form etc.)
   • Try console.log() , console.error() , print . I feel like these are very base level debugging tools and are sometimes more trouble than they are worth after the fact. I find these tools more helpful while writing initial code.

   • Comment out code in and error message to help locate an error using comment tags. Once you pinpoint the error look at syntax, spelling, and functionality.

   • Sources tab -> Event listener breakpoints -> step into , step over, step out of... etc.

     • Pause code at other break points

   • If trouble shooting an API request... checkout the Network tab to see the amount of requests be sent and what is being received.

There are also numerous different language specific debugging tools that come in very handy during coding and debugging but these steps are a great start. What tips do you use and when do you crack and ask for another set of eyes? Thanks for reading!

Comments

[Ganjar Gingin Tahyudin]

breakpoints is our best friend

[raddevus]

This is a great post. I'm a weird developer who started out in Tech support, worked my way into QA, had a brief stint in Performance testing and finally made it into development. QA will always be with me. I like to break things. xD
That makes me think about debugging as a dev a lot. I think one of the first things a new dev should learn is debugging. Thanks for sharing this.
Are you going to enter the #dohackathon challenge here? I completed my entry and I'd really appreciate it if you took a look at my entry and app. Try to break it. :D For realz! Let me know if you do. Let me know if you submit an entry.