用Visual StudiodebuggingTypeScript代码

有没有办法在Visual Studio中debuggingTypeScript源代码(而不是debugging生成的JavaScript)?

从TypeScript语言规范:

TypeScript可选地提供源映射,从而实现源代码级的debugging。

因此,我期望能够在ts代码中放置断点并能够debugging它,但是它不起作用。 我没有发现任何其他的规格debugging提及。 有什么我应该做的做这个工作? 也许“select性”这个词暗示我需要做一些工作…任何build议?

更新截至2017年:

VS2017现在可以直接在Visual Studio中debugging打字稿,就像debuggingc#一样。 看到我的答案在下面。

VS之前版本的原始答案:

您可能无法在VS中进行debugging,但可以在某些浏览器中进行debugging。 Aaron Powell已经在博客上写了一些关于在Chrome Canary上工作的断点: http : //www.aaron-powell.com/web/typescript-source-maps 。

总结一下(很简单)Aaron所说的,你使用编译器上的-sourcemap开关在你的源文件所在的目录下生成一个*.js.map文件。 在支持源地图的浏览器(Chrome Canary,可能是最近的Firefox版本,因为它们是Mozilla的想法)之后,您可以像正常的.js文件一样debugging.ts源文件。

博客的结尾是“希望Visual Studio或IE(或两者)团队也拿起源地图,并join他们的支持。 – 这表明它还没有发生。

更新:

随着TypeScript 0.8.1的发布,现在在Visual Studio中也可以使用Source Mapdebugging:

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

从公告:

debugging TypeScript现在支持源代码级debugging! 源地图格式作为debugging转换为JavaScript的语言的一种方式已经越来越受欢迎,并且受到各种浏览器和工具的支持。 在0.8.1版本中,TypeScript编译器正式支持源映射。 此外,用于Visual Studio 2012的新版本的TypeScript支持使用源映射格式进行debugging。 在命令行中,我们现在完全支持使用–sourcemap标志,该标志输出对应于JavaScript输出的源映射文件。 这个文件将允许直接在启用了源图的浏览器和Visual Studio中debugging原始的TypeScript源代码。 要在Visual Studio中启用debugging,请在使用TypeScript项目创buildHTML应用程序后,从下拉列表中select“debugging”。

更新

WebStorm还增加了对通过SourceMaps进行debugging的支持: http ://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui- 以及更多/

首先,WebStorm允许使用TypeScript,CoffeeScript和Dart等现代语言进行更智能,更stream畅的Web开发。 除了为这些语言提供一stream的代码编辑器之外,WebStorm 6还提供:

将这些高级语言自动编译/转换为所有支持平台上的浏览器识别的语言。 TypeScript,Dart或CoffeeScript的全functiondebugging与源地图。

使用VS2013 Typescript应用程序,我不必在web.config中更改任何内容。 我把一个断点放在ts文件中,并在IE中debugging,并断断续续在TypeScript中停止。

使用Visual Studiodebugging打字稿使用正确的设置。 (在VS的以前版本中我有时遇到问题,下面是VS 2015 CTP 6的工作原理)

  1. 首先, 确保在将打字稿编译为javascript时创build源映射 。 所以你应该在每个xxx.js附近有一个xxx.js.map文件。

    通过在Visual Studio之外运行typescript编译器获取源映射并不会引起任何困难,在tsc命令行添加

     --sourcemap %1.ts 

    你的gulp脚本默认会创buildsourcemaps。

  2. 在Visual Studio中configuration您的Web应用程序

    Internet Explorer设置为启动浏览器。 我得到它只与IE浏览器工作,不认为任何其他浏览器将工作。

    在项目属性中,转到“Web”选项卡,并在底部configuration“debugging器”部分: 禁用所有debugging器 ! 这是反直观的,你可能会看到这个错误消息:

    您试图启动debugging器,但根据您在Web属性页面上的当前debugging设置,没有可debugging的过程。 这发生在“不打开页面,等待来自另一个进程的请求”选项被选中,并且ASP.NETdebugging被禁用。 请在networking媒体资源页面上检查您的设置,然后重试。

    如错误消息所示,Web属性顶部的“启动操作”应该是另一个选项,如“ 当前页面 ”。

    现在或以后,在Visual Studio中的ts代码中设置断点

    F5

虽然可以使用Visual Studio编辑器来debugging和编辑ts文件,但“编辑并继续”将不起作用,目前没有浏览器可以重新载入js和js.map文件并继续。 (如果我错了,请纠正我的错误,我会很高兴。)

这现在已经修复在VS 2017中,所以你可以直接在Visual Studio和打字稿中进行debugging。

只要在你的* .ts文件中设置你的断点,它会被击中。

而且它会在VS中debugging,而不是IE,就像你在debuggingc#一样。

我的任何一台机器上的VS2013 Update 3都没有TypeScriptdebuggingfunction。 经过很多挫折,我决定尝试升级到VS2013 Update 4 CTP。 终于在VS中击中了断点!

简短的回答:重新启动Visual Studio

背景:我有两个Visual Studio 2015实例与TypeScript的两个不同的项目。 第一个启动的实例没有正确debugging,第二个没有。 所有的项目设置都是一样的。 我终于重新启动第一个实例,然后debuggingTypeScript(最后)。