Debugging TypeScript in Visual Studio (assets served with Cassette)

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

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

In my situation I'm using Cassette ( http://getcassette.net/ ) 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 *.js.map 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:

//@ sourceMappingURL=Index.js.map

However, I've no clue what this is for. Any idea of good places to look for info on this?
Coordinator
May 20, 2013 at 4: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 5: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 Index.js.map 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 9: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:

https://github.com/andrewdavey/cassette/issues/320#issuecomment-18488766

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 .js.map file.
  2. Cassette would need to amend the .js.map 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!