Search code examples
debugginggoogle-chromedynamictypescriptgetscript

Debugging dynamically loaded Javascript being generated from TypeScript in Chrome

With VS 2012, Web Essentials, TypeScript 0.8.3

There is a TypeScript file "test.ts". It is compiled into "test.js", having a sourceMappingURL at its end.

//@ sourceMappingURL=test.js.map

The Javascript file is loaded dynamically with $.getScript. However, when in Chrome Developer Tools I cannot find the source anywhere, so a breakpoint cannot be set.

If I manually edit the generated Javascript by appending a sourceURL, the situation improves.

//@ sourceMappingURL=test.js.map
//@ sourceURL=test.ts

The name "test.ts" is offered in Chrome in the Sources tree. However, clicking on it opens the Javascript file "test.js". There breakpoints can be set and used.

Actually it does not matter, whether the correct name "test.ts" or any other name is coded.

What should be done, so debugging a TypeScript file, whose generated Javascript file was dynamically loaded, is possible with Chrome?

I also tried Canary. It made no difference.

Solution

  • Working in Chrome Canary (25.0.1364.172 m), and using require.js to load scripts dynamically, I can set and use breakpoints on the typescript files:

    enter image description here

    NB that this only works on code which matches some JS output - so (logically enough) you cannot set a breakpoint anywhere inside an interface definition.

    I'm not sure if using require.js for your on-demand script loading is an option. If so, it should fix your problem.