使用Visual Studio调试TypeScript代码


81

有没有一种方法可以在Visual Studio中调试TypeScript源(而不是调试生成的JavaScript)?

根据TypeScript语言规范:

TypeScript可以选择提供源映射,从而启用源级调试。

因此,我期望能够在ts代码中放置断点并能够对其进行调试,但这是行不通的。在规范中,我没有发现其他任何有关调试的信息。我应该做些什么来使这项工作吗?也许“可选地”一词暗示我需要做一些工作才能起作用……有什么建议吗?


1
您还可以查看文档
Peopleware,2017年

Answers:


71

VS2017及更高版本的当前答案

自VS2017开始,就可以直接在Visual Studio中调试Typescript。从文档中

您可以使用Visual Studio调试JavaScript和TypeScript代码。您可以设置和达到断点,附加调试器,检查变量,查看调用堆栈以及使用其他调试功能。

在Visual Studio中还有关于调试Typescript / Asp.NET Core的其他资源。

也可以在Visual Studio Code中调试打字稿:

Visual Studio Code通过其内置的Node.js调试器以及通过诸如Debugger for Chrome之类的扩展支持TypeScript调试,以支持客户端TypeScript调试。

VS早期版本的原始答案:

您可能无法在VS中进行调试,但是可以在某些浏览器中进行调试。亚伦·鲍威尔(Aaron Powell)今天在博客中发布了有关在Chrome Canary中启用断点的信息:https : //www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/

总结(非常简短)Aaron所说的话,您可以使用-sourcemap编译器上的开关在与*.js.map源代码相同的目录中生成文件。在支持源地图的浏览器中(Chrome Canary,以及大概是最新的Firefox构建,因为它们是Mozilla的想法),然后您.ts就可以像正常.js文件一样调试源了。

该博客以“希望Visual Studio或IE(或两者)团队还选择Source Map并添加对它们的支持”结尾。-这表明还没有发生。

更新:

随着TypeScript 0.8.1的发布,Visual Studio现在也可以使用Source Map调试了:

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

从公告中:

调试 TypeScript现在支持源代码级调试!源地图格式已成为一种流行的调试语言的方法,该语言可翻译为JavaScript,并受各种浏览器和工具的支持。在0.8.1版中,TypeScript编译器正式支持源映射。此外,用于Visual Studio 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-以及更多/

首先,WebStorm可以使用TypeScript,CoffeeScript和Dart等现代语言进行更智能,更简化的Web开发。除了提供用于这些语言的一流代码编辑器之外,WebStorm 6还提供:

将这些高级语言自动编译/翻译为所有受支持平台上的浏览器识别的语言。使用源映射对TypeScript,Dart或CoffeeScript进行全功能调试。


4
真的需要Chrome Canary吗?我使用的是Chrome稳定版,并且在开发人员工具设置窗口中看到“启用源地图”选项。
Judah Gabriel Himango 2012年

1
我认为,当亚伦(Aaron)撰写博客(以及我发布此答案)时,金丝雀是必要的。到目前为止,该功能必须已经渗透到发行版中。
裘德·费舍尔

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

我无法使用VS 2012调试TS
Nikos,

通过生成源为我工作的地图,“Web扩展”
Adaptabi

15

使用VS2013 Typescript应用程序,我无需在web.config中进行任何更改。我在ts文件中放置了一个断点,并在IE中进行了调试,然后断点在TypeScript中停止了。


我同意。我正在使用VS 2013
Nash

2
感谢您指出IE。不幸的是,调试无法在Chrome中进行。
伊万·科胡金

4
我的猜测是,Microsoft利用了一些挂钩,例如使调试过程正常运行,而其他浏览器尚不支持。有一个中间代码映射文件,就像在浏览器中生成的javascript和IDE中的源代码之间的协定。我很高兴它能工作。
BraveNewMath 2014年

5

VS 2017现在已修复此问题,因此您可以直接在Visual Studio和Typescript中进行调试。

只需在* .ts文件中设置断点,它将被命中。

它将像在调试c#一样在VS中而不是IE中进行调试。


3

使用Visual Studio调试打字稿可以使用正确的设置。(在VS的早期版本中,有时会遇到问题,以下是VS 2015 CTP 6如何正常工作)

  1. 首先,请确保在将Typescript编译为javascript时创建源映射。因此,您应该在每个xxx.js附近都有一个xxx.js.map文件。

    通过在Visual Studio外部运行Typescript编译器获取源映射不会造成任何困难,请在tsc命令行中添加

    --sourcemap %1.ts
    

    默认情况下,您的gulp脚本通常会创建源地图。

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

    Internet Explorer设置为启动浏览器。我得到它仅适用于IE,并且不认为任何其他浏览器都可以使用。

    在项目属性中,转到“ Web”选项卡并在底部配置“ Debuggers”部分:禁用所有调试器!这是反驳的,您可能会看到以下错误消息:

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

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

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

    击中F5

尽管可以使用Visual Studio编辑器调试和编辑ts文件,但“编辑并继续”将不起作用,但是当前没有浏览器可以重新加载js和js.map文件并继续。(如果我做错了,请纠正我,我会很高兴的。)


自4月以来您的设置有任何变化吗?
jth41

您觉得文章有用吗?
citykid

2

在我的任何计算机上使用VS2013 Update 3时,TypeScript调试根本不适合我。经过无奈后,我决定尝试更新为VS2013 Update 4 CTP。最终,断点在VS中被击中!


thx更新4 ctp抬起头,进行安装。我的机器具有Update 3,并且打字稿调试工作正常。然而,特别是因为启动Web应用程序每次都需要花费很长的时间(尽管我只更改了ts代码)
citykid 2014年

0

简短答案:重新启动Visual Studio

背景:我有2个Visual Studio 2015实例,其中有两个使用TypeScript的不同项目。第一个启动的实例未正确调试,第二个启动了。所有项目设置均相同。我终于重新启动了第一个实例,然后最终调试了TypeScript。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.