<html> <head> </head> <body> <p id="example"></p> <script> var a = 5 * 4; debugger; document.getElementById("example").innerHTML = a; </script> </body> </html>
So, what is the result? As already mentioned – the first rule of thumb – have the debugger turned on. The code will start executing, but it will stop before it reaches the third line in the <script> section where the debugger; keyword is located.
Debugging with the use of console.log() method
<html> <head> </head> <body> <script> x = 5; y = 6; z = x + y; console.log(z); </script> </body> </html>
The method of setting breakpoints in the debugger window
The major advantage of using breakpoints over console.log() method comes is its practicality.
With the breakpoints method, you can set breakpoints through the Developers tool wherever you want in the code without even knowing it. In the console.log(), on the other hand, you have to manually insert console.log() at specific points in the code. In addition to that, with the console.log() method, we have to manually print values of different variables, which is a nuisance because when using breakpoints, all variable values are shown by default in Developers tools.
So, how do you set breakpoints in the debugger window?