Tip #1 Read the stack trace
A lot of people just see some error in console and without reading it try to fix their code or post question about their code online. We are working with computer and we need to understand which it says to us. In a lot of cases, especially when the problem is not in business logic but in typos or wring import you will directly get an error with a full stack trace in console or terminal.
So first of all read it properly and try to understand. Important thing here that on the top you have an error itself and then the tree of calls which were done to get the error. This is called stack trace. Normally you are interested in the error itself and in next several functions to understand from where this function was called not correctly.
And it's extremely important to read error message thoughtfully. A lot of people see work undefined in an error message and they think that the problem is that property is undefined but actually it said "Cannot read property of undefined" which means that it's parent is undefined. This small important things have you to fix problems faster.
Tip #2 check your code
I can say how many times questions in my videos or courses that code is not working. And I always have the code of each lesson under the video so I recommend to compare the code with the original. And everybody saying that their code is 100% the same. But of course there is a typo inside, wrong name or import. The problem that I see in a lot of beginners that they are digging to deep in their code or the amount of code is quite big for them so they can't see the typo or and error.
Here are several recommendations. First of all if you are looking too long in the code and you can't find a problem just make a pause, go make a coffee or look and the window. Then it will be much easier to find the problem because you are not that focused on the specific place.
Also if you debug a problem at the end of your working day I give you 100% that on the next day you will fix it in minutes because you are fresh and not this evening when you are tired.
Also try to use as many tools that can help you to find problems as possible. Prettier won't prettify your code if you missed a bracket for example. Eslint or Typescript can signal about typo in name. Also Typescript or Webpack can show you that your import doesn't exist. So don't try to find by yourself what your tools can find for you
Tip #3 don't forget to check network requests
Tip #4 unminify minified code
If you debug production, normally you will get minified code their. The correct solution is of course to configure source maps for the project. I already made a video about sourcemaps and will link it in the description. But if you don't use sourcemaps you must learn how to debug minified code which can be tricky. The most important point here is to click on prettify button inside source code. In this way you will at least have an understandable intendation in the file so you can read it.
Tip #5 learn how to use debugger
Call to action
Also if you want to learn more about web development I have a lots of courses regarding different web technologies. I will link them down in the description box below.
If you find this video helpful, don't forget to subscribe to this channel and hit subscribe button. Thanks for watching and I see you in my next video.