Отладка кода TypeScript с помощью Visual Studio

Есть ли способ отлаживать исходный код TypeScript в Visual Studio (вместо отладки сгенерированного javascript)?

Из спецификаций языка TypeScript:

TypeScript дополнительно предоставляет исходные карты, позволяя отладку на уровне исходного кода.

Поэтому я ожидал, что смогу разместить точки останова в ts-коде и отладить его, но это не сработало. Других упоминаний об отладке в спецификациях я не нашел. Что я должен сделать, чтобы это сработало? Возможно, слово «необязательно» намекает, что мне нужно что-то сделать, чтобы он работал ... Есть предложения?

Текущий ответ для VS2017 и новее

Отладка Typescript непосредственно в Visual Studio стала возможной с VS2017. Из документации :

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

Есть также дополнительные ресурсы по отладке TypeScript / Asp.NET Core в Visual Studio .

Также можно отладить машинописный текст в Visual Studio Code :

Visual Studio Code поддерживает отладку TypeScript через встроенный отладчик Node.js, а также через расширения, такие как Debugger for Chrome, для поддержки отладки TypeScript на стороне клиента.

Исходный ответ для предыдущих версий VS:

Возможно, вы не сможете отлаживать в VS, но можете в некоторых браузерах. Аарон Пауэлл только что написал в блоге о том, как работают точки останова в Chrome Canary: https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/ .

Подводя итог (очень кратко) тому, что говорит Аарон, вы используете -sourcemapпереключатель на компиляторе для создания *.js.mapфайла в том же каталоге, что и ваш исходный код. В браузерах, которые поддерживают исходные карты (Chrome Canary и предположительно последние сборки Firefox, поскольку они являются идеей Mozilla), вы можете отлаживать .tsисходный код так же, как и обычные .jsфайлы.

Блог завершается словами: «Надеюсь, команда Visual Studio или IE (или и то и другое) также выберет Source Maps и добавит для них поддержку». - что говорит о том, что этого еще не произошло.

Обновить:

С выпуском TypeScript 0.8.1 отладка Source Map теперь также доступна в Visual Studio:

https://blogs.msdn.com/b/typescript/archive/2012/11/15/announcing-typescript-0-8-1.aspx

Из объявления:

Отладка TypeScript теперь поддерживает отладку на уровне исходного кода! Формат исходной карты набирает популярность как способ отладки языков, которые переводятся на JavaScript, и поддерживается множеством браузеров и инструментов. В версии 0.8.1 компилятор TypeScript официально поддерживает исходные карты. Кроме того, новая версия TypeScript для Visual Studio 2012 поддерживает отладку с использованием формата исходной карты. Теперь из командной строки мы полностью поддерживаем использование флага --sourcemap, который выводит файл исходной карты, соответствующий выводу JavaScript. Этот файл позволит напрямую отлаживать исходный источник TypeScript в браузерах с поддержкой исходной карты и Visual Studio. Чтобы включить отладку в Visual Studio, выберите «Отладка» в раскрывающемся списке после создания приложения HTML с проектом TypeScript.

Обновление :

WebStorm также добавил поддержку отладки через SourceMaps: http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui- и многое другое/

Во-первых, WebStorm обеспечивает более интеллектуальную и оптимизированную веб-разработку с использованием современных языков, таких как TypeScript, CoffeeScript и Dart. Помимо первоклассного редактора кода для этих языков, WebStorm 6 предлагает:

Автоматическая компиляция / транспиляция этих языков более высокого уровня в те, которые распознаются браузерами на всех поддерживаемых платформах. Полнофункциональная отладка TypeScript, Dart или CoffeeScript с исходными картами.

С приложением VS2013 Typescript мне не пришлось ничего менять в web.config. Я поместил точку останова в файл ts и отладил в IE, и, прежде всего, точка останова остановилась внутри TypeScript.

Теперь это исправлено в VS 2017, поэтому вы можете отлаживать непосредственно в Visual Studio и машинописном тексте.

Просто установите точку останова в файле * .ts, и он будет достигнут.

И он будет отлаживать в VS, а не в IE, как если бы вы отлаживали C #.

Отладка машинописного текста с помощью Visual Studio работает с правильными настройками. (В предыдущих версиях VS я иногда сталкивался с проблемами, ниже показано, как он отлично работает с VS 2015 CTP 6)

1. Сначала убедитесь, что вы создаете исходные карты при компиляции машинописного текста в javascript. Поэтому у вас должен быть файл xxx.js.map рядом с каждым xxx.js.

   Получение исходных карт путем запуска компилятора машинописного текста вне Visual Studio не вызывает никаких затруднений, в командной строке tsc добавьте

   --sourcemap %1.ts
   

   ваш скрипт gulp обычно по умолчанию создает исходные карты.

2. Настройте свое веб-приложение в Visual Studio .

   Установите Internet Explorer в качестве начального браузера. У меня он работает только с IE и не думаю, что какой-либо другой браузер будет работать.

   В свойствах проекта перейдите на вкладку «Интернет» и настройте раздел «Отладчики» внизу: Отключите все отладчики ! Это противоречит интуиции, и вы можете увидеть это сообщение об ошибке:

   Вы попытались запустить отладчик, но, исходя из текущих настроек отладки на странице веб-свойств, процесс для отладки отсутствует. Это происходит, когда выбран параметр «Не открывать страницу. Дождаться запроса от другого процесса», а отладка ASP.NET отключена. Проверьте свои настройки на странице веб-свойств и повторите попытку.

   Как говорится в сообщении об ошибке, действие «Пуск» в верхней части веб-свойств должно быть другим параметром, например « Текущая страница ».

   Установите точки останова в коде TS внутри Visual Studio сейчас или позже.

   Нажмите F5

Хотя вы можете использовать редактор Visual Studio для отладки и редактирования файлов ts, «Изменить и продолжить» не будет работать, в настоящее время нет браузера, который может перезагружать файлы js и js.map и продолжать. (Поправьте меня, если я ошибаюсь, и я буду счастлив.)

Отладка TypeScript у меня вообще не работала с VS2013 Update 3 ни на одной из моих машин. После большого разочарования я решил попробовать обновиться до VS2013 Update 4 CTP. Наконец-то в VS достигаются точки останова!

короткий ответ: перезапустите Visual Studio

предыстория: у меня было 2 экземпляра Visual Studio 2015 с двумя разными проектами с TypeScript. Первый запущенный экземпляр не отладил правильно, второй -. Все настройки проекта были такими же. Я наконец перезапустил первый экземпляр, а затем он (наконец) отладил TypeScript.