запустить javascript код с дебагом в visual studio code
Как использовать Visual Studio Code для разработки и отладки Node.js
Ознакомьтесь с инструкциями по разработке и отладке проекта на JavaScript в Node.js с помощью Visual Studio.
Подготовка среды
Установите git. Интеграция Visual Studio Code с git предоставляет возможность управления Системой управления версиями на боковой панели.
Получите строку подключения к базе данных mongoDB.
Если у вас нет доступной базы данных mongoDB, вы можете:
Клонирование примера проекта на локальный компьютер
Чтобы приступить к работе, скачайте пример проекта, как описано ниже.
Откройте Visual Studio Code.
Нажмите клавишу F1, чтобы отобразить палитру команд.
Выберите (или создайте) локальный каталог, в который нужно клонировать проект.
Использование встроенного терминала bash для установки зависимостей
В этом проекте Node.js сначала необходимо установить все зависимости проекта из npm.
Введите yarn и нажмите клавишу ВВОД.
Переход к файлам и коду проекта
Чтобы ориентироваться в базе кода, поэкспериментируем с возможностями навигации в среде Visual Studio Code.
Нажмите клавиши CTRL+P.
Выберите файл server.js, который является скриптом запуска приложения.
Наведите указатель мыши на переменную database (импортирована в строку 6), чтобы просмотреть ее тип. Эта возможность быстро проверять переменные, модули и типы в файле удобна при разработке проектов.
Нажмите кнопку мыши в пределах диапазона переменной, например database, чтобы просмотреть все ссылки на эту переменную в том же файле. Чтобы просмотреть все ссылки на переменную в проекте, щелкните переменную правой кнопкой мыши и в контекстном меню выберите Найти все ссылки.
Вы также можете просмотреть определение переменной, даже если оно находится в другом файле. Например, щелкните правой кнопкой мыши database.localUrl (строка 12) и в контекстном меню выберите Показать определение.
Использование функции автозаполнения в mongoDB
Откройте файл server.js.
Кроме встроенных API-интерфейсов Node.js, функция автоматического получения значений также поддерживает более 2000 модулей сторонних производителей, таких как React, Underscore и Express. Например, чтобы не позволить Mongoose аварийно завершать работу приложения, если оно не может подключиться к настроенному экземпляру базы данных MongoDB, вставьте следующую строку кода в строку 13:
Как и при использовании предыдущего кода, вы получите автозаполнение автоматически.
Модули, которые поддерживает эта функция автозаполнения, можно увидеть в созданном сообществом проекте DefinitelyTyped, который является источником для всех определений типов TypeScript.
Выполнение локального приложения Node.js
Теперь, когда вы познакомились с кодом, пришло время запустить приложение. Чтобы запустить приложение из Visual Studio Code, нажмите клавишу F5. При запуске кода с помощью F5 (режим отладки) Visual Studio Code запускает приложение и показывает окно консоли отладки, отображающее StdOut для приложения.
Кроме того, консоль отладки подключается к только что запущенному приложению, чтобы вы могли вводить выражения JavaScript, которые будут обрабатываться в приложении. В этой консоли также есть функция автоматического заполнения. Чтобы увидеть это поведение, введите в консоли process.env :
Вы смогли запустить приложение нажатием клавиши F5, так как открытый сейчас файл является файлом JavaScript (server.js). Поэтому Visual Studio Code предполагает, что проект является приложением Node.js. Закройте все файлы JavaScript в Visual Studio Code и нажмите клавишу F5. В Visual Studio Code появится запрос на выбор среды:
Отладка локального приложения Node.js
Кроме того что в Visual Studio Code можно запустить приложение и взаимодействовать с ним через консоль, вы также можете задавать точки останова непосредственно в коде. Например, нажмите клавиши CTRL+P, чтобы отобразить средство выбора файлов. Когда откроется средство выбора файлов, введите route и выберите файл route.js.
Установите точку останова на строке 28, представляющей маршрут Express (вызывается, когда приложение пытается добавить запись из списка задач). Чтобы задать точку останова, щелкните область слева от номера строки в редакторе, как показано на следующем рисунке.
Помимо стандартных точек останова, средство Visual Studio Code поддерживает условные точки останова, которые позволяют указать время остановки приложения. Чтобы задать условную точку останова, щелкните правой кнопкой мыши область слева от строки, в которой нужно приостановить выполнение, выберите Add Conditional Breakpoint (Добавить условную точку останова) и укажите выражение JavaScript (например, foo = «bar» ) или число операций выполнения, определяющих условие, при котором приложение должно быть остановлено.
Установив точку останова, вернитесь к выполняемому приложению и добавьте запись из списка задач. Добавление такой записи немедленно останавливает выполнение приложения на строке 28, где вы задали точку останова:
Когда приложение будет приостановлено, можно навести указатель мыши на выражения кода, чтобы просмотреть их текущие значения, проверить локальные переменные или контрольные значения и стек вызовов, а также использовать панель инструментов отладки для пошагового выполнения кода. Нажмите клавишу F5, чтобы возобновить выполнение приложения.
Локальная полностековая отладка в Visual Studio Code
Как упоминалось выше, приложение со списком задач — это приложение MEAN, то есть приложение, интерфейс и серверная часть которого написаны с помощью JavaScript. То есть, если вы выполняете отладку серверного кода (Node/Express), в определенный момент может потребоваться отладить код интерфейса (Angular). Для этого в Visual Studio Code есть множество расширений, в том числе встроенная отладка Chrome.
Откройте вкладку Расширения и введите chrome в поле поиска:
Выберите расширение с именем Отладчик для Chrome и выберите Установить. Установив расширение отладки Chrome, щелкните Перезагрузить, чтобы закрыть и снова открыть Visual Studio Code для активации расширения.
Хотя вы смогли выполнить и отладить код Node.js без специальной настройки Visual Studio Code, чтобы отладить внешнее веб-приложение, необходимо создать файл launch.json, который сообщает Visual Studio Code, как запускать приложение.
Создание полностекового файла launch.json для Visual Studio Code
Чтобы создать файл launch.json, откройте вкладку Отладка, выберите значок шестеренки (на нем должна быть небольшая красная точка вверху) и среду node.js.
Созданный файл launch.json выглядит, как на снимке экрана ниже. Этот файл сообщает Visual Studio Code, как запустить приложение или как подключиться к нему, чтобы выполнить его отладку.
Средство Visual Studio Code определило, что скриптом запуска приложения является server.js.
Откройте файл launch.json, нажмите кнопку Добавить конфигурацию (внизу справа) и щелкните Chrome: запустить с использованием userDataDir.
Добавление новой конфигурации запуска для Chrome позволяет отладить внешний код JavaScript.
Чтобы запустить и выполнить отладку внешнего и внутреннего кода одновременно, необходимо создать комплексную конфигурацию запуска, которая сообщает средству Visual Studio Code, какой набор конфигураций нужно выполнять параллельно.
Добавьте следующий фрагмент кода в качестве свойства верхнего уровня в файл launch.json (как одноуровневое свойство имеющегося свойства configurations).
Строковые значения, указанные в массиве compounds.configurations, ссылаются на имя отдельных записей в списке конфигураций. Если вы уже изменили эти имена, внесите соответствующие изменения в массив. Например, перейдите на вкладку «Отладка» и выберите для выбранной конфигурации значение Full-Stack (Полный стек) (имя составного конфигурации) и нажмите клавишу F5 для запуска.
Выполнение конфигурации запускает приложение Node.js (это можно увидеть в выходных данных консоли отладки) и Chrome (который настроен для перехода к приложению Node.js по адресу http://localhost:8080 ).
Нажмите клавиши CTRL+P и введите (или выберите) значение todos.js, которое является основным контроллером Angular внешней части приложения.
Установите точку останова на строке 11, которая является точкой входа для создаваемой записи из списка задач.
Вернитесь к выполняемому приложению и добавьте новую запись. Вы увидите, что средство Visual Studio Code приостановило выполнение кода Angular.
Как и во время отладки Node.js, можно навести указатель мыши на выражения, просмотреть локальные переменные и контрольные значения, обработать выражения в консоли и т. д.
Необходимо обратить внимание на два важных момента.
В области Стек вызовов отображаются два разных стека: Node и Chrome. При этом указано, какой из стеков приостановлен.
Вы можете переходить между внешним и внутренним кодом, нажав клавишу F5, чтобы запустить и активировать точку останова, заданную ранее в маршруте Express.
После этого вы можете эффективно отладить внешний и внутренний код JavaScript или код полного стека JavaScript непосредственно в Visual Studio Code.
Концепция комплексного отладчика не ограничивается только двумя целевыми процессами и кодом JavaScript. Поэтому, если вы работаете с приложением-микрослужбой (это может быть polyglot), можно использовать тот же рабочий процесс (после установки соответствующих расширений для языка или платформы).
Отладка приложения JavaScript или TypeScript в Visual Studio
Visual Studio позволяет выполнять отладку кода JavaScript и TypeScript. Вы можете задавать и использовать точки останова, подключать отладчик, проверять значения переменных, просматривать стек вызовов и применять другие функции отладки.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого. В зависимости от методов, используемых для разработки приложений, вам может потребоваться установить вместе с Visual Studio рабочую нагрузку Разработка Node.js.
Отладка серверного скрипта
Открыв проект в Visual Studio, откройте файл JavaScript с серверным скриптом (например, server.js) и щелкните в области слева, чтобы задать точку останова:
Точки останова — это один из самых простых и важных компонентов надежной отладки. Точка останова указывает, где Visual Studio следует приостановить выполнение кода, чтобы вы могли проверить значения переменных или поведение памяти либо выполнение ветви кода.
Чтобы запустить приложение, нажмите клавишу F5 (или выберите пункт меню Отладка > Начать отладку).
Выполнение отладчика прервется в установленной точке останова (текущий оператор выделяется желтым цветом). Теперь вы можете изучить состояние приложения, наводя указатель мыши на переменные в текущей области и используя окна отладчика, такие как Локальные и Контрольные значения.
Чтобы продолжить выполнение приложения, нажмите клавишу F5.
Если вы хотите использовать Средства Chrome для разработчиков (средства F12), нажмите клавишу F12. С их помощью можно изучить модель DOM и взаимодействовать с приложением с помощью консоли JavaScript.
Отладка клиентского скрипта
Visual Studio обеспечивает отладку на стороне клиента только для Chrome и Microsoft Edge (Chromium). В некоторых сценариях отладчик автоматически останавливается на точках останова в коде JavaScript и TypeScript, в том числе во внедренных в HTML-файлы скриптах. Сведения об отладке сценария на стороне клиента в приложениях ASP.NET см. в записи блога Отладка JavaScript в Microsoft Edge и этом записи в Google Chrome. См. сведения об отладке TypeScript в ASP.NET Core см. в руководстве по созданию приложения ASP.NET Core с помощью TypeScript.
Visual Studio поддерживает отладку на стороне клиента только для браузеров Chrome и Internet Explorer. В некоторых сценариях отладчик автоматически останавливается на точках останова в коде JavaScript и TypeScript, в том числе во внедренных в HTML-файлы скриптах. Сведения об отладке сценария на стороне клиента в приложениях ASP.NET см. в записи блога Client-side debugging of ASP.NET projects in Google Chrome (Отладка проектов ASP.NET на стороне клиента в Google Chrome).
Для приложений, отличных от ASP.NET, выполните действия, описанные здесь.
Подготовка приложения к отладке
Сведения о создании сопоставителей с исходным кодом см. в разделе Создание сопоставлений источника для отладки.
Подготовка браузера к отладке
Для этого сценария используйте Microsoft Edge (Chromium), в настоящее время называемый Microsoft Edge Beta в IDE, или Chrome.
Для этого сценария используйте Chrome.
Закройте все окна целевого браузера.
Другие экземпляры браузера могут препятствовать его открытию при включенной отладке. (Работающие расширения браузера могут препятствовать полному режиму отладки, поэтому для обнаружения неожиданных экземпляров Chrome может понадобиться открыть диспетчер задач).
Для Microsoft Edge (Chromium) также отключите все экземпляры Chrome. Это дает лучшие результаты, поскольку оба браузера используют базу кода Chromium.
Запустите браузер с включенной отладкой.
Также можно открыть команду Выполнить кнопки Пуск в Windows (щелкнуть правой кнопкой мыши команду Выполнить) и ввести следующую команду:
Щелкните правой кнопкой мыши кнопку Пуск Windows, выберите команду Выполнить и введите следующую команду :
Ваш браузер будет запущен в режиме отладки.
Приложение еще не запущено, поэтому вы видите пустую страницу браузера.
Подключение отладчика к сценарию на стороне клиента
Чтобы подключить отладчик из Visual Studio и использовать точки останова в коде на стороне клиента, необходимо правильно настроить процесс в отладчике. Ниже описывается один из способов.
Перейдите в Visual Studio, а затем установите точку останова в исходном коде, который может быть файлом JavaScript, TypeScript или JSX. (Выберите для точки останова строку кода, в которой допустимы точки останова, например оператор return или объявление var).
Чтобы найти конкретный код в транспонированном файле, используйте Ctrl+F (Изменить > Найти и заменить > Быстрый поиск).
Для кода на стороне клиента, чтобы попасть в точку останова в файле TypeScript, .vue или JSX, как правило, необходимо использовать сопоставитель с исходным кодом. Сопоставитель с исходным кодом следует правильно настроить, чтобы он поддерживал отладку в Visual Studio.
Выберите ваш целевой браузер в качестве целевого объекта отладки в Visual Studio, нажмите клавиши CTRL+F5 (Отладка > Запуск без отладки), чтобы запустить приложение в браузере.
Если вы создали конфигурацию браузера с понятным именем, выберите ее в качестве цели отладки.
Приложение откроется в новой вкладке браузера.
Выберите Отладка > Присоединение к процессу.
Начиная с Visual Studio 2017, после первого присоединения к процессу с помощью этих инструкций, дальнейшее присоединение можно выполнять с помощью команды Отладка > Повторно подключиться к процессу.
В диалоговом окне Присоединить к процессу получите отфильтрованный список экземпляров браузера для присоединения.
В Visual Studio 2019 выберите правильный отладчик для вашего целевого браузера, JavaScript (Chrome) или JavaScript (Microsoft Edge — Chromium) в поле Присоединить к, введите chrome или edge в поле фильтра, чтобы отфильтровать результаты поиска.
В Visual Studio 2017 выберите в поле Присоединить к элемент Код Webkit и введите chrome в поле фильтра, чтобы отфильтровать результаты поиска.
Выберите процесс браузера с соответствующим портом узла (localhost в этом примере) и нажмите кнопку Присоединить.
Порт (например 1337) также может отображаться в поле Заголовок, чтобы помочь выбрать правильный экземпляр браузера.
В следующем примере показано, как это выглядит в браузере Microsoft Edge (Chromium).
Определить, что отладчик присоединился правильно, можно по открытию проводника DOM и консоли JavaScript в Visual Studio. Эти средства отладки аналогичны инструментам Chrome для разработчиков и средствам F12 для Microsoft Edge.
Если отладчик не присоединяется и появляется сообщение «Не удалось запустить адаптер отладки» или «Не удалось присоединиться к процессу. Операция недопустима в текущем состоянии» — попробуйте закрыть все экземпляры целевого браузера в диспетчере задач перед попыткой запуска целевого браузера в режиме отладки. Возможно, в браузере выполняются расширения, которые препятствуют переходу в режим полной отладки.
Обновите страницу браузера, поскольку код с точкой останова возможно уже был выполнен. При необходимости выполните действия, приводящие к выполнению кода с точкой останова.
Когда отладчик приостановит выполнение, вы можете изучить состояние приложения, наводя указатель мыши на переменные и используя окна отладчика. Вы также можете выполнять пошаговую отладку кода (клавиши F5, F10 и F11). Дополнительные сведения об основных функциях отладки см. в разделе Первое знакомство с отладчиком.
В зависимости от типа приложения, выполненных ранее шагов и других факторов, таких как состояние браузера, вы можете попасть в точку останова транскомпилированного файла .js либо исходного файла. В любом случае вы можете выполнять пошаговую отладку кода и просматривать переменные.
Если вам нужно декомпозировать код в исходном файле TypeScript, JSX или .vue и вы не можете это сделать, убедитесь, что ваша среда настроена правильно, как описано в разделе Устранение неисправностей.
Если вам нужно декомпозировать код в файле с компиляцией в код на языке программирования JavaScript (например, app-bundle.js), но сделать это не удается, удалите файл сопоставления источника filename.js.map.
Устранение неполадок точек останова и сопоставителей с исходным кодом
Если вам нужно декомпозировать код в исходном файле TypeScript или JSX, но сделать это не удается, используйте Присоединить к процессу, чтобы подключить отладчик, как описано в предыдущих этапах. Убедитесь, что ваша среда настроена правильно:
Вы закрыли все экземпляры браузера, включая расширения Chrome (с помощью диспетчера задач) для запуска браузера в режиме отладки.
Либо, если вам нужно декомпозировать код в исходном файле (например app.tsx), но сделать это не удается, попробуйте использовать оператор debugger; в исходном файле или установите точки останова в инструментах для разработчиков в Chrome (или средства F12 для Microsoft Edge).
Создание сопоставлений источника для отладки
В Visual Studio можно использовать и создавать сопоставления источника для исходных файлов JavaScript. Такая возможность часто нужна, когда исходный код минифицирован или создан в транспайлере, например в TypeScript или Babel. Доступные варианты зависят от типа проекта.
Проект TypeScript в Visual Studio по умолчанию автоматически создает сопоставления источника. Дополнительные сведения см. в разделе Настройка сопоставлений источника с помощью файла tsconfig.json.
Если вы не знакомы с сопоставлениями источников, изучите эту вводную статью, прежде чем продолжать работу.
Чтобы настроить дополнительные параметры для сопоставлений источника, используйте файл tsconfig.json или параметры проекта для проекта TypeScript, но не оба метода сразу.
(Только для webpack) Если точка останова устанавливается в TypeScript файла JSX (а не в виде файла JavaScript), необходимо обновить конфигурацию webpack. Например, в файл webpack-config.js может потребоваться заменить следующий код:
Это настройка только для разработки, позволяющая отладку кода на стороне клиента в Visual Studio.
В сложных сценариях средства браузера (F12) иногда лучше подходят для отладки, так как для них не нужно выполнять изменения в пользовательских префиксах.
Настройка сопоставлений источника с помощью файла tsconfig.json
Если вы добавите в проект файл tsconfig.json, Visual Studio будет считать корневой каталог проектом TypeScript. Чтобы добавить файл, щелкните проект правой кнопкой мыши в обозревателе решений и последовательно выберите Добавить > Новый элемент > JSON-файл конфигурации TypeScript. Это действие добавит в проект файл tsconfig.json, аналогичный представленному ниже.
Параметры компилятора для tsconfig.json
Дополнительные сведения о параметрах компилятора вы найдете на странице с параметрами компилятора в справочнике по TypeScript.
Настройка сопоставителей с исходным кодом с помощью параметров проекта (TypeScript project)
Также вы можете настроить параметры сопоставления источника в свойствах проекта, щелкнув проект правой кнопкой мыши и выбрав Проект > Свойства > Сборка TypeScript > Отладка.
Здесь доступны следующие параметры проекта.
Отладка JavaScript в динамических файлах с помощью Razor (ASP.NET)
Начиная с Visual Studio 2019, Visual Studio обеспечивает отладку только для Chrome и Microsoft Edge (Chromium).
Visual Studio поддерживает отладку только для браузеров Chrome и Internet Explorer.
Однако, вы не сможете автоматически использовать точки останова в файлах, созданных с синтаксисом Razor (cshtml, vbhtml). Для отладки файлов такого типа вы можете применить два следующих подхода.
Поместите инструкцию debugger; в той строке, где нужно прервать выполнение. Эта инструкция прерывает выполнение динамического скрипта и начинает отладку сразу же при его создании.
Загрузите страницу и откройте динамический документ в Visual Studio. Чтобы воспользоваться этим методом, нужно открыть динамический файл в процессе отладки, задать в нем точку останова и обновить страницу. В зависимости от выбранного браузера (Chrome или Internet Explorer) вы сможете найти этот файл с помощью следующих действий.
Для Microsoft Edge (Chromium) используйте ту же процедуру, что и для Chrome.