Debugowanie kodu TypeScript w programie Visual Studio

Czy istnieje sposób debugowania źródła TypeScript w programie Visual Studio (zamiast debugowania wygenerowanego kodu JavaScript)?

Ze specyfikacji języka TypeScript:

TypeScript opcjonalnie udostępnia mapy źródeł, umożliwiając debugowanie na poziomie źródła.

Dlatego spodziewałem się, że będę w stanie umieścić punkty przerwania w kodzie ts i móc go debugować, ale to nie działa. Nie znalazłem żadnych innych wzmianek o debugowaniu w specyfikacji. Czy jest coś, co powinienem zrobić, aby to zadziałało? Być może słowo „opcjonalnie” podpowiada, że ​​muszę coś zrobić, żeby zadziałało ... Jakieś sugestie?

Aktualna odpowiedź na VS2017 i nowsze

Debugowanie Typescript bezpośrednio w programie Visual Studio jest możliwe od VS2017. Z dokumentacji :

Możesz debugować kod JavaScript i TypeScript przy użyciu programu Visual Studio. Możesz ustawiać i trafiać punkty przerwania, dołączać debuger, sprawdzać zmienne, wyświetlać stos wywołań i używać innych funkcji debugowania.

Istnieją również dodatkowe zasoby dotyczące debugowania Typescript / Asp.NET Core w programie Visual Studio .

Istnieje również możliwość debugowania skryptu w Visual Studio Code :

Visual Studio Code obsługuje debugowanie TypeScript za pomocą wbudowanego debugera Node.js, a także poprzez rozszerzenia, takie jak Debugger for Chrome, aby obsługiwać debugowanie TypeScript po stronie klienta.

Oryginalna odpowiedź na wcześniejsze wersje VS:

Możesz nie być w stanie debugować w VS, ale możesz to zrobić w niektórych przeglądarkach. Aaron Powell napisał na blogu o pobieraniu punktów przerwania działających w Chrome Canary właśnie dzisiaj: https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/ .

Podsumowując (bardzo krótko) to, co mówi Aaron, użyj -sourcemapprzełącznika na kompilatorze, aby wygenerować *.js.mapplik w tym samym katalogu, co źródło. W przeglądarkach obsługujących mapy źródeł (Chrome Canary i przypuszczalnie najnowsze wersje Firefoksa, ponieważ są one pomysłem Mozilli), możesz debugować .tsźródło tak, jak zwykłe .jspliki.

Blog kończy się słowami: „Mam nadzieję, że zespół Visual Studio lub IE (lub oba) również zbierze mapy źródłowe i doda do nich obsługę”. - co sugeruje, że to się jeszcze nie wydarzyło.

Aktualizacja:

Wraz z wydaniem TypeScript 0.8.1 debugowanie mapy źródłowej jest teraz również dostępne w programie Visual Studio:

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

Z ogłoszenia:

Debugowanie TypeScript obsługuje teraz debugowanie na poziomie źródła! Format mapy źródłowej zyskuje na popularności jako sposób debugowania języków, który tłumaczy się na JavaScript i jest obsługiwany przez różne przeglądarki i narzędzia. W wersji 0.8.1 kompilator TypeScript oficjalnie obsługuje mapy źródeł. Ponadto nowa wersja języka TypeScript for Visual Studio 2012 obsługuje debugowanie przy użyciu formatu mapy źródłowej. W wierszu poleceń w pełni obsługujemy teraz użycie flagi --sourcemap, która wyświetla źródłowy plik mapy odpowiadający wynikowi JavaScript. Ten plik umożliwi bezpośrednie debugowanie oryginalnego źródła TypeScript w przeglądarkach obsługujących mapy źródłowe i programie Visual Studio. Aby włączyć debugowanie w programie Visual Studio, wybierz opcję „Debuguj” z listy rozwijanej po utworzeniu aplikacji HTML z projektem TypeScript.

Aktualizacja :

WebStorm dodał również obsługę debugowania przez SourceMaps: http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui- i wiele więcej/

