node typescript client-side debug

Question

Is is possible to debug (breakpoints, watches) client-side .ts typescript files from visual studio (2015) directly ? Most of the related issues that I have found on google and stackoverflow suggest using other browser devtools such as chrome. Is it possible to do it in visual studio?

When I create a .ts script (say index.ts), it will be transpiled into a index.js which will then be referenced from the corresponding index.html file in the script tag.

How can I set breakpoints in the .ts file (although it is the .js which is referenced?)

Answer 1

It is possible with IE. You have to set "Browse with" to Internet Explorer and in the project properties/web unchecked all debuggers. Than you should be able to debug client-side TS in VS.

Answer 2

I figured out that I can debug in visual studio but launching aa new debug session from internet explorer: menu->view->external script debugger which will start a new visual studio ide with all my files (.js and .ts mapped) loaded. I just have to make sure that the .js and .ts files are in the same directory (example: ./public/js/ ). It is not a perfect solution (for example bringing the cursor over a variable does not show the variable value. You must manually open the watch window...) But it allows me to step through my .ts files thus keeping a unified development environment: typescript with node.js on the server, typescript on the client-side within the same solution

Answer 3

You might try with this HTML Application with TypeScript project template from Web Essentials 2015 extension, as suggested in this post from Telerik blog.

If that works, it seems just a matter of usual VS scenario "set breakpoint; hit F5".