Debugging TypeScript code with Visual Studio

问题:

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?

回答1:

Update as of VS 2017:

VS2017 now works to debug typescript directly in Visual Studio, just like if you debugging c#. See my answer below.

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:

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.

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.

回答2:

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.

回答3:

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

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

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

回答4:

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)

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

   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 Explorer as 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 breakpoints in your ts code inside Visual Studio now or later.

   Hit 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.)

回答5:

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!

回答6:

short answer: Restart 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).