New tool to step through TSC compiler in browser

Topics: General
Nov 27, 2012 at 10:43 PM
Edited Nov 28, 2012 at 12:27 AM

I've created a simple tool that helps debugging the standard TSC compiler using browser's Developer Tools (F12).

Source code is forked as browserIOEmulation.

And the demo is on GitHub pages.

 

There are several uses for this tool.

  • Step through the standard official TSC compiler to see how individual parts of it work together.
  • Verify that TS compiler and language services are compatible with a broad set of JS engines.
  • Assess performance of the compiler on a broad range of engines/devices.

So far I've tested it on a whole bunch of browsers and devices, and it works everywhere.

The TSC in the demo is re-compiled from source with --sourcemap and --comment flags, to aid step-through. The official TSC.js verbatim from /bin works just as well.

The emulation layer is done by injecting Node.js-like variables in the global scope before <script src='tsc.js'> tag. That is actually enough to trick TSC into running within browser.

The UI is pretty trivial and the code handling UI is quick-and-dirty version. But you can create files in 'virtual filesystem' and provide custom command options. Both the output and the resulting files are accessible.

This is the list of devices I've tested it so far:

  • Chrome 23 on Win8
  • Chrome Canary 25 on Win8
  • Opera 12 on Win8
  • FireFox 17 on Win8
  • IE10 on Win8 (both desktop and Metro)
  • Safari on iPhone 2G on iOS 3
  • Android browser on Galaxy Note
  • Chrome mobile 18 on Galaxy Note
  • Built-in browser in Blackberry 7.1
  • IE6 on WinXP
  • IE8 on Win2003

Update: there were a couple of problems with browsers in this list, but all minor and I fixed them in an hour or so.