使用 Visual Studio 调试 TypeScript 代码

Debugging TypeScript code with Visual Studio

提问by M.S

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

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

From the TypeScript language specifications:

来自 TypeScript 语言规范：

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

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

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?

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

采纳答案by Jude Fisher

Current Answer for VS2017 and later

VS2017 及更高版本的当前答案

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

自 VS2017 以来，可以直接在 Visual Studio 中调试 Typescript。从文档：

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.

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

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

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

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

也可以在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.

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

Original Answer for prior versions of VS:

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/.

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

To summarise (very briefly) what Aaron says, you use the -sourcemapswitch on the compiler to generate a *.js.mapfile 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 .tssource just as you would normal .jsfiles.

总结（非常简短地）Aaron 所说的话，您使用-sourcemap编译器上的开关在与*.js.map源代码相同的目录中生成一个文件。在支持源映射的浏览器（Chrome Canary 和可能是最近的 Firefox 版本，因为它们是 Mozilla 的想法）中，您可以像调试.ts普通.js文件一样调试源。

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.

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

Update:

更新：

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

随着 TypeScript 0.8.1 的发布，源映射调试现在也可以在 Visual Studio 中使用：

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

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

From the announcement:

从公告：

DebuggingTypeScript 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.

调试TypeScript 现在支持源码级调试！源映射格式作为一种调试语言的方式越来越受欢迎，这些语言可以转换为 JavaScript，并得到各种浏览器和工具的支持。在 0.8.1 版本中，TypeScript 编译器正式支持源映射。此外，Visual Studio 2012 的新版 TypeScript 支持使用源映射格式进行调试。从命令行，我们现在完全支持使用 --sourcemap 标志，它输出与 JavaScript 输出对应的源映射文件。此文件将允许在启用源映射的浏览器和 Visual Studio 中直接调试原始 TypeScript 源。要在 Visual Studio 中启用调试，请在使用 TypeScript 项目创建 HTML 应用程序后从下拉列表中选择“调试”。

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/

WebStorm 还增加了对通过 SourceMaps 进行调试的支持：http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui-以及更多/

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.

首先，WebStorm 允许使用 TypeScript、CoffeeScript 和 Dart 等现代语言进行更智能、更简化的 Web 开发。除了为这些语言提供一流的代码编辑器外，WebStorm 6 还提供：

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

回答by BraveNewMath

With VS2013 Typescript application, I didn't have to change anything in web.config. I put a breakpoint in the ts file and debugged in IE, and presto, the breakpoint stopped inside TypeScript.

使用 VS2013 Typescript 应用程序，我不需要更改 web.config 中的任何内容。我在 ts 文件中放置了一个断点并在 IE 中调试，并且很快，断点在 TypeScript 中停止。

回答by Greg Gum

This is now fixed in VS 2017 so you can debug directly in Visual Studio and typescript.

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

Just set your breakpoint in your *.ts file, and it will be hit.

只需在 *.ts 文件中设置断点，它就会被命中。

And it will debug in VS, not IE, as if you were debugging c#.

并且它会在 VS 中调试，而不是 IE，就像你在调试 c# 一样。

回答by citykid

Debugging typescript with Visual Studio works with the right settings. (In previous versions of VS I face problems sometimes, below is how it works fine with VS 2015 CTP 6)

使用 Visual Studio 调试打字稿可以使用正确的设置。（在以前的 VS 版本中，我有时会遇到问题，下面是它如何与 VS 2015 CTP 6 一起正常工作）

1. First you make sure that you create source mapswhen compiling typescript to javascript. So you should have an xxx.js.map file near every xxx.js.

   Getting source maps by running the typescript compiler outside of Visual Studio does not cause any difficulty, at the tsc command line add

   --sourcemap %1.ts
   

   your gulp script will usually create sourcemaps by default.

2. Configure your web application in Visual Studio.

   Set Internet Exploreras the start browser. I got it working only with IE and dont think any other browser will work.

   In the project properties go to the "Web" tab and configure the "Debuggers" section at the bottom: Disable all debuggers! This is counter intutitive and you might see this error message:

   You have attempted to start the debugger, but based on your current debug settings on the Web properties page there is no process to debug. This occurs when the "Don't open a page. Wait for a request from another process" option is selected, and ASP.NET debugging is disabled. Please check your settings on the Web properties page and try again.

   As the error message says, the Start Action at the top of the Web properties should be another option, like "Current page".

   Set breakpointsin your ts code inside Visual Studio now or later.

   Hit F5

1. 首先，确保在将打字稿编译为 javascript 时创建源映射。所以你应该在每个 xxx.js 附近都有一个 xxx.js.map 文件。

   通过在 Visual Studio 之外运行 typescript 编译器来获取源映射不会造成任何困难，在 tsc 命令行添加

   --sourcemap %1.ts
   

   默认情况下，您的 gulp 脚本通常会创建源映射。

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

   将Internet Explorer设置为启动浏览器。我只能在 IE 上使用它，并且认为任何其他浏览器都无法使用。

   在项目属性中，转到“Web”选项卡并配置底部的“调试器”部分：禁用所有调试器！这是违反直觉的，您可能会看到以下错误消息：

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

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

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

   按F5

While you can use the Visual Studio Editor to debug and edit ts files, "Edit and Continue" will not work, there is currently no browser that can reload js and js.map files and continue. (Correct me anyone if I am wrong and I will be happy.)

虽然您可以使用 Visual Studio 编辑器来调试和编辑 ts 文件，但“编辑并继续”将不起作用，目前没有浏览器可以重新加载 js 和 js.map 文件并继续。（如果我错了，请纠正我，我会很高兴。）

回答by user1599328

TypeScript debugging didn't work for me at all with VS2013 Update 3 on any of my machines. After much frustration, I decided to try updating to VS2013 Update 4 CTP. Finally breakpoints are being hit in VS!

在我的任何机器上使用 VS2013 Update 3 时，TypeScript 调试对我来说根本不起作用。非常沮丧之后，我决定尝试更新到 VS2013 Update 4 CTP。终于在 VS 中遇到断点了！

回答by klaasjan69

short answer: Restart Visual Studio

简短回答：重新启动 Visual Studio

background: I had 2 visual studio 2015 instances with two different projects with TypeScript. The first started instance did not debug correctly, the second one did. All of the project settings were the same. I finally restarted the first instance and then it debugged TypeScript (finally).

背景：我有 2 个 Visual Studio 2015 实例，其中包含两个不同的 TypeScript 项目。第一个启动的实例没有正确调试，第二个做了。所有项目设置都相同。我终于重新启动了第一个实例，然后它调试了 TypeScript（最后）。