Débogage du code TypeScript avec Visual Studio

Question

Existe-t-il un moyen de déboguer les sources TypeScript dans Visual Studio (au lieu de déboguer le javascript généré) ?

Extrait des spécifications du langage TypeScript :

TypeScript fournit facultativement des cartes de source, permettant le débogage au niveau de la source.

Je m'attendais donc à pouvoir placer des points d'arrêt dans son code et à pouvoir le déboguer, mais cela ne fonctionne pas. Je n'ai pas trouvé d'autres mentions de débogage dans les spécifications. Y a-t-il quelque chose que je devrais faire pour que cela fonctionne ? Peut-être que le mot "optionnel" indique que je dois faire quelque chose pour que cela fonctionne... Des suggestions ?

Answer 1

Réponse actuelle pour VS2017 et les versions ultérieures

Le débogage de Typescript directement dans Visual Studio est possible depuis VS2017. Depuis le documentation :

Vous pouvez déboguer le code JavaScript et TypeScript à l'aide de Visual Studio. Vous pouvez définir et activer des points d'arrêt, attacher le débogueur, inspecter les variables, afficher la pile d'appels et utiliser d'autres fonctions de débogage.

Il existe également des ressources supplémentaires sur Débogage de Typescript / Asp.NET Core dans Visual Studio .

Il est également possible de déboguer le script de type en Code Visual Studio :

Visual Studio Code prend en charge le débogage TypeScript par le biais de son débogueur Node.js intégré, ainsi que par le biais d'extensions telles que Debugger for Chrome, qui prend en charge le débogage TypeScript côté client.

Réponse originale pour les versions antérieures de VS :

Vous ne pouvez peut-être pas déboguer dans VS, mais vous pouvez le faire dans certains navigateurs. Aaron Powell a publié un blog sur le fonctionnement des points d'arrêt dans Chrome Canary aujourd'hui même : https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/ .

Pour résumer (très brièvement) ce que dit Aaron, vous utilisez l'option -sourcemap sur le compilateur pour générer un *.js.map dans le même répertoire que votre source. Dans les navigateurs qui supportent cartes sources (Chrome Canary, et probablement les versions récentes de Firefox, puisqu'il s'agit d'une idée de Mozilla), vous pouvez alors déboguer votre .ts comme vous le feriez normalement .js des fichiers.

Le blog se termine par "On espère que l'équipe de Visual Studio ou d'IE (ou les deux) reprendra également les Source Maps et ajoutera leur prise en charge". - ce qui suggère que ce n'est pas encore arrivé.

Mise à jour :

Avec la sortie de TypeScript 0.8.1, le débogage de Source Map est désormais également disponible dans Visual Studio :

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

De l'annonce :

Débogage TypeScript prend désormais en charge le débogage au niveau de la source ! Le format source map gagne en popularité comme moyen de déboguer les langages qui sont traduits en JavaScript. qui sont traduits en JavaScript et est pris en charge par une variété de navigateurs et de outils. Avec la version 0.8.1, le compilateur TypeScript prend officiellement en charge les cartes sources. officiellement les cartes sources. De plus, la nouvelle version de TypeScript pour Visual Studio 2012 prend en charge le débogage à l'aide du format source map. Depuis la ligne de commande, nous prenons désormais en charge l'utilisation de l'indicateur --sourcemap, qui produit un fichier source map correspondant à la sortie JavaScript. Ce fichier permettra de déboguer directement la source originale TypeScript dans les navigateurs compatibles avec le format source map et Visual Studio. Pour activer le débogage dans Visual Studio, sélectionnez 'Debug' dans la liste déroulante après avoir créé un projet d'application HTML avec TypeScript.

Mise à jour :

WebStorm a également ajouté un support pour le débogage via SourceMaps : http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui-and-much-more/

Tout d'abord, WebStorm permet d'améliorer et de rationaliser les sites Web. simplifié avec des langages modernes comme TypeScript, CoffeeScript et Dart. Dart. En plus de fournir un éditeur de code de première classe pour ces langages, WebStorm 6 offre :

Compilation/transpilation automatique de ces langages de haut niveau dans ceux reconnus par les navigateurs sur toutes les plates-formes prises en charge. Débogage complet de TypeScript, Dart ou CoffeeScript à l'aide de cartes sources.

Answer 2

Avec l'application VS2013 Typescript, je n'ai pas eu à changer quoi que ce soit dans web.config. J'ai mis un point d'arrêt dans le fichier ts et débogué dans IE, et presto, le point d'arrêt s'est arrêté dans TypeScript.

Answer 3

Ce problème est maintenant corrigé dans VS 2017 afin que vous puissiez déboguer directement dans Visual Studio et typescript.

Il suffit de définir votre point d'arrêt dans votre fichier *.ts, et il sera atteint.

Et il déboguera dans VS, pas dans IE, comme si vous déboguiez du c#.

Answer 4

Le débogage de typescript avec Visual Studio fonctionne avec les bons paramètres. (Dans les versions précédentes de VS, j'ai parfois rencontré des problèmes. Ci-dessous, vous trouverez comment cela fonctionne avec VS 2015 CTP 6).

1. D'abord vous assurez-vous de créer des cartes sources lors de la compilation de typescript en javascript. Vous devez donc avoir un fichier xxx.js.map près de chaque xxx.js.

   Obtenir les cartes sources en exécutant le compilateur typescript en dehors de Visual Studio ne pose aucune difficulté, à la ligne de commande tsc ajouter

   --sourcemap %1.ts

   votre script de gulp créera généralement des sourcesmaps par défaut.

2. Configurez votre application web dans Visual Studio .

   Définir Internet Explorer comme navigateur de départ. Je n'ai réussi à le faire fonctionner qu'avec IE et je ne pense pas qu'un autre navigateur puisse fonctionner.

   Dans les propriétés du projet, allez dans l'onglet "Web" et configurez la section "Débogueurs" en bas : Désactiver tous les débogueurs ! C'est contre intuitif et vous pourriez voir ce message d'erreur :

   Vous avez tenté de lancer le débogueur, mais en fonction de vos paramètres de débogage actuels sur la page des propriétés Web, il n'y a aucun processus à déboguer. Cela se produit lorsque l'option "Don't open a page. Attendez une demande d'un autre processus" est sélectionnée et que le débogage ASP.NET est désactivé. Veuillez vérifier vos paramètres dans la page des propriétés Web et réessayer.

   Comme le dit le message d'erreur, l'action de démarrage en haut des propriétés Web devrait être une autre option, comme " Page actuelle ".

   Définir points d'arrêt dans votre code ts dans Visual Studio maintenant ou plus tard.

   Hit F5

Bien que vous puissiez utiliser l'éditeur Visual Studio pour déboguer et modifier les fichiers ts, "Edit and Continue" ne fonctionnera pas, il n'y a actuellement aucun navigateur qui puisse recharger les fichiers js et js.map et continuer. (Corrigez-moi tous si je me trompe et je serai heureux).

Answer 5

Le débogage de TypeScript n'a pas du tout fonctionné pour moi avec VS2013 Update 3 sur aucune de mes machines. Après beaucoup de frustration, j'ai décidé d'essayer de mettre à jour vers VS2013 Update 4 CTP. Enfin, les points d'arrêt sont atteints dans VS !