Lesson 5 - Debugging in the WebStorm development environment

In the last lesson, Debugging in the Visual Studio Code development environment, we talked about debugging directly in the Visual Studio Code development environment.

Today we will show you how to use WebStorm for debugging, just like we showed you Visual Studio Code. Let me remind you again that debugging is a similar process in all programs. After these two lessons, you should be able to easily orient yourself in other development environments.

As an example, we will use the example from the last lesson. 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);
}

Available for download below the lesson.

WebStorm

JetBrains developers present WebStorm as "the smartest IDE for Javascript". It debugs similarly but has some extra features. WebStorm has a monthly trial period or is free for students. The commercial version is for 1399 CZK (€ 59) per year, the second year the price drops, the third year even more, and is stable. We will download WebStorm from the official website on Windows, Linux, or macOS. Installation is also simple. We agree to the terms and conditions, select the folder to install, and then we can select additional "features" such as adding a shortcut to the context menu of the folder. By right-clicking on the folder, we will then have the option of something like "Open Folder as WebStorm Project", which will save us from finding the project folder when the program is turned on.

Environment settings

First, open the project folder (or file). We do this by right-clicking on a folder and opening the folder as a WebStorm project. Possibly. turn on WebStorm and click File -> Open at the top left and select the project folder.

Switching to debugging mode is very easy in this program. All you have to do is select the index.html file in the tree menu on the left, right-click on it and select the Debug index.html option. The debugging environment will open together with a web browser, similar to what we have already seen with Visual Studio Code:

Visual Studio Code, WebStorm and JS debugging

The configuration, ie the browser and the change of URL files can be edited at the top right by clicking on the file name and selecting Edit configurations….

Debugging example

Debugging using both browser and Webstorm is very similar, we will introduce the basic functions using debugging in Chrome. We can switch between debugging in Node.js and in the browser depending on the type of file in which we start debugging. If the *.html file is chosen, we will be debugging with a browser, if the *.js file, that indicates debugging using Node.js. Node.js is the environment in which the server part of JavaScript is usually debugged. If you are a complete novice in JavaScript, there is no need to worry about it.

Adding a breakpoint is very similar in all programs. We simply click on the free space next to the number that indicates the order of the line. We will place it classically on the line taking care of the addition of two numbers:

We can start the program and activate the breakpoint by entering two numbers and clicking on the button. The code will actually stop at that location. Notice that we can see the values of the variables. We also don't need to restart or refresh the browser. After closing the file or the whole program, the breakpoints will still be saved. This can cause us to get lost in breakpoints. To solve this problem, use the View breakpoints… button:

You can achieve the same with the keyboard shortcut Ctrl + Shift + F8. Here we can clearly see breakpoints throughout our project. In the same dialog box, we can also set a breakpoint each time an exception occurs (the throw keyword in the program). We do this by checking the JavaScript Exception Breakpoints box.

If we want to add a condition to the breakpoint, we do so after clicking on the breakpoint in the code with the right button. The breakpoint will be triggered only when the condition is met. It's the same way in Visual Studio Code.

There is nothing stopping us from using the debugging console:

We add watches with the + button or also with the Insert keyboard shortcut:

As I wrote at the beginning, although we introduced specific programs, the debugging function is similar in almost every development environment. That's all for today's lesson.

In the next lesson, Advanced settings in the WebStorm development environment, we'll look at setting up WebStorm.

Download

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

Downloaded 171x (1.38 kB)

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