Налагодження коду 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 (або обидва) також забирає вихідні карти та додає підтримку для них". - що свідчить про те, що цього ще не сталося.

Оновлення:

З виходом TypeScript 0.8.1 налагодження вихідної карти тепер також доступне у 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.

   Отримання вихідних карт за допомогою компілятора TypeScript за межами Visual Studio не викликає труднощів, у командному рядку tsc add

   --sourcemap %1.ts
   

   ваш скриптовий скрипт зазвичай створює вихідні карти за замовчуванням.

2. Налаштуйте веб-програму у Visual Studio .

   Встановіть Internet Explorer як стартовий браузер. Я працюю лише з IE, і не думаю, що будь-який інший браузер буде працювати.

   У властивостях проекту перейдіть на вкладку «Веб» і налаштуйте розділ «Налагоджувачі» внизу: Вимкніть усі налагоджувачі ! Це інтуїтивно зрозуміле значення, і ви можете побачити таке повідомлення про помилку:

   Ви намагалися запустити налагоджувач, але, виходячи з поточних налаштувань налагодження на сторінці веб-властивостей, процес налагодження не існує. Це відбувається, коли вибрано параметр "Не відкривати сторінку. Чекати запиту від іншого процесу", а налагодження ASP.NET вимкнено. Перевірте свої налаштування на сторінці веб-властивостей і повторіть спробу.

   Як зазначається в повідомленні про помилку, почати дію у верхній частині веб-властивостей має бути інший варіант, наприклад " Поточна сторінка ".

   Встановити точки зупинку в коді ts у Visual Studio зараз чи пізніше.

   Хіт F5

Хоча ви можете використовувати редактор Visual Studio для налагодження та редагування файлів ts, функція "Редагувати та продовжити" не працюватиме, наразі немає браузера, який може перезавантажувати файли js та js.map і продовжувати. (Виправте когось, якщо я помиляюся, і я буду щасливий.)

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

коротка відповідь: Перезапустіть Visual Studio

тло: У мене було 2 екземпляри Visual Studio 2015 з двома різними проектами з TypeScript. Перший запущений екземпляр не налагодив правильно, другий -. Усі налаштування проекту були однаковими. Я нарешті перезапустив перший екземпляр, а потім він налагодив TypeScript (нарешті).