Po pierwsze, WebStorm umożliwia inteligentniejsze i bardziej usprawnione tworzenie stron internetowych przy użyciu nowoczesnych języków, takich jak TypeScript, CoffeeScript i Dart. Oprócz dostarczania pierwszorzędnego edytora kodu dla tych języków, WebStorm 6 oferuje:

Automatyczna kompilacja / transpilacja tych języków wyższego poziomu na języki rozpoznawane przez przeglądarki na wszystkich obsługiwanych platformach. W pełni funkcjonalne debugowanie TypeScript, Dart lub CoffeeScript z mapami źródłowymi.

Dzięki aplikacji VS2013 Typescript nie musiałem nic zmieniać w pliku web.config. Umieściłem punkt przerwania w pliku ts i zdebugowałem w IE, a presto, punkt przerwania zatrzymał się w TypeScript.

Zostało to naprawione w programie VS 2017, dzięki czemu można debugować bezpośrednio w programie Visual Studio i w skrypcie.

Po prostu ustaw punkt przerwania w swoim pliku * .ts, a zostanie on uderzony.

I będzie debugować w VS, a nie IE, tak jakbyś debugował c #.

Debugowanie skryptu w programie Visual Studio działa z odpowiednimi ustawieniami. (W poprzednich wersjach VS czasami napotykam problemy, poniżej opisano, jak to działa dobrze z VS 2015 CTP 6)

1. Najpierw upewnij się, że tworzysz mapy źródłowe podczas kompilowania maszynopisu do javascript. Więc powinieneś mieć plik xxx.js.map w pobliżu każdego xxx.js.

   Pobieranie map źródłowych przez uruchomienie kompilatora skryptu poza programem Visual Studio nie powoduje żadnych trudności w dodaniu wiersza polecenia tsc

   --sourcemap %1.ts
   

   Twój skrypt gulp zazwyczaj domyślnie tworzy mapy źródeł.

2. Skonfiguruj aplikację internetową w programie Visual Studio .

   Ustaw Internet Explorer jako przeglądarkę startową. Mam to działa tylko z IE i nie sądzę, żeby jakakolwiek inna przeglądarka działała.

   We właściwościach projektu przejdź do zakładki „Sieć” i skonfiguruj sekcję „Debugery” na dole: Wyłącz wszystkie debugery ! To jest sprzeczne z zasadami i możesz zobaczyć ten komunikat o błędzie:

   Podjęto próbę uruchomienia debugera, ale w oparciu o bieżące ustawienia debugowania na stronie właściwości sieci Web nie ma żadnego procesu do debugowania. Dzieje się tak, gdy jest zaznaczona opcja „Nie otwieraj strony. Czekaj na żądanie z innego procesu”, a debugowanie ASP.NET jest wyłączone. Sprawdź ustawienia na stronie właściwości internetowych i spróbuj ponownie.

   Jak mówi komunikat o błędzie, akcja Rozpocznij u góry właściwości sieci Web powinna być inną opcją, na przykład „ Bieżąca strona ”.

   Ustaw punkty przerwania w kodzie TS w programie Visual Studio teraz lub później.

   Hit F5

Chociaż można używać edytora Visual Studio do debugowania i edytowania plików ts, opcja „Edytuj i kontynuuj” nie będzie działać, ale obecnie nie ma przeglądarki, która może ponownie załadować pliki js i js.map i kontynuować. (Popraw mnie, jeśli się mylę, a będę szczęśliwy.)

Debugowanie TypeScript w ogóle nie działało z VS2013 Update 3 na żadnym z moich komputerów. Po wielu frustracjach postanowiłem spróbować zaktualizować do VS2013 Update 4 CTP. Wreszcie w VS osiągane są punkty przerwania!

krótka odpowiedź: uruchom ponownie program Visual Studio

tło: miałem 2 instancje Visual Studio 2015 z dwoma różnymi projektami z TypeScript. Pierwsza uruchomiona instancja nie została poprawnie debugowana, druga tak. Wszystkie ustawienia projektu były takie same. W końcu zrestartowałem pierwszą instancję, a następnie zdebugowałem TypeScript (w końcu).