One of my favorite F12 under appreciated tooling features is tracepoints and I want to look at how to simulate it in Chrome's dev tools.
Source Maps for TypeScript
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,
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
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.