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

Programming, development, testing

→

Visual Studio Code (for writing programs in JavaScript, Perl, Python, Java, C#)

→

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

Looked at 4990 times

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

last updated: 12 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)

Note!

After pressing F5, for the first time the debugger does not stop at a breakpoint.
The debugger stops at a breakpoint when I press Restart.

Note! To see the window WATCH, BREAKPOINTS, CALL STACK you need to click in the menu View → Debug.

Result

Visual Studio Code is very convenient to use for debugging JavaScript, as well as to see the values of variables.

← Previous topic
Make the code tabs instead of spaces in Visual Studio Code

Next topic →
Create a new application TypeScript in Visual Studio Code. Debug the application. We look in debugging how TypeScript is executed step by step. Breakpoints.

Your feedback ... Comments ...

Объявления

• What is Visual Studio Code ? Why are Angular and React applications creating and writing using Visual Studio Code ?

• Download and install Visual Studio Code

• Open Visual Studio Code

Settings

• Make the file automatically saved (no need to click on File → Save) in Visual Studio Code

• Make the code tabs instead of spaces in Visual Studio Code

Creating a new application

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

• Create a new application TypeScript in Visual Studio Code. Debug the application. We look in debugging how TypeScript is executed step by step. Breakpoints.

• Create a new application with Angular 8 in Visual Studio Code. Debug the application. See in debugging how to perform TypeScript

• Создаем новое приложение с Angular 9 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript

• Создаем новое приложение с Angular 12 в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется TypeScript

• Создаем новое приложение с React в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется код

• Создаем новое приложение с Python в Visual Studio Code. Отладка приложения. Смотрим в отладке как по шагам выполняется Python