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

Статья
06/05/2023

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

Совет

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого. Если вы разрабатываете Node.js приложения, необходимо установить рабочую нагрузку разработки Node.js с помощью Visual Studio.

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

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

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

В заданной точке останова отладчик приостанавливается (интегрированная среда разработки выделяет инструкцию на желтом фоне). Теперь вы можете изучить состояние приложения, наводя указатель мыши на переменные в текущей области и используя окна отладчика, такие как Локальные переменные и Контрольные значения.
Чтобы продолжить выполнение приложения, нажмите клавишу F5.
Если вы хотите использовать средства для разработчиков Chrome DevTools, нажмите в браузере Chrome клавишу F12. Эти средства позволяют анализировать модель DOM или взаимодействовать с приложением через консоль JavaScript.

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

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

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

Дополнительные сведения см. в записи блога отладки JavaScript в Microsoft Edge и этой записи для Google Chrome. Сведения об отладке TypeScript в ASP.NET Core см. в разделе "Добавление TypeScript" в существующее приложение ASP.NET Core.
Для Node.js приложений и других проектов JavaScript выполните описанные здесь действия.

Примечание.

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

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

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

Справку о создании сопоставителей с исходным кодом см. в разделе Создание сопоставлений источника для отладки.

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

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

Закройте все окна целевого браузера.

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

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

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

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

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

Также можно открыть команду Выполнить кнопки Пуск в Windows (щелкнуть правой кнопкой мыши команду Выполнить) и ввести следующую команду:

msedge --remote-debugging-port=9222

или

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

Ваш браузер будет запущен в режиме отладки.

Приложение еще не работает, поэтому страница в браузере будет пустой.

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

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

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

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

Для кода на стороне клиента, чтобы использовать точку останова в файле TypeScript, .vueили JSX, как правило, необходимы сопоставители с исходным кодом. Сопоставитель с исходным кодом следует правильно настроить, чтобы он поддерживал отладку в Visual Studio.
Выберите ваш целевой браузер в качестве целевого объекта отладки в Visual Studio, нажмите клавиши CTRL+F5 (Отладка>Запуск без отладки), чтобы запустить приложение в браузере.

Если вы создали конфигурацию браузера с понятным именем, выберите ее в качестве цели отладки. Приложение откроется в новой вкладке браузера.
Выберите Отладка>Присоединение к процессу.

Совет

Начиная с версии Visual Studio 2017, после первого подключения процесса согласно этим инструкциям вы можете быстро присоединять его повторно, выбирая Отладка>Повторно подключиться к процессу.
В диалоговом окне Подключение к процессу получите отфильтрованный список экземпляров браузера, к которым можно подключиться. Выберите подходящий отладчик для целевого браузера, JavaScript (Chrome) или JavaScript (Microsoft Edge — Chromium), в поле Подключить к, а затем введите chrome или edge в поле фильтра, чтобы отфильтровать результаты поиска.
Выберите процесс браузера с правильным портом узла (localhost в этом примере) и нажмите кнопку "Подключить".

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

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

Совет

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

Когда отладчик приостановит выполнение, вы можете изучить состояние приложения, наводя указатель мыши на переменные и используя окна отладчика. Вы также можете выполнять пошаговую отладку кода (клавиши 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 для 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: '[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.

Настройка сопоставителей с исходным кодом с помощью параметров проекта (TypeScript project)

Также вы можете настроить параметры сопоставления источника в свойствах проекта, щелкнув проект правой кнопкой мыши и выбрав Проект > Свойства > Сборка TypeScript > Отладка.

Здесь доступны следующие параметры проекта.

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

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

Начиная с Visual Studio 2019, Visual Studio обеспечивает отладку только для Chrome и Microsoft Edge (Chromium).

Однако невозможно автоматически использовать точки останова в файлах, созданных с синтаксисом Razor (cshtml, vbhtml). Для отладки файлов такого типа вы можете применить два следующих подхода.

Поместите инструкцию debugger; там, где необходимо прерывание: эта инструкция останавливает выполнение динамического скрипта и запускает отладку сразу же в процессе его создания.
Загрузите страницу и откройте динамический документ в Visual Studio: необходимо открыть динамический файл во время отладки, задать точку останова и обновить страницу для работы этого метода. В зависимости от используемого браузера (Chrome или Microsoft Edge (Chromium)) этот файл можно найти следующими способами:
- Для Chrome откройте пункты меню Обозреватель решений > Документы скриптов > Имя_нужной_страницы.
  
  Примечание.
  
  Если вы используете Chrome, может появиться сообщение о том, что исходный код между тегами <script> недоступен. Это нормально, просто продолжайте отладку.
- Для Microsoft Edge (Chromium) используйте ту же процедуру, что и для Chrome.

Дополнительные сведения см. в руководстве по отладке проектов ASP.NET в браузере Google Chrome на стороне клиента.

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

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

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

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

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

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

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

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

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

Настройка сопоставлений источника с помощью файла tsconfig.json

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

Настройка сопоставителей с исходным кодом с помощью параметров проекта (TypeScript project)

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

Обратная связь

Обратная связь

Дополнительные ресурсы

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

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

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

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

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

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

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

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

Настройка сопоставлений источника с помощью файла tsconfig.json

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

Настройка сопоставителей с исходным кодом с помощью параметров проекта (TypeScript project)

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

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

Обратная связь

Обратная связь

Дополнительные ресурсы