As developers we debug more than we write new code.
Throughout the years I refined some techniques that helped me structure my problem solving and debugging skills.
Simplify
Remove everything that is not part of what you are trying to fix.
Comment out code, remove unused modules, remove all unrelated code that doesn't affect what you are trying to reproduce. If what you removed fixed the problem, good job, you might have found the cause.
Read the error messages carefully
I can't stress enough how much not paying attention to errors messages hold me back to becoming a better developer. Usually these messages give you a lot of context and a starting point. Specially if it's a widely used framework or library, the chances of you just Googling the error message and finding the answers right away are really high.
Back tracing
A system is usually constructed from units called functions. Every function might called another function and then the call stack is born. Start from the function where the error was thrown and step back on the call stack using a debugger and try to find the point where the error occurred.
Rubber duck
Have you ever simply explained what you were trying to achieve to a colleague and all of a sudden you knew what was wrong? Well, me too! What happens is that we usually get caught up in the details of a solution and forget the big picture, what we are really trying to achieve. Externalizing your thoughts and clearly communicating them helps you spot the reasons you are failing.
If you colleague is busy, have a rubber duck on your desk and that will do.
Minimal reproducible case
Use tools such as Stackblitz or JSfiddle and try to replicate the same scenario. With this approach you can focus only on the problem instead of also having to deal with your project dependencies, compilation time and so on.
Log points
On Chrome you can use log points which are basically a marker on a line that when that line is executed the provided log point expression will be called, i.e. console.log() without having to compile every time you want to log something.
This is very useful when debugging async code like Observables.
Conclusion
Up your debugging game! It will save you tons of time and make you a more efficient developer.
Top comments (0)