Photo by James Wainscoat on Unsplash
Simple Debugging Practise.
Debugging journey with a frontend developer
Many developers will be happier writing code with no bugs (someone like me) but as of the moment is probably impossible because humans are prone to error. Every category of developers struggles with debugging, Experience developers are rest assured that there is a fix to any error, so don't be shocked when you see developers with years of experience still struggling with a bugs for hours.
In this blog post, I will explain sharing the simple process I engage in while debugging my codes.
“If debugging is the process of removing software bugs, programming must be the process of putting them in.” — Edsger Dijkstra.
What is debugging?
A developer engages in the removal of bugs detected from time to time, this process is called debugging. It involves the examination of potential causes of bugs, identification of bugs and the fixation of bugs in a software program.
Four basic errors I majorly encounter from time to time.
Configuration Error
Setting up a good project file structure, I had issues with deprecated packages or incompatible packages, I tried to make them work until I knew that using recent and universally approved packages is a solution. Some other issues missing .exe files, Package compatible issues, proxy issues, low and slow network connection issues while downloading packages especially, NPM. This issue is majorly associated with the project set files.Syntax Error
A syntax error is an error in the syntax of a sequence of characters or tokens that are intended to be written in a particular programming language. Before now I labored wrongly trying to write code without looking through the documentation guide which made me waste a lot of time debugging bad code.Compilation Error.
A compiler fails to compile a piece of computer program source code, either due to errors in the code, or, more unusually, due to errors in the compiler itself. To compile the program, to see the expected output, some underlying error showcases themselves, if not fixed the output won't be seen. Write quality syntax aligned program reduces error I'm likely to encounter.Reference Error
This represents an error when a variable that doesn't exist or hasn't yet been initialized in the current scope is referenced( called or used).No other way to this than to refer the right variable, function to be used in the program.
A common saying while debugging
Never let your computer know that you are in hurry. Computers can smell fear. They slow down if they know that you are running out of time.
Practices for debugging my code.
Healthy mindset towards solving problems.
This might be uncommon, but many beginners have the wrong mindset towards debugging. Some years back whenever I see red highlight in my code, I take it to a senior or my team lead, I already had a fixed mind toward it, believing that only seniors can fix issues. Recently, that has changed I can fix bugs, it is the same as solving problems. Bugs are problems in the real sense. So, Think of Solution, Search for Solution.
Identify and Understand the bug I want to solve. (Bug Detection)
Most errors report, error messages or error codes, though some occasions arise when the package or programming language can't deduce, the error statement. The reading of an error message is quite from understanding the error problem statement. Some error messages are accurately detected, and the line of code with the error with highlighted by IDE.
Do further research on the error messages Google it. Sometimes, going the extra mile to look through the internet if someone already has a similar issue on platforms like stack overflow and GitHub discussion will give more clarity to know the cause of the bug. Patiently read and digest the error message.
How does this bug came into existence .(Bug tracking)
Explain the logical / flow processes.
Is the simple act of explaining code flow to oneself, sometimes I speak out explaining the coding process to myself, then ask the WHY question. It is human to forget steps, don't beat yourself up. Some have duck to talk to, I don't have any for now. However, I do look forward to owning one, I will keep you updated if owning one is worth it.
Decouple program into component.
Splitting codes into smaller fragments aids readability and ease of understanding. With great abstraction, it is easy to trace files connected to the bugged file, and how each of the fragments influences each other, doing this it is easy to detect the bug root(source) and affected branches( destinations).
Grouping the bug. (Bug classification)
In some cases, bug discoveries are so numerous, that a developer gets overwhelmed. Many Devs, jump into this pool... gosh. Never fall for this it's a trap. Oftentimes I have always been a victim of this, I just want to debug my code, I did debug I eventually discovered just beating about the bush. In scenarios where the bug detected are much, classify the bug list based on the priority threat it has the software.
These are major bug classifications
High
This bug can quickly devastate the software program if not taken care of, its fix is of utmost importance.Medium
These bugs have a moderate effect on the program, their fixes are not of immediate urgency yet their presence in the program will affect the program.Low
The bugs have little or no effect on the program, some are warnings on the software, removing them will make the software run optimally
Use my debugging style and fix the bug using tools
Haven identified the bug, traced or track it to its location in the code base and classify it. This guide helps me in determining what next to do while finding the solution.
Tools with debugging support
Browser chromes debugger
Brower chrome console
VScode terminal debugger
Conclusion
To become a better developed embrace the art of debugging. If you have any other tips or suggestions on the listed tips.
I hope this blog post has helped.
Feel free to leave a comment.
Good luck and happy debugging!