5 Debugging Hints in Javascript for Beginners
In this video I want to share with you my tips for debugging javascript if you are a beginner. So let's jump right into it.
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
A huge part of frontend applications is working with APIs. And we might get quite a lot of errors from them. Obviously our javascript code is not prepared normally for all usecases. This is why the easiest way is to check your network requests to see if you get correct data and if the request was successful. A lot of people check only request status for example 422 but not errors in the response which can bring clarity about what is going on.
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
And debugging of source code brings us to tip #5. You must learn how to use debugger. And it's not that it's nice to, it's a must. Because debugger is the most important tool to put breakpoints, check variables values, jump in and out of functions and much more. You can't literally debug just by using console.log because it's not efficient. It's much easier to put breakpoints directly in source code inside browser and check it. Also debugger in JavaScript works in exactly the same way like debugging in other languages so you learn it once and apply later to any language.
So this were my 5 tips for debugging javascript. What are your favorite tricks? Write me don't in comments below.
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
