有没有一种方法可以在Visual Studio中调试TypeScript源(而不是调试生成的JavaScript)?
根据TypeScript语言规范:
TypeScript可以选择提供源映射,从而启用源级调试。
因此,我期望能够在ts代码中放置断点并能够对其进行调试,但这是行不通的。在规范中,我没有发现其他任何有关调试的信息。我应该做些什么来使这项工作吗?也许“可选地”一词暗示我需要做一些工作才能起作用……有什么建议吗?
Answers:
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进行全功能调试。
使用VS2013 Typescript应用程序,我无需在web.config中进行任何更改。我在ts文件中放置了一个断点,并在IE中进行了调试,然后断点在TypeScript中停止了。
使用Visual Studio调试打字稿可以使用正确的设置。(在VS的早期版本中,有时会遇到问题,以下是VS 2015 CTP 6如何正常工作)
首先,请确保在将Typescript编译为javascript时创建源映射。因此,您应该在每个xxx.js附近都有一个xxx.js.map文件。
通过在Visual Studio外部运行Typescript编译器获取源映射不会造成任何困难,请在tsc命令行中添加
--sourcemap %1.ts
默认情况下,您的gulp脚本通常会创建源地图。
在Visual Studio中配置Web应用程序。
将Internet Explorer设置为启动浏览器。我得到它仅适用于IE,并且不认为任何其他浏览器都可以使用。
在项目属性中,转到“ Web”选项卡并在底部配置“ Debuggers”部分:禁用所有调试器!这是反驳的,您可能会看到以下错误消息:
您试图启动调试器,但是基于Web属性页上的当前调试设置,没有调试过程。选择“不打开页面。等待来自另一个进程的请求”选项,并且禁用ASP.NET调试时,会发生这种情况。请在“网络属性”页面上检查设置,然后重试。
如错误消息所述,Web属性顶部的“开始操作”应该是另一个选项,例如“当前页面”。
现在或以后在Visual Studio中的ts代码中设置断点。
击中F5
尽管可以使用Visual Studio编辑器调试和编辑ts文件,但“编辑并继续”将不起作用,但是当前没有浏览器可以重新加载js和js.map文件并继续。(如果我做错了,请纠正我,我会很高兴的。)
在我的任何计算机上使用VS2013 Update 3时,TypeScript调试根本不适合我。经过无奈后,我决定尝试更新为VS2013 Update 4 CTP。最终,断点在VS中被击中!