Debugging TypeScript in Firebug

Question

Is there any instruction on debugging typescript in Firebug and / or the Firefox built-in js debugger? Something like , but for Firebug and / or Firefox

Answer 1

Firefox Developer Edition lets you debug TypeScript code. The only thing missing is the syntax highlighting.

Answer 2

Chrome canary supports this: http://www.aaron-powell.com/web/typescript-source-maps

Answer 3

Firebug is tightly integrated with the Javascript engine for Firefox. While Firefox or Firebug do not support Typescript, I think you're out of luck.

There is AceBug for Coffeescript , which offers Coffeescript debugging support. It should be possible to extend this to TypeScript. However, the structure of the Typescript source and compiled Javascript can be completely different, so the compiler will need to insert debug symbols to associate Javascript with TypeScript.

Answer 4

Firebug version 3.0 is designed to run on top of the built-in debugger in Firefox. This means that it also uses source map support, so .ts files load correctly.

You can try out the preliminary versions from http://getfirebug.com/releases/firebug/3.0/

Answer 5

The current version of Firebug (2.0.13 + FF43) seems to debug typescript just fine. At least it has worked for me so far.

On the web page, you add a “compiled” .js with a link to the source map. I.e.

<script src="register.js"></script> 

And Firebug will show you the register.ts file instead in the script list.

Make sure your tsconfig.json has source map generation:

 "compilerOptions": { ... "sourceMap": true },