Отладка приложения JavaScript или TypeScript в Visual Studio

Вы можете выполнить отладку кода JavaScript и TypeScript с помощью Visual Studio. Вы можете устанавливать точки останова, подключаться к отладчику, исследовать переменные, просматривать стек вызовов и использовать другие функции отладки.

Tip

Если вы еще не установили Visual Studio, перейдите на страницу загрузки Visual Studio, чтобы бесплатно установить ее.

Настройка отладки

Для проектов .esproj в Visual Studio 2022 Visual Studio Code использует файл launch.json для настройки и кастомизации отладчика. launch.json — это файл конфигурации отладчика.

Visual Studio подключает отладчик только к пользовательскому коду. Для проектов .esproj можно настроить пользовательский код (также называемый параметрами Just My Code) в Visual Studio с помощью настройки skipFiles в launch.json. Это работает так же, как и параметры launch.json в VS Code. Дополнительные сведения о параметрах конфигурации skipFiles и других параметрах конфигурации отладчика см. в Пропуск неинтересного кода и Атрибуты конфигурации запуска.

Отладка скрипта на стороне сервера

1. Откройте ваш проект в Visual Studio, откройте файл JavaScript на стороне сервера (например, server.js), щелкните в боковой панели, чтобы задать точку останова:

   

   Точки останова — это самая базовая и важная функция надежной отладки. Точка останова указывает, где Visual Studio должна приостановить выполнение вашего кода, чтобы вы могли просмотреть значения переменных, поведение памяти или проверить, выполняется ли ветвь кода.

2. Чтобы запустить приложение, нажмите клавишу F5 (Отладка>Начать отладку).

   Отладчик останавливается в заданной точке останова (интегрированная среда разработки выделяет оператор на желтом фоне). Теперь вы можете проверить состояние приложения, наведите указатель мыши на переменные в области, используя окна отладчика, такие как локальные и контрольные окна.

   

3. Нажмите F5, чтобы продолжить работу приложения.

4. Если вы хотите использовать средства разработчика Chrome, нажмите клавишу F12 в браузере Chrome. С помощью этих средств можно проверить DOM или взаимодействовать с приложением с помощью консоли JavaScript.

Отладка клиентского скрипта

Visual Studio предоставляет поддержку отладки на стороне клиента только для Chrome и Microsoft Edge. В некоторых сценариях отладчик автоматически попадает в точки останова в коде JavaScript и TypeScript и внедренных скриптах в HTML-файлах.

• Для отладки клиентского скрипта в приложениях ASP.NET откройте область"Параметры>" и разверните раздел "Все параметры отладки>>общего". Выберите параметр "Включить отладку JavaScript" для ASP.NET (Chrome и Edge).

  Если вы предпочитаете использовать средства разработчика Chrome или средства F12 для Microsoft Edge для отладки клиентского скрипта, следует отключить этот параметр.

  Для получения более подробной информации см. эту запись блога для Google Chrome. Для отладки TypeScript в ASP.NET Core см. в Добавление TypeScript в существующее приложение ASP.NET Core.

• Для проектов .esproj в Visual Studio 2022 можно отлаживать клиентскую часть скрипта с помощью стандартных методов отладки, чтобы достигать точек останова. Чтобы настроить отладку, можно изменить параметрыlaunch.json , которые работают так же, как и в VS Code. Дополнительные сведения о параметрах конфигурации отладчика см. в разделе "Запуск атрибутов конфигурации".

Note

Для ASP.NET и ASP.NET Core отладка внедренных скриптов в файлах .CSHTML не поддерживается. Код JavaScript должен находиться в отдельных файлах, чтобы включить отладку.

Подготовка приложения к отладке

Если источник минифицирован или создан транспилятором, например TypeScript или Babel, используйте исходные карты для наилучшей отладки. Вы даже можете подключить отладчик к работающему клиентскому скрипту без исходных карт. Однако вы можете задать и ударить точки останова только в минифицированном или транспилированном файле, а не в исходном файле. Например, в приложении Vue.js скрипт минифицированного кода передается в виде строки в инструкцию eval, и этот код нельзя эффективно выполнять с помощью отладчика Visual Studio, если вы не используете исходные карты. Для сложных сценариев отладки может потребоваться использовать средства разработчика Chrome или средства F12 для Microsoft Edge.

Сведения о создании карт источников см. в статье Создание карт источников для отладки.

Вручную настройте браузер для отладки

В Visual Studio 2022 процедура, описанная в этом разделе, доступна только в приложениях ASP.NET и ASP.NET Core. Это необходимо только в редких сценариях, где необходимо настроить параметры браузера. В проектах esproj браузер настраивается для отладки по умолчанию.

Для этого сценария используйте Microsoft Edge или Chrome.

1. Закройте все окна целевого браузера, такие как Microsoft Edge или Chrome.

   Другие экземпляры браузера могут предотвратить открытие браузера с включенной отладкой. (Расширения браузера могут быть активны и перехватывать отладочный режим, поэтому может потребоваться открыть диспетчер задач, чтобы найти и закрыть случайные процессы Chrome или Edge.)

   Для получения наилучших результатов завершите работу всех экземпляров Chrome, даже если вы работаете с Microsoft Edge. Оба браузера используют одну и ту же базу кода chromium.

