Debuggen von TypeScript-Code mit Visual Studio

Gibt es eine Möglichkeit, die TypeScript-Quelle in Visual Studio zu debuggen (anstatt das generierte Javascript zu debuggen)?

Aus den TypeScript-Sprachspezifikationen:

TypeScript bietet optional Quellzuordnungen, die das Debuggen auf Quellenebene ermöglichen.

Ich hatte daher erwartet, Haltepunkte in ts-Code setzen und debuggen zu können, aber es funktioniert nicht. Ich habe keine anderen Erwähnungen zum Debuggen in den Spezifikationen gefunden. Gibt es etwas, was ich tun sollte, damit dies funktioniert? Vielleicht deutet das Wort "optional" darauf hin, dass ich etwas tun muss, damit es funktioniert ... Irgendwelche Vorschläge?

Aktuelle Antwort für VS2017 und höher

Das Debuggen von Typescript direkt in Visual Studio ist seit VS2017 möglich. Aus der Dokumentation :

Sie können JavaScript- und TypeScript-Code mit Visual Studio debuggen. Sie können Haltepunkte setzen und erreichen, den Debugger anhängen, Variablen überprüfen, den Aufrufstapel anzeigen und andere Debugging-Funktionen verwenden.

Es gibt auch zusätzliche Ressourcen zum Debuggen von Typescript / Asp.NET Core in Visual Studio .

Es ist auch möglich, Typoskript in Visual Studio Code zu debuggen :

Visual Studio Code unterstützt das TypeScript-Debugging über den integrierten Node.js-Debugger sowie über Erweiterungen wie Debugger for Chrome, um das clientseitige TypeScript-Debugging zu unterstützen.

Ursprüngliche Antwort für frühere Versionen von VS:

Möglicherweise können Sie in VS nicht debuggen, in einigen Browsern jedoch. Aaron Powell hat gerade heute über das Funktionieren von Haltepunkten in Chrome Canary gebloggt: https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/ .

Um (sehr kurz) zusammenzufassen, was Aaron sagt, verwenden Sie den -sourcemapSchalter am Compiler, um eine *.js.mapDatei im selben Verzeichnis wie Ihre Quelle zu generieren . In Browser , die Unterstützung Quelle Karten (Chrome Canary und vermutlich letzten Firefox baut, da sie eine Mozilla Idee sind), können Sie dann debuggen Ihre .tsQuelle nur wie normale .jsDateien.

Der Blog endet mit "Hoffentlich greifen entweder das Visual Studio- oder das IE-Team (oder beide) auch Quellkarten zu und fügen Unterstützung für sie hinzu." - was darauf hindeutet, dass es noch nicht passiert ist.

Aktualisieren:

Mit der Veröffentlichung von TypeScript 0.8.1 ist das Debuggen von Quellkarten jetzt auch in Visual Studio verfügbar:

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

Aus der Ankündigung:

Debuggen TypeScript unterstützt jetzt das Debuggen auf Quellenebene! Das Quellkartenformat hat als Methode zum Debuggen von Sprachen, die in JavaScript übersetzt werden, an Beliebtheit gewonnen und wird von einer Vielzahl von Browsern und Tools unterstützt. Mit Version 0.8.1 unterstützt der TypeScript-Compiler offiziell Quellkarten. Darüber hinaus unterstützt die neue Version von TypeScript für Visual Studio 2012 das Debuggen im Quellzuordnungsformat. Über die Befehlszeile unterstützen wir jetzt die Verwendung des Flags --sourcemap, das eine Quellzuordnungsdatei ausgibt, die der JavaScript-Ausgabe entspricht. Mit dieser Datei können Sie die ursprüngliche TypeScript-Quelle in Browsern mit aktivierter Quellkarte und in Visual Studio direkt debuggen. Um das Debuggen in Visual Studio zu aktivieren, wählen Sie "Debuggen" aus der Dropdown-Liste, nachdem Sie eine HTML-Anwendung mit TypeScript-Projekt erstellt haben.

Update :

WebStorm hat auch Unterstützung für das Debuggen über SourceMaps hinzugefügt: http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui- und vieles mehr/

Erstens ermöglicht WebStorm eine intelligentere und effizientere Webentwicklung mit modernen Sprachen wie TypeScript, CoffeeScript und Dart. WebStorm 6 bietet nicht nur einen erstklassigen Code-Editor für diese Sprachen, sondern auch:

