How to properly debug JS?

Question

JavaScript

Hello. I have been working with JS for a long time, but I never learned how to debug it correctly. How can I find out where the error occurred? If everything is simple with php - it displays errors on the screen and writes them to the logs, then what about JS. If I need to see if a variable has the correct value, then every time I print it to the console using console.error? And if the DOM element is incorrectly specified, how do you know?

Answer 1

How can I find out where the error occurred?

console.error displays the complete call stack with links to specific lines of specific scripts.
It is also very convenient to turn on the "Pause on exceptions" mode, in which the debugger is automatically turned on when an error occurs. But for this, Developer Tools must be open (although if you are a web developer, then in principle they never close).
Well, all other problems are easily solved with the help of a debugger. There you can see the values ​​​​of variables and the call stack and logic step by step.

Answer 2

Chrome Developer Tools have all the necessary tools for debugging.
If you want to stop code execution in a specific place and look at the entire stack, then the easiest way is to use the debugger keyword:

function foo (bar) {
    var a = 1;
    // some code...
    debugger;
    // some code...
}