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

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

Совет

Если вы еще не установили 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 и IE).

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

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

• Для приложений Node.js и других проектов на Яваскрипте следуйте шагам, описанным в этой статье.

Заметка

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

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

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

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

Подготовка браузера к отладке

Для этого сценария используйте 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

   или

   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. Выберите Отладка>Подключить к процессу.

   Совет

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

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

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

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

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

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

   

   Совет

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

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

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

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

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

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

Устранение неполадок с точками останова и исходными картами

Если необходимо разбить код в исходном файле TypeScript или JSX и не удается сделать это, используйте присоединения к процессу, как описано в предыдущем разделе, чтобы подключить отладчик. Убедитесь, что среда настроена правильно:

• Закройте все экземпляры браузера, включая расширения Chrome (с помощью диспетчера задач), чтобы запустить браузер в режиме отладки.

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

• Убедитесь, что исходный файл карты содержит правильный относительный путь к исходному файлу и что он не включает неподдерживаемые префиксы, такие как webpack:///, что предотвращает поиск исходного файла отладчиком Visual Studio. Например, ссылка webpack:///.app.tsx может быть исправлена на ./app.tsx. Это можно сделать вручную в файле карты источника (полезно для тестирования) или с помощью настраиваемой конфигурации сборки. Дополнительные сведения см. в статье Создание исходных карт для отладки.

Кроме того, если вам нужно разбить код в исходном файле (например, app.tsx) и не удается сделать это, попробуйте использовать инструкцию debugger; в исходном файле или задать точки останова в средствах разработчика Chrome (или F12 Tools для Microsoft Edge).

Создание исходных карт для отладки

Visual Studio имеет возможность использовать и создавать исходные карты в исходных файлах JavaScript. Это часто требуется, если ваш исходный код минифицирован или создан с помощью транспилера, например, TypeScript или Babel. Доступные параметры зависят от типа проекта.

• Проект TypeScript в Visual Studio создает исходные карты по умолчанию. Дополнительные сведения см. в разделе о настройке карт источников с помощью файла tsconfig.json.

• В проекте JavaScript можно создать исходные карты с помощью пакета, например webpack и компилятора, например компилятора TypeScript (или Babel), который можно добавить в проект. Для компилятора TypeScript необходимо также добавить файл tsconfig.json и задать параметр компилятора sourceMap. Пример, показывающий, как это сделать с помощью базовой конфигурации webpack, см. в статье Создание приложения Node.js с помощью React.

Заметка

Если вы не знакомы с исходными картами, прочитайте Что такое исходные карты? перед продолжением.

Чтобы настроить дополнительные параметры для исходных карт, используйте tsconfig.json или параметры проекта в проекте TypeScript, но не оба.

Чтобы включить отладку с помощью Visual Studio, необходимо убедиться, что ссылки на исходный файл в созданной исходной карте правильны (это может потребовать тестирования). Например, если вы используете webpack, ссылки в исходном файле карты включают префикс webpack:///, который не позволяет Visual Studio найти исходный файл TypeScript или JSX. В частности, при исправлении этого для целей отладки ссылка на исходный файл (например, изменить с app.tsx) должна быть изменена с webpack:///./app.tsx на что-то вроде ./app.tsx, что позволяет проводить отладку (путь относительно вашего исходного файла). В следующем примере показано, как настроить карты источников в webpack, который является одним из наиболее распространенных пакетов, чтобы они работали с Visual Studio.

(только webpack) Если вы устанавливаете точку останова в файле TypeScript JSX (а не транспилированного файла JavaScript), необходимо обновить конфигурацию веб-пакета. Например, в webpack-config.jsможет потребоваться заменить следующий код:

  output: {
    filename: "./app-bundle.js", // This is an example of the filename in your project
  },

с помощью этого кода:

  output: {
    filename: "./app-bundle.js", // Replace with the filename in your project
    devtoolModuleFilenameTemplate: '[absolute-resource-path]'  // Removes the webpack:/// prefix
  },

Это параметр только для разработки, позволяющий выполнять отладку клиентского кода в Visual Studio.

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

Настройка исходных карт с помощью файла tsconfig.json

При добавлении файла tsconfig.json в проект Visual Studio обрабатывает корневой каталог как проект TypeScript. Чтобы добавить файл, щелкните проект правой кнопкой мыши в обозревателе решений, а затем выберите Добавить > Новый элемент > Файл конфигурации JSON TypeScript. Файл tsconfig.json, как показано ниже, добавляется в проект.

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

Параметры компилятора для файла tsconfig.json

• inlineSourceMap: выведите один файл с исходными картами вместо создания отдельной карты источника для каждого исходного файла.
• inlineSources: выведите источник вместе с исходными картами в одном файле; Требуется inlineSourceMap или sourceMap.
• mapRoot: указывает расположение, в котором отладчик должен найти файлы исходной карты (.map) вместо расположения по умолчанию. Используйте этот флаг, если файлы во время выполнения .map должны находиться в другом расположении, отличном от .js файлов. Указанное местоположение встроено в исходную карту, чтобы перенаправить отладчик к местоположению файлов .map.
• sourceMap: создает соответствующий файл .map.
• sourceRoot: указывает расположение, в котором отладчик должен находить файлы TypeScript вместо исходных расположений. Используйте этот флаг, если исходные файлы времени выполнения должны размещаться в другом местоположении, отличном от местоположения во время разработки. Указанное расположение внедрено в исходную карту, чтобы направить отладчик в расположение исходных файлов.

Дополнительные сведения о параметрах компилятора см. на странице параметры компилятора в справочнике TypeScript.

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

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

Связанное содержимое

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