Débogage de code TypeScript avec Visual Studio
Existe-t-il un moyen de déboguer une source TypeScript dans Visual Studio (au lieu de déboguer le javascript généré)?
A partir des spécifications du langage TypeScript:
TypeScript fournit éventuellement des mappages de sources, permettant le débogage au niveau source.
Je m'attendais donc à pouvoir placer des points d'arrêt dans le code ts et pouvoir le déboguer, mais cela ne fonctionne pas. Je n'ai trouvé aucune autre mention 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 "optionnellement" laisse entendre que je dois faire quelque chose pour que cela fonctionne ... Des suggestions?
Mise à jour à partir de VS 2017:
VS2017 fonctionne maintenant pour déboguer TypeScript directement dans Visual Studio, comme si vous déboguiez c #. Voir ma réponse ci-dessous.
Réponse originale pour les versions antérieures de VS:
Vous ne pourrez peut-être pas déboguer dans VS mais dans certains navigateurs. Aaron Powell a écrit sur son blog à propos du fonctionnement des points d'arrêt dans Chrome Canary aujourd'hui: 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 le commutateur -sourcemap sur le compilateur pour générer un fichier *.js.map dans le même répertoire que votre source. Dans les navigateurs prenant en charge source maps (Chrome Canary et les versions récentes de Firefox, car elles sont une idée de Mozilla), vous pouvez ensuite déboguer votre source .ts comme vous le feriez avec des fichiers .js normaux.
Le blog se termine par "Espérons que l'équipe de Visual Studio ou de IE (ou les deux) récupère également les mappes source et les prenne également en charge". - ce qui suggère que ce n'est pas encore arrivé.
Mettre à jour:
Depuis la publication de TypeScript 0.8.1, le débogage de mappage source est désormais également disponible dans Visual Studio:
http://blogs.msdn.com/b/TypeScript/archive/2012/11/15/announcing-TypeScript-0-8-1.aspx
De l'annonce:
Débogage TypeScript supporte maintenant le débogage au niveau source! Le format de la carte source a gagné en popularité en tant que moyen de débogage des langues qui traduire en JavaScript et est pris en charge par une variété de navigateurs et outils. Avec la version 0.8.1, le compilateur TypeScript officiellement prend en charge les cartes source. En outre, la nouvelle version de TypeScript pour Visual Studio 2012 prend en charge le débogage à l'aide du format de carte source . À partir de la ligne de commande, nous prenons désormais pleinement en charge l'utilisation de l'indicateur --sourcemap, qui génère un fichier de mappage source correspondant à la sortie JavaScript. Ce fichier permettra de déboguer directement le fichier source TypeScript d’origine dans les navigateurs compatibles avec la carte source et Visual Studio. Pour activer le débogage dans Visual Studio, sélectionnez ‘Debug’ dans le menu déroulant après la création d’une application HTML avec un projet TypeScript.
Mettre à jour:
WebStorm a également pris en charge le débogage via SourceMaps: http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-TypeScript-debugging-with-source-maps-fresh- ui-et-beaucoup-plus/
Premièrement, WebStorm permet un Web plus intelligent et plus simple développement avec des langages modernes tels que TypeScript, CoffeeScript et Dard. En plus de fournir un éditeur de code de première classe pour ceux-ci WebStorm 6 offre les langues suivantes:
Compilation/transpilation automatique de ces langages de plus haut niveau dans ceux reconnus par les navigateurs sur toutes les plates-formes prises en charge . Débogage complet de TypeScript, Dart ou CoffeeScript avec cartes sources.
Avec l'application TypeScript VS2013, je n'ai rien changé à web.config. J'ai mis un point d'arrêt dans le fichier ts et débogué dans IE, et hop, le point d'arrêt s'est arrêté dans TypeScript.
Ceci 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 touché.
Et cela déboguera dans VS, pas dans IE, comme si vous déboguez en C #.
Le débogage de TypeScript avec Visual Studio fonctionne avec les bons paramètres. (Dans les versions précédentes de VS je rencontrais parfois des problèmes, voici comment cela fonctionne correctement avec VS 2015 CTP 6)
Tout d'abord, vous assurez-vous de créer les mappes source} lors de la compilation de TypeScript en javascript. Donc, vous devriez avoir un fichier xxx.js.map près de chaque xxx.js.
Obtenir des cartes sources en exécutant le compilateur TypeScript en dehors de Visual Studio ne pose aucun problème, à la ligne de commande tsc, ajoutez
--sourcemap %1.tsvotre script gulp créera généralement des cartes mères par défaut.
Configurez votre application Web dans Visual Studio.
Définissez Internet Explorer comme navigateur de démarrage. Je ne l’ai fonctionné qu’avec IE et je ne pense pas que tout autre navigateur fonctionnera.
Dans les propriétés du projet, accédez à l'onglet "Web" et configurez la section "Débogueurs" en bas: Désactiver tous les débogueurs! Ceci est un contre-intuitif et vous pourriez voir ce message d'erreur:
Vous avez tenté de démarrer le débogueur mais, en fonction de vos paramètres de débogage actuels sur la page de propriétés Web, il n'existe aucun processus à déboguer. Cela se produit lorsque l'option "Ne pas ouvrir une page. Attendre une requête d'un autre processus" est sélectionnée et que le débogage ASP.NET est désactivé. Vérifiez vos paramètres sur la page de propriétés Web et réessayez.
Comme le message d'erreur le dit, l'action de démarrage en haut des propriétés Web doit être une autre option, telle que "Page actuelle _".
Définissez points d'arrêt dans votre code ts dans Visual Studio maintenant ou plus tard.
Hit F5
Bien que vous puissiez utiliser Visual Studio Editor pour déboguer et éditer des fichiers ts, l'option "Modifier et continuer" ne fonctionnera pas, mais il n'existe actuellement aucun navigateur qui puisse recharger des fichiers js et js.map et continuer. (Corrigez-moi si je me trompe et que je serai heureux.)
Le débogage TypeScript ne fonctionnait pas du tout avec VS2013 Update 3 sur aucun de mes ordinateurs. Après beaucoup de frustration, j'ai décidé d'essayer de mettre à jour à VS2013 Update 4 CTP. Enfin, les points d'arrêt sont atteints dans VS!
réponse courte: redémarrer Visual Studio
background: J'avais 2 instances de Visual Studio 2015 avec deux projets différents avec TypeScript. La première instance démarrée n'a pas débogué correctement, la seconde l'a fait . Tous les paramètres du projet étaient identiques . J'ai finalement redémarré la première instance puis elle a débogué TypeScript (enfin).