Have you heard of Source Maps? Source Maps are an idea that has come out of Mozilla for addressing the debugging issues that are raised by *-to-JavaScript compilers and JavaScript minifiers, the problem is that when you use these you ultimately aren’t debugging what you wrote.
Take TypeScript for example and the improved version (original) of the PubSub from yesterday, we’ve got a problem, the code is quite different to what we’d be running in the browser. This is a big problem as if you’re not familiar with JavaScript, or at least not comfortable with the language nuances, you’ll quickly get lost and make a royal mess of what you’re writing.
Source Maps for TypeScript
Intelligently the TypeScript team have already done the hard work for us, there’s a Source Map generator in the compiler (thanks Ryan for pointing it out)!
So how do you use it? If you do a help dump of tsc
(the TypeScript compiler) there’s nothing in it:
D:\Code> tsc -h
Syntax: tsc [options] [file ..]
Examples: tsc hello.ts
tsc --out foo.js foo.ts
tsc @args.txt
Options:
-c, --comments Emit comments to output
--declarations Generates corresponding .d.ts file
-e, --exec Execute the script after compilation
-h, --help Print this message
--module KIND Specify module code generation: "commonjs" (default) or "amd"
--nolib Do not include a default lib.d.ts with global declarations
--out FILE Concatenate and emit output to single file
--target VER Specify ECMAScript target version: "ES3" (default), or "ES5"
@<file> Insert command line options and files from a file.
Well good news everybody, that’s not listing all the compiler switches ;). Check out the batchCompile
method for a bunch of gems, but most importantly there is a sourcemap
switch, so if I take my little project:
D:\Code\typescript-pubsub> tsc -sourcemap pubsub.ts
Now you’ll have two files, pubsub.js
and pubsub.js.map
and the output JavaScript file will also contain the source map pointer:
//@ sourceMappingURL=pubsub.js.map
Sweet! Let’s open the HTML file in Chrome Canary (of which I’ve already enabled Source Maps) and we get some cool new debugging stuff:
You can find your .ts file in the sources list.
I’ve break pointed inside of TypeScript!
Inspecting variables in TypeScript
Conclusion
The fact that there was enough forward planning from the TypeScript team to include support for Source Maps in the initial release is a really great thing. Through the magic of Chrome we can debug code written in it as through it was our original code. If you want have a play here’s the code.
Hopefully either the Visual Studio or IE (or both) team also pick up Source Maps and add support for them too.
Happy cross-compiling.