visual-studio - 使用 Visual Studio 调试 TypeScript 代码

Question

有没有办法在 Visual Studio 中调试 TypeScript 源代码(而不是调试生成的 javascript)？

来自 TypeScript 语言规范:

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

因此，我希望能够在 ts 代码中放置断点并能够对其进行调试，但它不起作用。我没有在规范中找到任何其他调试提及。我应该做些什么来完成这项工作？也许“可选”这个词暗示我需要做一些事情才能让它工作……有什么建议吗？

Answer 1

VS2017 及更高版本的当前答案

自 VS2017 以来，可以直接在 Visual Studio 中调试 Typescript。来自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.

Debugging Typescript / Asp.NET Core in Visual Studio 上还有其他资源.

也可以在 Visual Studio Code 中调试 typescript :

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.

VS 早期版本的原始答案:

你可能无法在 VS 中进行调试，但你可以在某些浏览器中进行调试。就在今天，Aaron Powell 发表了一篇关于在 Chrome Canary 中使用断点的博文:https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/ .

为了总结(非常简短地)Aaron 所说的内容，您使用编译器上的 -sourcemap 开关在与你的来源。在支持 source maps 的浏览器中(Chrome Canary，可能还有最近的 Firefox 版本，因为它们是 Mozilla 的想法)，然后您可以像调试普通 .js 文件一样调试您的 .ts 源代码。

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

更新:

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

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

来自公告:

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.

更新:

WebStorm 还添加了对通过 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.