You will make errors. Your scripts will have errors, no matter what. These errors can be in relation to syntax or logic. And often it will be a case, that you won’t see any error messages and you’ll have no clue where exaclty you should look for errors. This is where code debugging comes into place. Luckily, all browsers have JavaScript debugger built-in and it can be turned on or off, which dictates whether script errors are reported to the user. You can also set breakpoints and check variables during the code execution. In short, Debuggers go through the entire code and they identify these errors and also fix them.
So, how do you debug JavaScript using debugger keyword?
The syntax of the debugger keyword is debugger;. First of all, you have to have the debugger function in the browser turned on. And when that tool is on, it force stops executing the JavaScript code at a specific breaking point. Then it calls the debugging function if it’s available. So, if any debugging is required, the debugger function will execute – in layman’s terms, examine potentially buggy stuff, if debugging is not required, no action will be performed. Let’s take a look at this super simple example, so we can illustrate what we’re talking about:
<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
Debugging with the use of console.log() method is another way in which the JavaScript values can be displayed in the debugger window, of course, if your browser supports debugging. The console.log() method writes a message to the console, which is useful for testing purposes.
<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
Setting breakpoints in the debugger window is another way to detect coding errors. Moreover, that method is faster and more efficient compared to the console.log() method. The method is carried out by setting breakpoints in the code. At each of these breakpoints, the JavaScript will stop code execution and will examine the values of variables. After Javascript examines values, you can simply resume the code execution with a play button.
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?
It is pretty simple. You need to enter the Developers tools section. You can do this by pressing F12 and then going to the sources section, where you select a specific JavaScript file and this is where you set breakpoints. You can do this by either choosing breakpoints from the DOM breakpoints, which are logged in the provided list, or through EventListener, which stops the execution of code whenever an event occurs.