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

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

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

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

   

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

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

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

   

3. Чтобы продолжить выполнение приложения, нажмите клавишу F5.

4. Если вы хотите использовать средства для разработчиков Chrome DevTools, нажмите в браузере Chrome клавишу F12. Эти средства позволяют анализировать модель 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 приложений и других проектов 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-адрес для экземпляра приложения.)

Подключение отладчика к сценарию на стороне клиента

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

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

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

• Обязательно запустите браузер в режиме отладки.

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

Либо, если вам нужно декомпозировать код в исходном файле (например app.tsx), но сделать это не удается, попробуйте использовать оператор debugger; в исходном файле или установите точки останова в инструментах для разработчиков в Chrome (или средства F12 для 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. Например, в файл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)

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

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