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:
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 termsDownloaded 188x (1.38 kB)