The console is always the first step to try to fix an error.
They will put the line number and so on -> But this is the line number in the final minimized compiled version, which is not going to be really helpful.
What will help you is the file name, and the error description.
Let's consider the error 'bla bla is undefined'. This will probably occur when you have declared a variable but have not given it any value. The variable will thus be of type 'undefined'.
[If you ever need this, it might be easier to just rewatch the video related to it]
Sometimes reading error messages is not enough -> or you don't even get them, because they're a logical error, not a console type error.
[Like the error you got once in React about the last picture not working properly and so on].
So it would be great if you could check, during runtime, why something isn't working.
You could go to console -> sources -> on the left-hand side there will be the 'bundles'. The main.bundle.js [on your localhost it was main.js will be the main code of the current page].
Now if you click on the line number of any line on this file (the main.js file), you will be taken the the file that that line originated from. [And it turns out you don't even need to go through this whole route to reach the file you want to check. See below].
Because the main.js file is the resulting bundled file -> It's made up of 'lines' from many files, some of which are part of the angular/nodejs setup (you don't deal with them), and some lines are taken from your src files (the ones you work with).
This is called Source Maps (being able to map which line comes from which file) -> and it is only available in development (not production).
When you have some kind of error that you want to see in realtime (like: seeing how the value of an index number thing changes with a certain action), you can go to the line that you think is a culprit.
Click on that line, go to the source file, and again click on the line there (it will show selected). By doing this you've actually placed a breakpoint on that line.
Now go on and do whatever action that triggers your error, and it will show on the file how the reraltime values are changing. (You can also click on values of the file, it will tell you their types: like 'undefined' or so on).
You can actually access your files directly by opening console -> source -> the cloud on the left-side panel called webpack (most probably, the last cloud) -> The . folder will have your whole project folder structure inside. Proceed to access your files.