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:
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.