Automatische Kompilierung / Transpilation dieser höheren Sprachen in die von Browsern auf allen unterstützten Plattformen erkannten Sprachen. Voll funktionsfähiges Debuggen von TypeScript, Dart oder CoffeeScript mit Quellkarten.

Mit der VS2013 Typescript-Anwendung musste ich nichts in web.config ändern. Ich habe einen Haltepunkt in die ts-Datei eingefügt und im IE debuggt. Presto, der Haltepunkt wurde in TypeScript gestoppt.

Dies ist jetzt in VS 2017 behoben, sodass Sie direkt in Visual Studio und Typoskript debuggen können.

Setzen Sie einfach Ihren Haltepunkt in Ihre * .ts-Datei, und es wird getroffen.

Und es wird in VS debuggen, nicht in IE, als ob Sie c # debuggen würden.

Das Debuggen von Typoskript mit Visual Studio funktioniert mit den richtigen Einstellungen. (In früheren Versionen von VS habe ich manchmal Probleme. Im Folgenden wird beschrieben, wie es mit VS 2015 CTP 6 funktioniert.)

1. Zuerst stellen Sie sicher, dass Sie Quellzuordnungen erstellen, wenn Sie Typoskript in Javascript kompilieren. Sie sollten also eine xxx.js.map-Datei in der Nähe jeder xxx.js haben.

   Das Abrufen von Quellzuordnungen durch Ausführen des Typoskript-Compilers außerhalb von Visual Studio verursacht keine Probleme, wenn Sie in der tsc-Befehlszeile hinzufügen

   --sourcemap %1.ts

   Ihr gulp-Skript erstellt normalerweise standardmäßig Quellkarten.

2. Konfigurieren Sie Ihre Webanwendung in Visual Studio .

   Stellen Sie Internet Explorer als Startbrowser ein. Ich habe es nur mit IE zum Laufen gebracht und glaube nicht, dass irgendein anderer Browser funktionieren wird.

   Gehen Sie in den Projekteigenschaften zur Registerkarte "Web" und konfigurieren Sie den Abschnitt "Debugger" unten: Deaktivieren Sie alle Debugger ! Dies ist nicht intuitiv und möglicherweise wird folgende Fehlermeldung angezeigt:

   Sie haben versucht, den Debugger zu starten, aber basierend auf Ihren aktuellen Debug-Einstellungen auf der Seite mit den Web-Eigenschaften gibt es keinen Prozess zum Debuggen. Dies tritt auf, wenn die Option "Keine Seite öffnen. Auf eine Anforderung von einem anderen Prozess warten" ausgewählt ist und das ASP.NET-Debugging deaktiviert ist. Bitte überprüfen Sie Ihre Einstellungen auf der Seite mit den Web-Eigenschaften und versuchen Sie es erneut.

   Wie in der Fehlermeldung angegeben, sollte die Startaktion oben in den Web-Eigenschaften eine weitere Option sein, z. B. " Aktuelle Seite ".

   Setzen Sie jetzt oder später in Visual Studio Haltepunkte in Ihrem ts-Code.

   Drücken Sie F5

Während Sie den Visual Studio-Editor zum Debuggen und Bearbeiten von ts-Dateien verwenden können, funktioniert "Bearbeiten und Fortfahren" nicht. Derzeit gibt es jedoch keinen Browser, der js- und js.map-Dateien neu laden und fortfahren kann. (Korrigieren Sie mich, wenn ich falsch liege und ich glücklich sein werde.)

Das TypeScript-Debugging funktionierte mit VS2013 Update 3 auf keinem meiner Computer. Nach langem Frust entschied ich mich für ein Update auf VS2013 Update 4 CTP. Endlich werden Haltepunkte in VS erreicht!

kurze Antwort: Starten Sie Visual Studio neu

Hintergrund: Ich hatte 2 Visual Studio 2015-Instanzen mit zwei verschiedenen Projekten mit TypeScript. Die erste gestartete Instanz hat nicht richtig debuggt, die zweite. Alle Projekteinstellungen waren gleich. Ich habe endlich die erste Instanz neu gestartet und dann TypeScript (endlich) debuggt.