Create a new application JavaScript in Visual Studio Code. Debug the application. See in debugging how to perform JavaScript

Programming, development, testing

→

JavaScript - programming language for HTML

→

Create a new application JavaScript in Visual Studio Code. Debug the application. See in debugging how to perform JavaScript

Looked at 22289 times

Create a new application JavaScript in Visual Studio Code. Debug the application. See in debugging how to perform JavaScript

last updated: 13 April 2023

Download the example

my_javascript_project1.zip ...
size: 1 kb

How to run the example:

1) Open Visual Studio Code
2) In Visual Studio Code click in the menu File → Open Folder select the folder where the project was unpacked
3) Click Run → Run Debugging or the button F5

File structure:

D:/my_react_example1

index.html

my.js

.vscode

launch.json configuration file for Visual Studio Code

Plan (8 steps). Create a new application JavaScript in Visual Studio Code. Debug the application.

Step 1.

Open Visual Studio Code

Step 2.

Create a new folder my_javascript_project1 on the disk D: and in Visual Studio Code select this folder

Step 3.

Create a new file index.html inside Visual Studio Code

Step 4.

Create a new file my.js inside Visual Studio Code

Step 5.

Run the project in the debugger Run → Start Debugging (key F5) and select Chrome

Step 6.

Install Chrome Debugger

Step 7.

File configuration launch.json (select the path to the file to be launched)

Step 8.

Set stopping points (Breakpoints)

Step 1. Open Visual Studio Code

If you do not have Visual Studio Code installed, you need install Visual Studio Code ... .

Opening Visual Studio Code

Step 2. Create a new folder my_javascript_project1

Create a new folder my_javascript_project1 on the disk D:
and in Visual Studio Code click File → Open Folder ...
and select this folder D:/my_javascript_project1

Step 3. Create a new file index.html inside Visual Studio Code

Let's add code to

file D:/My/my.html

<html>
<body>
     
     <script src="my.js"></script>

     <script language='JavaScript'>
          calculate_sum(10, 5);
     </script>
</body>
</html>

Save the file, to do this click File → Save

Step 4. Create a new file my.js inside Visual Studio Code

Let's add code to

file my.js

function calculate_sum(a, b)
{
     // calculate sum
     var sum = a + b;

     return sum;
}

Save the file for this click File → Save

Step 5. Run the project in the debugger Run → Start Debugging (key F5) and select Chrome

If Chrome is not in the list, then install Chrome Debugger

Step 6. Install Chrome Debugger

Step 7. File configuration launch.json (select the path to the file to be launched)

Run the project again i.e. click Run → Start Debugging and select Chrome.
A file with the settings launch.json will appear.

In the parameter url write the path to the file to be launched.

File lanuch.json

{
     // 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": "chrome",
               "request": "launch",
               "name": "Launch Chrome",
               "url": "${workspaceFolder}/index.html"
          }
     ]
}

Save the file, in the menu click File → Save

Step 8. Set stopping points (Breakpoints)

Let's put breakpoints in the file index.js.
Stopping points are set by pressing the F9 key.

Run the program in the debugger (debug). Press Run → Run Debugging or the button F5.

The program is running and we can watch:
• WATCH (value of variables)
• CALL STACK (function call stack)
• BREAKPOINTS (put, remove stopping points)