Debugging TypeScript code with Visual Studio

by

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.

More Related Contents:

  1. Cross-project references between two projects
  2. Create a new TypeScript project in Visual Studio
  3. Where can I find the TypeScript version installed in Visual Studio?
  4. How can I publish my Tizen app from Xamarin forms visual studio 2015
  5. How do I install a NuGet package .nupkg file locally?
  6. Visual Studio 2010 always thinks project is out of date, but nothing has changed
  7. Visual Studio: How to break on handled exceptions?
  8. What are the differences between Visual Studio Code and Visual Studio?
  9. Visual Studio 64 bit?
  10. Configure IIS Express for external access to VS2010 project
  11. Command to collapse all sections of code?
  12. Visual Studio 2015 or 2017 shows IntelliSense errors but solution compiles
  13. What is the difference between Release and Debug modes in Visual Studio? [duplicate]
  14. Call C standard library function from asm in Visual Studio
  15. How to tell if .NET code is being run by Visual Studio designer
  16. Visual Studio Solutions Folder as real Folders
  17. Packages not loading after installing Visual Studio 2015 RTM
  18. Can I hex edit a file in Visual Studio?
  19. What does “Optimize Code” option really do in Visual Studio?
  20. Group files in Visual Studio
  21. Tool to view the contents of the Solution User Options file (.suo)
  22. Save all files in Visual Studio project as UTF-8
  23. How can I run NUnit tests in Visual Studio 2017?
  24. Visual Studio: Re-enable “Build failed, run last success?” dialogue box
  25. LINK : fatal error LNK1104: cannot open file ‘D:\…\MyProj.exe’
  26. Error: Failed to generate a user instance of SQL Server
  27. An error occurred building visual studio cordova app using multi-device-hybrid-apps
  28. About the “Character set” option in Visual Studio
  29. debugging with visual studio using redirected standard input
  30. Structuring projects & dependencies of large winforms applications in C#

Leave a Comment