This project is read-only.

Debugging TypeScript in Visual Studio (assets served with Cassette)

Topics: General
May 20, 2013 at 6:18 AM
Hi All,

Are you aware of any good resources around debugging TypeScript in Visual Studio?

In my situation I'm using Cassette ( ) to serve up my JavaScript to the browser - and maybe that's causing the issue. The JavaScript I'm serving has been generated by my TypeScript. But for the life of me I've got no joy in getting Visual Studio to allow me to debug the TS when serving

I'm wondering if I need to be serving up the * files as well? I've tried it but it just generates errors. (Fair enough - they're not legitimate script files I guess). I can also see the following statement being generated which is map related:


However, I've no clue what this is for. Any idea of good places to look for info on this?
May 20, 2013 at 5:01 PM
The debugging support in TypeScript uses the source map format that a number of JS tools support, including browsers like Chrome as well. The .map file maps from the output .js file back to the original .ts file. If Visual Studio can't access the .map file, it won't be able to successfully debug directly on your original TS files.

By default, a new TypeScript HTML5 project will create a .map file as part of a debug build. If you're using your own project not based on that template, you'll need to enable source map output yourself using the "--sourcemap" commandline option.

I'm not familiar Cassette, though as you describe it may be introducing a layer of abstraction that's not compatible with the VS plugin. It may be worth trying a simpler setup first to see if you can have success with that.
May 21, 2013 at 6:33 AM
That's a little frustrating. I'm generating the map files and bundling them with Cassette but Visual Studio isn't picking up on it. I have this:

<script src="/cassette.axd/asset/Scripts/Views/Home/Index.js?82d036dfdf39db3e4f486a9402dca05e83af0e03" type="text/javascript"></script>

And behind the scenes and Index.ts can be found too. However, no joy with the TypeScript debugging. This is a shame as the project I'm working on has a heavy reliance on Cassette. Not sure what to do... I could just rely on the JS debugging I suppose.
May 27, 2013 at 10:09 AM
Hi @JonTurner,

I've been doing a little investigation on how we could get TypeScript debugging to work with Cassette. We've got a potential approach outlined at the end of this comment here:

Which to save you a click essentially says:

"... so my guess is that the VS debugger would hopefully play nice with Cassette if Cassette performed the following actions when serving in debug mode:
  1. Cassette would need to amend the sourceMappingURL property of the generated JavaScript to point to the location of where Cassette was hosting the file.
  2. Cassette would need to amend the files file / and sources properties to reflect the location of where Cassette was hosting the .js and .ts files"
I don't suppose you'd know if the approach outlined above would likely work?

I've been looking for some good documentation out there on how the Visual Studio Source Map debugging tooling works to confirm my theory but come up with nothing so far. Any comments appreciated!