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

Question 1

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

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

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

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

Question 2

Текущий ответ для 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 с исходными картами.

Question 3

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

Question 4

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

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

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

Question 5

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

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

Получение исходных карт путем запуска компилятора машинописного текста вне Visual Studio не вызывает никаких затруднений, в командной строке tsc добавьте
```
--sourcemap %1.ts
```
ваш скрипт gulp обычно по умолчанию создает исходные карты.
Настройте свое веб-приложение в Visual Studio .

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

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

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

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

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

Нажмите F5

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

Question 6

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

Question 7

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

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

Answer 1

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

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

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

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

Answer 2

1

Вы также можете ознакомиться с документацией

Peopleware

Answer 3

Текущий ответ для 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 с исходными картами.

Answer 4

4

Действительно ли требуется Chrome Canary? Я использую стабильную версию Chrome, и я вижу, что "включить исходные карты" - это опция в окне настроек инструментов разработчика.

Иуда Габриэль Химанго

Answer 5

1

Я думаю, когда Аарон писал блог (и когда я опубликовал этот ответ), Canary была необходима. К настоящему времени эта функция должна была пройти до выпуска.

Джуд Фишер

Answer 6

4

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

kossmoboleat

Answer 7

Я не могу заставить VS 2012 отлаживать TS

Никос

Answer 8

Работал для меня, создавая исходные карты с помощью "Web Extensions"

Adaptabi

Answer 9

15

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

СмелыйНовый
источник

Я согласен. Я использую VS 2013 Update 2.

Nash

2

Спасибо, что указали на IE. К сожалению, в Chrome не работает отладка.

Иван Кочуркин

4

Я предполагаю, что Microsoft использует некоторые ловушки, например, чтобы заставить работать процесс отладки, который другие браузеры еще не поддерживают. Существует промежуточный файл сопоставления кода, который похож на контракт между сгенерированным javascript в браузере и исходным кодом в IDE. Я просто рад, что это вообще работает.

BraveNewMath

Answer 10

Я согласен. Я использую VS 2013 Update 2.

Nash

Answer 11

2

Спасибо, что указали на IE. К сожалению, в Chrome не работает отладка.

Иван Кочуркин

Answer 12

4

Я предполагаю, что Microsoft использует некоторые ловушки, например, чтобы заставить работать процесс отладки, который другие браузеры еще не поддерживают. Существует промежуточный файл сопоставления кода, который похож на контракт между сгенерированным javascript в браузере и исходным кодом в IDE. Я просто рад, что это вообще работает.

BraveNewMath

Answer 13

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

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

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

Answer 14

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

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

Получение исходных карт путем запуска компилятора машинописного текста вне Visual Studio не вызывает никаких затруднений, в командной строке tsc добавьте
```
--sourcemap %1.ts
```
ваш скрипт gulp обычно по умолчанию создает исходные карты.
Настройте свое веб-приложение в Visual Studio .

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

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

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

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

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

Нажмите F5

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

Answer 15

какие-либо изменения в вашей настройке с апреля?

jth41

Answer 16

Вы нашли эту рецензию полезной?

citykid

Answer 17

2

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

user1599328
источник

спасибо за обновление 4 ctp, установка. на моей машине установлено обновление 3, и работает отладка машинописного текста. однако запуск, т.е. занимает много времени, в частности, поскольку каждый раз, когда веб-приложение компилируется (хотя я изменил только код ts)

citykid

Answer 18

спасибо за обновление 4 ctp, установка. на моей машине установлено обновление 3, и работает отладка машинописного текста. однако запуск, т.е. занимает много времени, в частности, поскольку каждый раз, когда веб-приложение компилируется (хотя я изменил только код ts)

citykid

Answer 19

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

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

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

Ответы: