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

Компьютер, программы

→

Visual Studio Code (для написания программ на JavaScript, Perl, Python, Java, C#)

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

посмотрели 6042 раз

обновлено: 12 апреля 2023

Скачать пример

my_javascript_project1.zip ...
размер: 1 kb

Как запустить пример:

1) Открываем Visual Studio Code
2) В Visual Studio Code нажимаем в меню File → Open Folder выбираем папку где распокавали проект
3) Нажимаем Run → Run Debugging или кнопку F5

Структура файлов:

D:/my_react_example1

index.html

my.js

.vscode

launch.json файл настройки для Visual Studio Code

План (8 шагов). Создаем новое приложение JavaScript в Visual Studio Code. Отладка приложения.

Шаг 1.

Открываем Visual Studio Code

Шаг 2.

Создаем новую папку my_javascript_project1 на диске D: и в Visual Studio Code выбираем эту папку

Шаг 3.

Создаем новый файл index.html внутри Visual Studio Code

Шаг 4.

Создаем новый файл my.js внутри Visual Studio Code

Шаг 5.

Запускаем проект в отладчике Run → Start Debugging (клавиша F5) и выбираем Chrome

Шаг 6.

Установим Chrome Debugger

Шаг 7.

Настройка файла launch.json (выбираем путь к запускаемому файлу)

Шаг 8.

Ставим точки остановки (Breakpoints)

Шаг 1. Открываем Visual Studio Code

Если у вас не установлена Visual Studio Code, нужно установить Visual Studio Code ... .

Открываем Visual Studio Code

Шаг 2. Создаем новую папку my_javascript_project1

Создаем новую папку my_javascript_project1 на диске D:
и в Visual Studio Code нажимаем File → Open Folder ...
и выбираем эту папку D:/my_javascript_project1

Шаг 3. Создаем новый файл index.html внутри Visual Studio Code

Добавим код в

файл D:/My/my.html

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

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

Сохраним файл, для этого нажимаем File → Save

Шаг 4. Создаем новый файл my.js внутри Visual Studio Code

Добавим код в

файл my.js

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

     return sum;
}

Сохраним файл для этого нажимаем File → Save

Шаг 5. Запускаем проект в отладчике Run → Start Debugging (клавиша F5) и выбираем Chrome

Если в списке нет Chrome , тогда установим Chrome Debugger

Шаг 6. Установим Chrome Debugger

Шаг 7. Настройка файла launch.json (выбираем путь к запускаемому файлу)

Опять запускаем проект т.е. нажимаем Run → Start Debugging и выбираем Chrome.
Появится файл с настройками launch.json.

В параметре url напишем путь к запускаемому файлу.

Файл 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"
          }
     ]
}

Сохраним файл, в меню нажимаем File → Save

Шаг 8. Ставим точки остановки (Breakpoints)

Поставим точки остановки в файле index.js.
Точки остановки ставятся нажатием клавиши F9.

Запускаем программу в отладчике (debug). Нажимаем Run → Run Debugging или кнопку F5.

Программа запущена и мы можем смотреть:
• WATCH (значение переменных)
• CALL STACK (стэк вызова функций)
• BREAKPOINTS (ставить, убирать точки остановки)

На заметку!

После нажатия клавиши F5, в самый в первый раз отладчик не останавливается на точке остановки.
Отладчик останавливается на точке остановки, когда я нажимаю Restart.

На заметку! Чтобы увидеть окно WATCH, BREAKPOINTS, CALL STACK нужно нажать в меню View → Debug.

Результат

Visual Studio Code очень удобно использовать для отладки JavaScript, а так же чтобы видеть значения переменных.

← Предыдущая тема
Делаем чтобы в коде были tabs вместо spaces в Visual Studio Code

Следующая тема →
Создаем новое приложение TypeScript в Visual Studio Code. Отладка приложения. Смотрим в отладке, как по шагам выполняется TypeScript. Точки остановки.