Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.
Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.
For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Data Science and Machine Learning - 16 wks
Full-Stack Software Developer - 16w
Search from all Lessons
Curated list of small interactive and incremental exercises you can take to get better at any coding skill.
Curated section of projects to build while learning with simple instructions, videos, solutions, and more.
Guides on different topics related to the technologies that we teach in our courses
We all make a lot of mistakes when coding. This is a reality that every senior developer acknowledges; that's 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.
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.
"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:
|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 any 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 know to what part of your code is your bug related. 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.