Typescript – Debugging TypeScript code with Visual Studio

typescriptvisual 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?

Best Answer

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.

Related Topic