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代码中放置断点并能够调试它，但它不起作用。我没有在规格中找到任何其他调试提及。我有什么办法让这项工作成功吗？也许“可选”这个词暗示我需要为它起作用......有什么建议吗？
6 个解决方案
#1
65
Update as of VS 2017:
自2017年起更新：
VS2017 now works to debug typescript directly in Visual Studio, just like if you debugging c#. See my answer below.
VS2017现在可以直接在Visual Studio中调试typescript，就像调试c＃一样。请参阅下面的答案。
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 -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.
总结（非常简要地）Aaron所说的内容，您可以使用编译器上的-sourcemap开关在与源相同的目录中生成* .js.map文件。在支持源地图的浏览器（Chrome Canary，以及可能是最近的Firefox版本，因为它们是Mozilla的想法）中，您可以像调整正常的.js文件一样调试.ts源代码。
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（或两者）团队也选择源地图并添加对它们的支持。” - 这表明它还没有发生。
Update:
更新：
With the release of TypeScript 0.8.1, Source Map debugging is now also available in Visual Studio:
随着TypeScript 0.8.1的发布，Visual Map现在也可以使用源映射调试：
http://blogs.msdn.com/b/typescript/archive/2012/11/15/announcing-typescript-0-8-1.aspx
http://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.
调试TypeScript现在支持源级调试！源地图格式作为一种调试语言的方式越来越受欢迎，这种语言转换为JavaScript并受到各种浏览器和工具的支持。对于0.8.1版本，TypeScript编译器正式支持源映射。此外，VisualScript 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:
首先，WebStorm允许使用TypeScript，CoffeeScript和Dart等现代语言进行更智能，更简化的Web开发。除了为这些语言提供一流的代码编辑器外，WebStorm 6还提供：
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.
将这些高级语言自动编译/转换为浏览器在所有支持的平台上识别的语言。使用源映射对TypeScript，Dart或CoffeeScript进行全功能调试。
#2
14
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中停止。
#3
4
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＃一样。
#4
3
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调试typescript可以使用正确的设置。 （在以前版本的VS中我有时遇到问题，下面是它如何与VS 2015 CTP 6一起正常工作）
-
First you make sure that you create source maps when compiling typescript to javascript. So you should have an xxx.js.map file near every xxx.js.
首先，确保在将typescript编译为javascript时创建源映射。所以你应该在每个xxx.js附近有一个xxx.js.map文件。
Getting source maps by running the typescript compiler outside of Visual Studio does not cause any difficulty, at the tsc command line add
通过在Visual Studio外部运行typescript编译器来获取源映射不会给tsc命令行添加带来任何困难
--sourcemap %1.tsyour gulp script will usually create sourcemaps by default.
你的gulp脚本通常会默认创建源图。
-
Configure your web application in Visual Studio.
在Visual Studio中配置Web应用程序。
Set Internet Explorer as the start browser. I got it working only with IE and dont think any other browser will work.
将Internet Explorer设置为启动浏览器。我得到它只与IE一起工作，不认为任何其他浏览器将工作。
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:
在项目属性中，转到“Web”选项卡并配置底部的“Debuggers”部分：禁用所有调试器！这是反直觉的，您可能会看到以下错误消息：
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.
您试图启动调试器，但根据Web属性页面上的当前调试设置，没有要调试的过程。当选择“不打开页面。等待来自其他进程的请求”选项并禁用ASP.NET调试时，会发生这种情况。请检查Web属性页面上的设置，然后重试。
As the error message says, the Start Action at the top of the Web properties should be another option, like "Current page".
正如错误消息所示，Web属性顶部的“开始操作”应该是另一个选项，例如“当前页面”。
Set breakpoints in your ts code inside Visual Studio now or later.
现在或以后在Visual Studio中的ts代码中设置断点。
Hit F5
点击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文件的浏览器并继续。 （如果我错了，请告诉我任何人，我会很高兴。）
#5
2
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中被击中！
#6
0
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（最后）。
#1
65
Update as of VS 2017:
自2017年起更新：
VS2017 now works to debug typescript directly in Visual Studio, just like if you debugging c#. See my answer below.
VS2017现在可以直接在Visual Studio中调试typescript，就像调试c＃一样。请参阅下面的答案。
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 -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.
总结（非常简要地）Aaron所说的内容，您可以使用编译器上的-sourcemap开关在与源相同的目录中生成* .js.map文件。在支持源地图的浏览器（Chrome Canary，以及可能是最近的Firefox版本，因为它们是Mozilla的想法）中，您可以像调整正常的.js文件一样调试.ts源代码。
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（或两者）团队也选择源地图并添加对它们的支持。” - 这表明它还没有发生。
Update:
更新：
With the release of TypeScript 0.8.1, Source Map debugging is now also available in Visual Studio:
随着TypeScript 0.8.1的发布，Visual Map现在也可以使用源映射调试：
http://blogs.msdn.com/b/typescript/archive/2012/11/15/announcing-typescript-0-8-1.aspx
http://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.
调试TypeScript现在支持源级调试！源地图格式作为一种调试语言的方式越来越受欢迎，这种语言转换为JavaScript并受到各种浏览器和工具的支持。对于0.8.1版本，TypeScript编译器正式支持源映射。此外，VisualScript 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:
首先，WebStorm允许使用TypeScript，CoffeeScript和Dart等现代语言进行更智能，更简化的Web开发。除了为这些语言提供一流的代码编辑器外，WebStorm 6还提供：
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.
将这些高级语言自动编译/转换为浏览器在所有支持的平台上识别的语言。使用源映射对TypeScript，Dart或CoffeeScript进行全功能调试。
#2
14
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中停止。
#3
4
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＃一样。
#4
3
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调试typescript可以使用正确的设置。 （在以前版本的VS中我有时遇到问题，下面是它如何与VS 2015 CTP 6一起正常工作）
-
First you make sure that you create source maps when compiling typescript to javascript. So you should have an xxx.js.map file near every xxx.js.
首先，确保在将typescript编译为javascript时创建源映射。所以你应该在每个xxx.js附近有一个xxx.js.map文件。
Getting source maps by running the typescript compiler outside of Visual Studio does not cause any difficulty, at the tsc command line add
通过在Visual Studio外部运行typescript编译器来获取源映射不会给tsc命令行添加带来任何困难
--sourcemap %1.tsyour gulp script will usually create sourcemaps by default.
你的gulp脚本通常会默认创建源图。
-
Configure your web application in Visual Studio.
在Visual Studio中配置Web应用程序。
Set Internet Explorer as the start browser. I got it working only with IE and dont think any other browser will work.
将Internet Explorer设置为启动浏览器。我得到它只与IE一起工作，不认为任何其他浏览器将工作。
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:
在项目属性中，转到“Web”选项卡并配置底部的“Debuggers”部分：禁用所有调试器！这是反直觉的，您可能会看到以下错误消息：
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.
您试图启动调试器，但根据Web属性页面上的当前调试设置，没有要调试的过程。当选择“不打开页面。等待来自其他进程的请求”选项并禁用ASP.NET调试时，会发生这种情况。请检查Web属性页面上的设置，然后重试。
As the error message says, the Start Action at the top of the Web properties should be another option, like "Current page".
正如错误消息所示，Web属性顶部的“开始操作”应该是另一个选项，例如“当前页面”。
Set breakpoints in your ts code inside Visual Studio now or later.
现在或以后在Visual Studio中的ts代码中设置断点。
Hit F5
点击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文件的浏览器并继续。 （如果我错了，请告诉我任何人，我会很高兴。）
#5
2
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中被击中！
#6
0
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（最后）。