Get up to 80 % extra points for free! More info:
This week up to 80% off on Python courses. More info:

Lesson 4 - Debugging in the Visual Studio Code development environment

In the previous lesson, Program debugging and breakpoints, we tuned a small program in JavaScript. We also explained what a debugger is and we know what breakpoints are.

Various development environments offer us already integrated debugging tools directly or through extensions. In this lesson, we will look at Visual Studio Code. We will show how we can use it for debugging and replace most of the tools that we had to look for in the browser. We achieve higher productivity, speed, and comfort. Although we will talk about a specific program, similar functions exist in almost all development environments.

We will use the code from the last lesson for an example. If you do not have it, I enclose it here:

<!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>

JS:

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

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

The code is available to download at the end of the lesson.

Visual Studio Code

Visual Studio Code is a source code editor developed by Microsoft. It is available on both Windows and Linux or macOS operating systems. The software is free and, interestingly, it is programmed in JavaScript and TypeScript languages. We can download it via the official website code.visualstu­dio.com. Installation is simple, just click on the license conditions and then choose the path where the program should be installed. It is also advisable to uncheck the options for adding a shortcut to the context menu (right-click on a file or folder). After right-clicking on a folder, we can open the folder in VS Code and we do not have to manually search for the path after turning on the program. VS Code itself is "useless", but using extensions allows us to transfer most tools directly to the development environment and thus support various languages, shortcuts, and more. Let's set it up now.

Environment settings

We must first open our working folder. I remind you that the files are from the last lesson and can also be downloaded below the article. We will start searching for the extension menu by clicking on the last icon on the left. The menu can also be expanded using the keyboard shortcut Ctrl + Shift + X. Then we type chrome into the search and install the Debugger for Chrome with millions of downloads:

Next, you need to set up the debugger itself. Run section on the left (keyboard shortcut Ctrl + Shift + D) and click on the blue Run and Debug button. Then we choose the Chrome option:

Now there is nothing left but to select Add configuration… after clicking on the arrow. (This menu may not be necessary at all the first time you run it, instead, the IDE will ask you if you want to create a configuration.) Then select Chrome again:

We will also see the editing of the launch.json file. Let's take the parameters into account and check that everything is in order:

Of course, the file will not be and must not be the same as above, even some parameters may be different. In short, all you have to do is see if the path to the file is correct. We can check this if we try to run the file with the green arrow at the top left. If nothing is loaded for us, let's check what address we have written in the browser. They will advise us on what may be wrong. We can also generate this universal file with variables:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

In this case, we have to specify the file we want to run there - the file parameter. For example, the configuration will be as follows:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "file": "C:\\Users\\Filip\\Documents\\itndebugging\\index.html",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

There must always be two backslashes in the path. One backslash is also used in programming or regular expressions. There is always a special character after the backslash. In our case, the special character is also a backslash, so we write two in a row.

Debugging example

In Visual Studio Code, we can now add breakpoints directly in the program by clicking on the line number, as we are used to. Let's try this by adding a breakpoint to the line where the sum of the possibilities occurs:

When we then run our program and call a breakpoint after entering two values and pressing the Add up button, we get the debugging mode in Visual Studio Code, which we should already be familiar with from Chrome. On the left, we see the values of the variables, the option to add Watches, and at the bottom also the console in which we can further debug. Also, of course, buttons to turn the code on and off again:

In Visual Studio Code we can also set conditional breakpoints. To add a conditional breakpoint, right-click on the breakpoint and select the Edit breakpoint ... menu. Then we write the condition in the line that must be met for the breakpoint to be activated. For example, for the first number entered to be ten:

Now let's try to add the numbers 10 and 10 on the page. The program will not stop. The more experienced ones of you probably know that === means not only equality of value but also equality of data type. Since we took the number from the text box, the data type is string (text string) "10". However, we compare this string with an int (integer) data type, and the two data types are not equal. So if we want the breakpoint to start, it is necessary to enter two equals instead of three equals == or leave three equals, but first, we will parse the number number1:

parseInt(number1) === 10

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


 

Download

By downloading the following file, you agree to the license terms

Downloaded 116x (1.38 kB)

 

Previous article
Program debugging and breakpoints
All articles in this section
Visual Studio Code, WebStorm and JS debugging
Skip article
(not recommended)
Debugging in the WebStorm development environment
Article has been written for you by Vlasta
Avatar
User rating:
No one has rated this quite yet, be the first one!
Passionate reader, student, coder and writer.
Activities