Lesson 3 - Program debugging and breakpoints

In a previous lesson, Debugging tools and internet browsers, we showed you how to use tools in web browsers for debugging.

When programming, we sometimes come across the unpleasant moment when something does not work as we want it to. The program contains errors or what should happen is not happening. The process of finding and then subsequently correcting errors is called debugging.

Debugging

Debugging is not easy, but fortunately all modern browsers already include their own tools to make it easier drastically. For the purposes of this article, I created a simple project to add two numbers. The code has a logical error, which we will try to fix later using tools. Code for the script.js file:

function add() {
    let number1 = document.getElementById("a").value;
    let number2 = document.getElementById("b").value;

    document.getElementById("result").innerHTML = number1 + number2;
}

index.html file:

<!DOCTYPE html>
<html>
    <head>
        <title>Addition App</title>
        <script src="script.js"></script>
        <meta charset="utf-8">
    </head>

    <body>
        <p>Number 1</p>
        <input id="a" type="number">

        <p>Number 2</p>
        <input id="b" type="number"> <br /> <br />

        <input class="button" type="button" onclick="add()" value="Add up">
        <p id="result">0</p>
    </body>
</html>

Open the console again, but select the Sources section at the top (in Mozilla Firefox, the Debugger section). Here we can click on our file:

Visual Studio Code, WebStorm and JS debugging

If we try our "calculator", we will suddenly find out that it does not work for us. The expected behavior was that after entering two numbers and clicking "Add up", the numbers would add up. However, if we enter 5 and 6, for example, after pressing the button we will see 56. Let's try to repair the program using the tools in the Sources.

Breakpoints

We can assume that this error would be visible if we stopped interpreting the code before the function was called due to a button press. This allows us to call the Event Listener Breakpoints on the right side:

On the right side, we have the option to click Event Listener Breakpoints, find the Mouse section, and then select event click. Let's try that the interpretation of the code really stops when we click on the button.

This is not the only type of breakpoint we can set. We can also stop on a specific line of code, just click on the number symbolizing a certain line while viewing the file. The code will stop at the given line:

Also, note the buttons in the upper right corner. The first button only resumes code operation. The second button skips the current function in which it is located and jumps to the next function. The third button is used to jump to the next call of any function. The next button, by name, exits the current function and the last one just "takes a step forward of code execution". The last two separate buttons are used to disable all breakpoints and set whether we want to automatically stop compilation in case of an error.

Information, program runtime changes, and watches

It is therefore likely that the error occurs on the line where the two numbers should be added. So let's try to put a breakpoint on the given line and call it:

Information about functions and variables can be seen on the right. We may also notice a mistake. It looks like our numbers are stored in the string data type. As a result, we combine strings (numbers) instead of adding numbers. We can also confirm this with the help of watches. Click the + button at the top right of the Watches section and type typeof number1. We actually see that the variable is stored in the data type string (text string):

Let's try to open a console other than the one we have used so far. If we do not have an open box, let's do so with the ESC key:

Finally, we can get rid of errors by converting both numbers to another data type. We will do this directly from the console by typing:

parseInt(number1) + parseInt(number2);

Everything is already working as it should. We can also try to rewrite it directly in script.js in the browser:

Save the file using the CTRL + S keys. Now we can test our "calculator" in the browser. Just be careful that we do not save the file locally, but only in the browser !! So we have to edit the file locally, as we are used to.

`debugger;`

We can also add a breakpoint directly in the code, with the debugger;. If we have the console open, the browser will stop at this point as if we were clicking on the number next to the line.

That's all for today. Good luck debugging!

In the next lesson, Debugging in the Visual Studio Code development environment, we'll show you the specific Visual Studio Code development environment and how it can be used for debugging.

Article has been written for you by Vlasta

User rating:

No one has rated this quite yet, be the first one!

Passionate reader, student, coder and writer.

Activities