Debugging dynamically loaded Javascript being generated from TypeScript in Chrome

Question

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.

Answer 1

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:

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.

Answer 2

I am writing to affirm what WhyMe wrote. Appending tag to using jQuery.append() does not add filename to sources tree, but using DOM element to .appendChild DOES add filename to sources tree.

var fileref = document.createElement('script');
                    fileref.setAttribute("type", "text/javascript");
                    fileref.setAttribute("src", 'Scripts/app/Views/Management/Spock.js');
                    document.getElementsByTagName("head")[0].appendChild(fileref)

Spock.js will be in the correct folder in Sources tree.

Using //# source=Path_to_file works, but A. must have the pathing correct, and B. filename appears under <No Domain>; which is really ugly.

PS - I do not have 50 reputation points, so I cannot reply as a comment next to WhyMe's comment, but I can add an Answer?

Answer 3

$.getScript would probably load the file using xmlhttp and adding the javascript later to the DOM thus the browser cannot map the javascript to the js breakpoint

Requirejs adds a script tag with a src attribute so the browser can still hit the breakpoints