web-development
debugging
We all make mistakes when coding. This is a reality that every senior developer acknowledges, which is why "debugging code" has become one of the most essential skills for developers.
I have measured my "error rate"; I know I make > 100 mistakes during an honest day of coding (and I have been coding for 23 years, since the year 2000).
These mistakes can be very simple, like misspelling a line of code, or more elaborate rabbit holes, like writing some code that leads to a memory overflow. I'm not scared of making these mistakes because I have a very effective and fast way of identifying and fixing bugs.
Throughout the years, I have developed a very effective debugging recipe that I will share below. It takes me just a few seconds to find and fix 90% of my bugs and mistakes, leaving no room for improvisation or shooting darts.
Junior Web Developers. There are so many types of bugs and debugging techniques in coding that it's almost impossible to write them all; that's why I decided to focus this guide on Junior Developers only in the early stages of their full-stack web development career.
I know you are here to learn how to fix errors. Still, it's worth mentioning that most junior developer bugs can be prevented using automated code formatters, linters, autocompletion tools, writing with high code readability, and best practices.
๐ Here is a guide about coding standards and guidelines that will help you have clean code and prevent errors.
The debugging steps and tools may vary significantly depending on the programming language (HTML/CSS, JavaScript, Python, etc.), the libraries, the tools (Pandas, Flask, Express, Rails, Postgres, etc.), and the error message or other patterns and attributes you can notice about the error.
It's a good idea to break down bugs into "types" so we can prepare strategies for each group type. After years of debugging code, I have designated 4 front-end and 4 back-end bug types.
Debugging front-end code can be split into 4 main groups:
<tags>
, or some CSS rules not being applied correctly.Back-end bugs are generally easier to hunt because there are fewer technologies involved; technologies and languages are cleaner and more mature, and usually the code runs more straightforwardly from top to bottom.
Note: There are more complex back-end architectures with async code, cloud-based tools, microservices, etc. We focus on smaller, standard back-end systems that most small and mid-sized companies use.
Debugging back-end code can be split into 4 main groups:
Debugging becomes more challenging as your application grows into more pieces that connect. This is why it's imperative to constantly run your code on almost every change (hot reload) instead of waiting until you have made many changes. Remembering the latest change you made to your code before the bug showed up gives you a lot of leverage.
๐ Pro tip: Generally, what was the line of code that you last updated? Was it in the front end? Or the back-end?
I'm going to assume the worst: You have no idea when the bug first appeared and have made many changes since the last time you ran your application. So these are the clues you have to watch to start debugging:
In the front end:
In the back end:
There is a 99% probability your error will show up on any of these outputs, but that does not mean the error belongs to the front or back end - you must read the error first.
Back-end errors in the developer JavaScript console are usually indicated by messages such as "404 Not Found"
or "500 Internal Server Error"
, "CORS policy"
, etc.
Front-end errors are often indicated by messages such as "Uncaught ReferenceError: x is not defined"
, "SyntaxError: Unexpected token <"
, "Uncaught TypeError: x is not a function"
, "Uncaught TypeError: Cannot read property 'length' of undefined"
, etc.
The quickest way to identify errors in the network tab of the developer tools is to look for requests with a status other than 200 OK.
Error codes starting with 4xx
are probably front-end bugs.
Error codes that begin with 5xx
are probably back-end bugs.
Here is a more detailed list:
Code | Meaning |
---|---|
400 | It's a front-end issue; the back end is expecting a different format or values in your data. |
401 | It's a front-end issue because you are trying to request something you don't have permission to access. Did you forget to include credentials in the request? |
403 | Probably front-end because the credentials are included, but they may be wrong. The back-end is not allowing you to access it. |
As a second source of information, and especially if the error is a 4xx
, you can check if the request payload has the expected format and values.
If you have an error while running a script (not a server), it's a back-end error.
If you are running a server, the error may be a poorly formatted request coming from the front end; that's why it's a good idea to check for the request body and the status code on the developer tools network tag first.
If the request payload, URL, and headers are OK, it's a back-end error.
Lastly, if you have an error on a web server (like Express, Flask, Django, etc.) it's a good idea to check the log of requests being asked to the server. In the request log, you can see every request that your front end made to your API, sorted by timestamp. Here is a short explanation of one request log example:
If you followed the previous steps correctly, you'd know what part of your code the bug is related to. So stay focused and don't guess! You have handy information about your bug, use it and pull that thread.
For example:
If you attempt to fix the bug by making changes to your code and another bug shows up, that is usually good news! I call this nested debugging.
You must be confident in your bug exploration and the information you gathered to stay focused on the solution. Wait to start another theory; give the current approach a good try!
The last step is obviously fixing the bug; it may take a while, and you may have some nested bugs along the way.
I have prepared very straightforward cheat sheets to debug the most common errors you will find while coding web applications and APIs as a junior developer.
๐ Note: Click on any bullet above to learn about debugging each technology.