Редактор Visual Studio Code предлагает огромное количество встроенных функций. Кроме того, он предоставляет поддержку приложений по отладке кода. В этом руководстве мы расскажем, как настроить VS Code для отладки кода Node.js. Для этого мы загрузим расширение Debugger для Chrome, затем создадим и запустим конфигурацию отладки, а также установим точки останова.
Требования
- Локальная установка Node.js (чтобы найти инструкции по установке, выберите соответствующую систему: mac OS, Debian, CentOS, Ubuntu).
- Последняя версия Visual Studio Code.
- Расширение Debugger, установленное в Visual Studio Code.
В данном мануале мы выполним отладку кода приложения по имени Quick Chat. Конечно, описанные здесь инструкции вы можете протестировать на любом своем проекте JavaScript, который можно запустить на сервере Node.
Если у вас нет такого проекта, создайте простой тестовый проект.
1: Создание тестового приложения (опционально)
Разумеется, чтобы выполнить примеры из этого мануала, вам нужно подготовить проект. Как сказано выше, здесь мы используем в этих целях приложение Quick Chat.
Основы Javascript #3. Запуск проекта в VSCode
С помощью Git клонируйте репозиторий приложения Design-and-Build-a-Chat-Application-with-Socket.io. Помимо этого, вы можете скачать zip-файл и распаковать его.
В этом руководстве мы будем использовать код из 8 части проекта. Прежде всего найдите минутку, чтобы ознакомиться с тем, как в идеале должно работать приложение.
Перейдите в каталог проекта, а затем в каталог part-8:
cd Design-and-Build-a-Chat-Application-with-Socket.io
cd part-8
Далее установите пакеты npm для данного проекта:
Наконец, запустите сервер:
Если вы откроете адрес 127.0.0.1:3000 в Chrome, браузер запросит имя пользователя. Введите имя и нажмите кнопку Chat!, после чего вы будете перенаправлены в приложение и увидите следующее:
User joined the chat.
Если ввести в поле внизу окна какой-то текст и нажать кнопку Send, ваше сообщение отобразится в чате.
Если вы откроете новую вкладку браузера и посетите тот же URL, вы сможете войти в систему как другой пользователь. Таким образом, вы сможете читать сообщения чата в обеих вкладках браузера. Это нормальное и ожидаемое поведение нашего приложения.
2: Создание точки останова
Далее мы создадим в приложении точку останова – такие точки позволяют приостановить выполнение кода и проверить его.
Quick Chat – это приложение Node/Express, которое использует Socket.io, чтобы пользователи могли общаться друг с другом в режиме реального времени. Давайте добавим точку останова при подключении клиента к серверу.
Чтобы создать такую точку в VS Code, кликните на пустое пространство слева от номеров строк.
Создайте точку останова внутри функции, которая вызывается при каждом подключении пользователя, это 15 по счету строка. При этом слева от номера строки появится красный кружок.
// .
io.on(‘connection’, socket => console.log(‘a user connected’);
Как запустить JavaScript + HTML код в Vs Code
// .
>);
Даже если вы отлаживаете другое приложение, создайте в нем свою точку останова, которую будет легко запустить: например, при запуске приложения, вызове маршрута и т.д.
3: Панель отладки VS Code
Обратите внимание на боковую панель редактора (по умолчанию она находится слева). Чтобы открыть панель отладки, найдите в этой панели кнопку с перечеркнутым жуком и нажмите ее. Здесь вы увидите четыре разных раздела: variables, watch, call stack и breakpoints.
В верхней части панели вы увидите зеленую кнопку воспроизведения и выпадающий список – на нем будет надпись No Configurations, если вы еще не создали конфигурацию отладки. Соответственно, если ранее вы создали конфигурацию, вы увидите ее в этом списке.
VS Code хранит конфигурации отладки в файле launch.json внутри папки .vscode. VS Code помогает создать не только эту папку и файл, но в том числе и предопределенные конфигурации. Давайте попробуем создать нашу первую конфигурацию.
Итак, чтобы создать исходный файл launch.json, кликните на выпадающий список No Configurations и выберите Add Configuration. На экране появится всплывающее окно, которое можно проигнорировать. Приступим же к созданию нашей первой конфигурации.
Ключевыми компонентами конфигурации отладки являются:
- name – имя вашей конфигурации, отображаемое в выпадающем списке.
- request – тип действия, которое вы хотите выполнить.
- type – тип отладчика конфигурации. Это может быть Node, Chrome, PHP и т.д.
Кроме того, VS Code поможет определить другие свойства через IntelliSense.
4: Отладка с помощью программы запуска
Первая конфигурация запустит приложение Node в режиме отладки. Запуск в этом режиме позволяет VS Code подключаться к приложению через определенный порт. Кроме того, нам нужно определить файл программы, которая будет запускаться. В итоге конфигурация выглядит так:
Чтобы запустить эту конфигурацию, выберите ее в выпадающем списке и нажмите зеленую кнопку воспроизведения. В правом верхнем углу появится панель действий отладки с кнопками step, continue, restart и stop.
В дальнейшем используйте флаг –inspect, чтобы запустить приложение Node в режиме отладки.
5: Отладка по идентификатору процесса
Вторая конфигурация, которую мы рассмотрим, – это подключение к процессу Node по ID этого процесса. Подобный сценарий будет актуален для приложений, которые уже запущены в вашей локальной среде.
Для этого перед запуском конфигурации отладки нам нужно самостоятельно запустить сервер Node. Используйте следующую команду для запуска вашего сервера (вместе с флагом –inspect, как говорилось ранее). Замените app.js именем вашего файла.
node —inspect app.js
Теперь, когда сервер запущен, вы можете запустить конфигурацию отладки. При появлении запроса выберите процесс Node, соответствующий команде, которую вы только что выполнили для запуска сервера.
После этого соединение будет установлено успешно.
6: Отладка через подключение к порту
Третий пример конфигурации – подключение к существующему приложению Node, работающему по заданному порту.
«type»: «node»,
«request»: «attach»,
«name»: «Attach to Port»,
«port»: 9229
>,
9229 – стандартный порт для отладки при использовании флага –inspect, поэтому мы и будем использовать его здесь.
Tutorial: Create a Node.js and Express app in Visual Studio
Applies to: 
Visual Studio 
Visual Studio for Mac Visual Studio Code
In this article, you will learn how to use Visual Studio to build a simple Node.js web app that uses the Express framework.
Before you begin, here’s a quick FAQ to introduce you to some key concepts:
- What is Node.js? Node.js is a server-side JavaScript runtime environment that executes JavaScript code.
- What is npm? A package manager makes it easier to use and share Node.js source code libraries. The default package manager for Node.js is npm. The npm package manager simplifies the installation, updating, and uninstallation of libraries.
- What is Express? Express is a server web application framework that Node.js uses to build web apps. With Express, there are many different ways to create a user interface. The implementation provided in this tutorial uses the Express application generator’s default template engine, called Pug, to render the front-end.
Prerequisites
Make sure to install the following:
- Visual Studio 2022 version 17.4 or later with the ASP.NET and web development workload installed. Go to the Visual Studio downloads page to install it for free. If you need to install the workload and already have Visual Studio, go to Tools >Get Tools and Features. , which opens the Visual Studio Installer. Choose the ASP.NET and web development workload, then choose Modify.
- npm (https://www.npmjs.com/), which is included with Node.js
- npx (https://www.npmjs.com/package/npx)
Create your app
- In the Start window (choose File >Start Window to open), select Create a new project.
- Search for Express in the search bar at the top and then select JavaScript Express Application.
- Give your project and solution a name.
View the project properties
The default project settings allow you to build and debug the project. But, if you need to change settings, right-click the project in Solution Explorer, select Properties, and then go the Build or Debugging section.
launch.json stores the startup settings associated with the Start button in the Debug toolbar. Currently, launch.json must be located under the .vscode folder.
Build your project
Choose Build > Build Solution to build the project.
Start your app
Press F5 or select the Start button at the top of the window, and you’ll see a command prompt:
- npm running the node ./bin/www command
Check console output for messages, such as a message instructing you to update your version of Node.js.
Next, you should see the base Express app appear!
Debug your app
We will now go through a couple of ways you can debug your app.
First, if your app is still running, press Shift + F5 or select the red stop button at the top of the window in order to stop the current session. You might notice that stopping the session closes the browser showing your app, but leaves behind the command prompt window running the Node process. For now, go ahead and close any lingering command prompts. Later in this article, we describe why you might want to leave the Node process running.
Debugging the Node process
In the dropdown next to the Start button, you should see the following start options:
- localhost (Edge)
- localhost (Chrome)
- Debug Dev Env
- Launch Node and Browser
Go ahead and select the Launch Node and Browser option. Now, before pressing F5 or selecting the Start button again, set a breakpoint in index.js (in the routes folder) by selecting the left gutter before the following line of code: res.render(‘index’, < title: ‘Express’ >);
You can also put your cursor on a line of code and hit F9 to toggle the breakpoint for that line.
Then, press F5 or select Debug > Start Debugging to debug your app.
You should see the debugger pause at the breakpoint you just set. While it is paused, you can inspect your app state. Hovering over variables will let you examine their properties.
When you’re finished inspecting the state, hit F5 to continue, and your app should load as expected.
This time, if you hit stop, you will notice that both the browser and the command prompt windows close. To see why, take a closer look at the launch.json.
Understanding the launch.json
The launch.json is currently located in the .vscode folder. If you cannot see the .vscode folder in Solution Explorer, select Show All Files.
If you have worked with Visual Studio Code before, the launch.json file will look familiar. The launch.json here works in much the same way as it does in Visual Studio Code to denote launch configurations used for debugging. Each entry specifies one or more targets to be debugged.
The first two entries are browser entries, and they should look something like this:
< «name»: «localhost (Edge)», «type»: «edge», «request»: «launch», «url»: «http://localhost:3000», «webRoot»: «$\public» >, < «name»: «localhost (Chrome)», «type»: «chrome», «request»: «launch», «url»: «http://localhost:3000», «webRoot»: «$\public» >
You can see in the above entries that the type is set to a browser type. If you launch with only a browser type as the sole debug target, Visual Studio will debug only the frontend browser process, and the Node process will be started without a debugger attached, meaning that any breakpoints that are set in the Node process will not bind.
Upon stopping the session, the Node process will also continue to run. It is intentionally left running when a browser is the debug target, because if work is solely being done on the frontend, having the backend process continuously running eases the development workflow.
At the start of this section, you closed the lingering command prompt window in order to set breakpoints in the Node process. For the Node process to be debuggable, it must be restarted with the debugger attached. If a non-debuggable Node process is left running, attempting to launch the Node process in debug mode (without reconfiguring the port) will fail.
Currently, edge and chrome are the only supported browser types for debugging.
The third entry in the launch.json specifies node as the debug type, and it should look something like this:
< «name»: «Debug Dev Env», «type»: «node», «request»: «launch», «cwd»: «$/bin», «program»: «$/bin/www», «stopOnEntry»: true >
This entry will launch only the Node process in debug mode. No browser will be launched.
The fourth entry provided in the «launch.json* is the following compound launch configuration.
This compound configuration is the same as a vscode compound launch configuration, and selecting it allows you to debug both the frontend and backend. You can see that it simply references the individual launch configurations for the Node and browser processes.
There are many other attributes you can use in a launch configuration. For example, you can hide a configuration from the dropdown, but still have it be referenceable, by setting the hidden attribute in the presentation object to true .
< «name»: «localhost (Chrome)», «type»: «chrome», «request»: «launch», «url»: «http://localhost:3000», «webRoot»: «$\public», «presentation»: < «hidden»: true >>
Click Options for a list of attributes you can use to enhance your debugging experience. Please note that at the moment, only launch configurations are supported. Any attempt to use an attach configuration will result in a deployment failure.
Обратная связь
Отправить и просмотреть отзыв по
Источник: learn.microsoft.com
Как запустить javascript код в vs code?
Привет, я начал изучать js и столкнулся с проблемой что не могу запустить код в vs code. Пересмотрел много разных видео, но ничто не помогло (скачивал расширение liveServer), но код написанный на html на экран выводится а javascript — нет. Может надо прописать какой о путь?
- Вопрос задан более года назад
- 7042 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 4
JS можно запустить либо на nodeJS, либо в браузере.
Чтобы запустить на ноде: node index.js
Для того чтобы запустить в браузере:
1) в html файле нужно написать
2) открыть html файл в браузере банально его туда перетащив
Ответ написан более года назад
Комментировать
Нравится 1 Комментировать
Умею гуглить
Нужно подключить скрипты , собственно указать путь к фафлу
Ответ написан более года назад
Комментировать
Нравится Комментировать
Web Developer
Надо задать расширение файлу. И выбрать язык JavaScript. Посмотрите данные видео и поймёте всё более детально.
Ответ написан более года назад
Комментировать
Нравится Комментировать
Привет! Тоже сейчас изучаю Js. Лучшее решение для себя нашел программу RunJs. Копируешь код туда и он его сразу компилирует. Подойдет для проверки циклов и алгоритмов.
Ответ написан более года назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +3 ещё
С чего начать изучение верстки?
- 1 подписчик
- час назад
- 58 просмотров
Источник: qna.habr.com