2. Запустите браузер с включенной отладкой.

   Начиная с Visual Studio 2019, можно задать флаг --remote-debugging-port=9222 при запуске браузера, выбрав Обзор с помощью...> на панели инструментов отладки.

   

   Если в панели инструментов отладки отладка не отображается команда "Обзор с помощью...", выберите другой браузер, а затем повторите попытку.

   В диалоговом окне "Обзор с помощью" выберите параметр Добавить, а затем установите флаг в поле Аргументы. Используйте другое понятное имя для браузера, например режим отладки Edge или режим отладки Chrome. Дополнительные сведения см. в заметках о выпуске .

   

   Выберите Браузер, чтобы запустить приложение в режиме отладки в браузере.

   Кроме того, откройте команду Выполнить из кнопки Windows Пуск (щелкните правой кнопкой мыши и выберите команду Выполнить) и введите следующую команду:

   msedge --remote-debugging-port=9222

   or,

   chrome.exe --remote-debugging-port=9222

   Это запускает браузер с включенной отладкой.

   Приложение еще не запущено, поэтому вы получите пустую страницу браузера. (Если вы запускаете браузер с помощью команды Run, необходимо вставить правильный URL-адрес для экземпляра приложения.)

Присоединение отладчика к клиентскому скрипту

В некоторых сценариях может потребоваться подключить отладчик к работающему приложению.

Чтобы подключить отладчик из Visual Studio и устанавливать точки останова в клиентском коде, необходимо содействие в идентификации правильного процесса. Вот один из способов включить его.

1. Убедитесь, что приложение работает в браузере в режиме отладки, как описано в предыдущем разделе.

   Если вы создали конфигурацию браузера с понятным именем, выберите ее в качестве целевого объекта, а затем нажмите Ctrl+F5 (Отладка>Запуск без отладки) для запуска приложения в браузере.

2. Перейдите в Visual Studio и установите точку останова в исходном коде, которая может быть файлом JavaScript, файлом TypeScript или JSX-файлом. (Задайте точку останова в строке кода, которая поддерживает установку точек останова, например, в операторе return или объявлении переменной.)

   

   Чтобы найти конкретный код в транспилированном файле, используйте клавиши Ctrl+F (Изменить>Найти и Заменить>Быстрый Поиск).

   Для клиентского кода, чтобы попасть в точку останова в файле TypeScript, .vueили JSХ файле, обычно требуется использовать карты источников. Исходная карта должна быть правильно настроена для поддержки отладки в Visual Studio.

3. Выберите Отладка>Подключить к процессу.

   Tip

   Начиная с Visual Studio 2017, после первого подключения к процессу, выполнив следующие действия, вы можете быстро подключиться к тому же процессу, выбрав Отладка>повторно подключиться к процессу.

4. В диалоговом окне Присоединение к процессу выберите JavaScript и TypeScript (Средства разработки Chrome/V8 Inspector) в качестве типа подключения.

   Целевой объект отладчика, например http://localhost:9222, должен отображаться в поле целевого объекта подключения.

5. В списке экземпляров браузера выберите процесс браузера с правильным портом узла (https://localhost:7184/ в этом примере) и выберите Подключить.

   Порт (например, 7184) также может отображаться в поле Заголовок, чтобы помочь выбрать правильный экземпляр браузера.

   В следующем примере показано, как это выглядит в браузере Microsoft Edge.

   

   Tip

   Если отладчик не подключается и отображается сообщение "Не удалось запустить адаптер отладки" или "Не удается подключиться к процессу". Операция не является законной в текущем состоянии." Используйте диспетчер задач Windows, чтобы закрыть все экземпляры целевого браузера перед запуском браузера в режиме отладки. Расширения браузера могут работать и мешать полному режиму отладки.

6. Возможно, код с точкой останова уже выполнен, обновите страницу браузера. При необходимости выполните действия, чтобы вызвать выполнение кода с точкой останова.

   При приостановке работы отладчика можно проверить состояние приложения, наведите указатель мыши на переменные и используя окна отладчика. Вы можете перейти к отладчику, выполнив пошаговые инструкции по коду (F5, F10и F11). Дополнительные сведения об основных функциях отладки см. в статье Первый взгляд на отладчика.

   Вы можете попасть в точку останова в транспилированный .js файл или исходный файл в зависимости от типа приложения, пройденных вами шагов ранее, и других факторов, таких как состояние браузера. В любом случае можно выполнить пошаговое выполнение кода и проверить переменные.

   • Если вам нужно войти в код в файле TypeScript, JSX или .vue исходном файле и у вас это не получается, убедитесь, что среда настроена правильно, как описано в разделе "Карты источника" документации по VS Code.

   • Если вам нужно проникнуть в код из транспилированного файла JavaScript (например, app-bundle.js) и это не удается сделать, удалите файл карты исходников, filename.js.map.

Отладка JavaScript в динамических файлах с помощью Razor (ASP.NET)

В Visual Studio 2022 можно отлаживать и тестировать страницы Razor с помощью точек останова. Дополнительные сведения см. в разделе Использование средств отладки в Visual Studio.

Связанный контент

Свойства, React, Angular, Vue