2012-10-03 62 views
65

是否有方法在Visual Studio中调试TypeScript源代码(而不是调试生成的javascript)?使用Visual Studio调试TypeScript代码

从打字稿语言规范:

打字稿可选地提供源映射,使源级的调试。

因此,我期待能够在ts代码中放置断点,并且能够调试它,但它不起作用。在规格中我没有发现任何其他的调试内容。我应该做些什么来完成这项工作?也许“可选”这个词暗示我需要为它做些事情......任何建议?

+0

您还可以检查出[文件](http://stackoverflow.com/documentation/typescript/9131/) – Peopleware

回答

61

更新为2017年VS的:

VS2017现在可以直接在Visual Studio调试打字稿,就像如果你调试C#。请参阅下面的答案。

为VS的早期版本原来的答案:

您可能无法在VS调试,但你可以在某些浏览器。 Aaron Powell已经在博客上写道,今天在Chrome Canary上工作的断点:http://www.aaron-powell.com/web/typescript-source-maps

总结(很简单),亚伦说什么,你使用-sourcemap交换机上的编译器生成一个*.js.map文件在同一目录作为源。在支持source maps(Chrome Canary,可能是最近的Firefox版本,因为它们是Mozilla的想法)的浏览器中,您可以调试.ts源文件,就像正常的.js文件一样。

博客完成“希望Visual Studio或IE(或两者)团队也拿起源地图并为它们添加支持。” - 这表明它还没有发生。

更新:

随着打字稿0.8.1的发布,源地图调试,现在在Visual Studio还提供:

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

从公告:

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

更新

WebStorm还通过SourceMaps增加了对调试:http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui-and-much-more/

首先,WebStorm允许更智能,更高效的网络 发展与现代语言,如打字稿, CoffeeScript和 Dart。除了提供这些 语言,WebStorm 6提供了一流的代码编辑器:这些高级语言 到那些所有支持的平台上浏览器所识别的

自动编译/ transpilation。 使用 源地图进行TypeScript,Dart或CoffeeScript的全功能调试。

+3

是Chrome Canary版真正需要的?我使用Chrome稳定版,并且我看到“启用源地图”是开发者工具设置窗口中的一个选项。 –

+1

我认为当亚伦写博客时(当我发布这个答案时),加纳利是必要的。到目前为止,该功能必须经过渗透才能释放。 – JcFx

+4

现在,使用Internet Explorer时,似乎可以直接在Visual Studio GUI中调试TypeScript。我想知道这是否也可以通过其他浏览器来实现。 – kossmoboleat

14

使用VS2013 Typescript应用程序,我不必在web.config中更改任何内容。我在ts文件中放置了一个断点并在IE中进行了调试,并且presto在TypeScript中停止了断点。

+0

我同意。我使用VS 2013更新2 – Nash

+1

我默认 – Marko

+2

不起作用谢谢你指着IE。不幸的是,调试在Chrome中不起作用。 –

2

在我的任何一台机器上,使用VS2013 Update 3时,TypeScript调试根本不适用于我。经过很多挫折之后,我决定尝试升级到VS2013 Update 4 CTP。终于在VS中击中了断点!

+0

thx为更新4 ctp抬头,安装。我的机器有更新3和打字稿调试工作。然而,开始ie需要很长时间,特别是每次编译web应用程序时(虽然我只更改了ts代码) – citykid

3

使用Visual Studio调试打印稿使用正确的设置。 (在VS的早期版本中我有时面对的问题,下面是它的工作原理罚款与VS 2015年CTP 6)

  1. 首先你确保您创建源代码编译打字稿的JavaScript时映射。所以你应该在每个xxx.js附近有一个xxx.js.map文件。通过运行打字稿编译器的Visual Studio之外不会造成任何困难,在TSC命令行

    获取源地图添加

    --sourcemap %1.ts 
    

    你一饮而尽脚本通常会默认创建sourcemaps。

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

    设置Internet Explorer作为启动浏览器。我只能用IE浏览器工作,不认为任何其他浏览器都能正常工作。

    在项目属性转至“网络”选项卡,在“调试”部分在底部配置:禁用所有调试!这是反直观的,您可能会看到以下错误消息:

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

    随着错误消息指出,在Web性能的顶部开始行动应该是另一种选择,像“当前页”。

    在现在或以后在Visual Studio中的TS码

    设置断点

    命中F5

虽然你可以使用Visual Studio编辑器来调试和编辑TS文件,“编辑并继续”将无法正常工作,目前还没有浏览器,可以重新加载JS和JS .map文件并继续。 (纠正我的人,如果我错了,我会很高兴。)

+0

自4月份以来对您的设置所做的任何更改? – jth41

+0

你发现写作有用吗? – citykid

3

这是现在固定在2017年VS,所以你可以在Visual Studio和打字稿直接调试。

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

它将在VS,而不是IE浏览器调试,因为如果你是调试C#。

0

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

背景: 我有2种的Visual Studio 2015年情况与打字稿两个不同的项目。第一个启动的实例没有正确调试,第二个没有。 所有的项目设置都是一样的。 我终于重新启动了第一个实例,然后调试了TypeScript(最后)。

相关问题