使用Visual Studio调试TypeScript代码 [英] Debugging TypeScript code with Visual Studio

问题描述

是否可以在Visual Studio中调试TypeScript源(而不是调试生成的javascript)?

根据TypeScript语言规范:

TypeScript可以选择提供源映射，从而启用源级别的调试.

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

解决方案

VS2017及更高版本的当前答案

从VS2017开始，可以直接在Visual Studio中调试Typescript.从文档:

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

Visual Studio代码中调试打字稿:

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

VS早期版本的原始答案:

您可能无法在VS中进行调试，但可以在某些浏览器中进行调试.亚伦·鲍威尔(Aaron Powell)的博客今天就在Chrome Canary中启用了断点:源地图的浏览器中(Chrome Canary，大概是最新的Firefox版本，因为它们是Mozilla的想法)，然后您就可以像正常的.js文件一样调试.ts源.

博客的结尾是希望Visual Studio或IE(或两者)团队还可以使用Source Maps并为其添加支持." -这表明还没有发生.

更新:

随着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编译器正式发布 支持源地图.此外，新版本的TypeScript适用于 Visual Studio 2012支持使用源映射格式进行调试. 现在，从命令行开始，我们完全支持--sourcemap标志的使用，该标志输出与JavaScript输出相对应的源映射文件.此文件将允许直接调试 启用源地图的浏览器和Visual中的原始TypeScript源 工作室. 要在Visual Studio中启用调试功能，请在使用TypeScript项目创建HTML应用程序后，从下拉菜单中选择调试".

更新:

WebStorm还添加了通过SourceMaps进行调试的支持: http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-使用源地图调试新鲜的用户界面和更多/

首先，WebStorm允许更智能，更简化的Web 使用诸如TypeScript，CoffeeScript和 镖.除了为这些提供一流的代码编辑器 语言，WebStorm 6提供:

这些高级语言的自动编译/翻译 到所有受支持平台上的浏览器都可以识别的内容. 使用以下命令对TypeScript，Dart或CoffeeScript进行全功能调试 源地图.

Is there a way to debug TypeScript source in Visual Studio (instead of debugging the generated javascript)?

From the TypeScript language specifications:

TypeScript optionally provides source maps, enabling source-level debugging.

I was therefore expecting to be able to place breakpoints in ts code and be able to debug it, but it doesn't work. I didn't find any other mentions of debugging in the specs. Is there anything I should do to make this work? Perhaps the word "optionally" hints that I need to do something for it to work... Any suggestions?

解决方案

Current Answer for VS2017 and later

Debugging Typescript directly in Visual Studio has been possible since VS2017. From the documentation:

You can debug JavaScript and TypeScript code using Visual Studio. You can set and hit breakpoints, attach the debugger, inspect variables, view the call stack, and use other debugging features.

There are also additional resources on Debugging Typescript / Asp.NET Core in Visual Studio.

It is also possible to debug typescript in Visual Studio Code:

Visual Studio Code supports TypeScript debugging through its built-in Node.js debugger and also through extensions like Debugger for Chrome to support client-side TypeScript debugging.

Original Answer for prior versions of VS:

You may not be able to debug in VS, but you can in some browsers. Aaron Powell has blogged about getting breakpoints working in Chrome Canary just today: https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/.

To summarise (very briefly) what Aaron says, you use the -sourcemap switch on the compiler to generate a *.js.map file in the same directory as your source. In browsers which support source maps (Chrome Canary, and presumably recent Firefox builds, since they are a Mozilla idea), you can then debug your .ts source just as you would normal .js files.

The blog finishes with "Hopefully either the Visual Studio or IE (or both) team also pick up Source Maps and add support for them too." - which suggests it hasn't happened yet.

Update:

With the release of TypeScript 0.8.1, Source Map debugging is now also available in Visual Studio:

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

From the announcement:

Debugging TypeScript now supports source level debugging! The source map format has been gaining popularity as a way of debugging languages which translate to JavaScript and is supported by a variety of browsers and tools. With version 0.8.1, the TypeScript compiler officially supports source maps. Additionally, the new version of TypeScript for Visual Studio 2012 supports debugging using the source map format. From the command-line, we now fully support the use of the --sourcemap flag, which outputs a source map file corresponding to the JavaScript output. This file will allow directly debugging the original TypeScript source in source map-enabled browsers and Visual Studio. To enable debugging in Visual Studio select ‘Debug’ from the dropdown after creating an HTML Application with TypeScript project.

Update:

WebStorm has also added support for debugging via SourceMaps: http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui-and-much-more/

First, WebStorm allows for smarter and more streamlined web development with modern languages such as TypeScript, CoffeeScript and Dart. In addition to providing a first-class code editor for these languages, WebStorm 6 offers:

Automatic compilation/transpilation of these higher-level languages into those recognized by browsers on all supported platforms. Full-featured debugging of TypeScript, Dart or CoffeeScript with source maps.

这篇关于使用Visual Studio调试TypeScript代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！