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.

Beans · Accepted Answer · 2014-03-22 02:57:50Z

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?

answered Mar 22, 2014 at 2:57

Beans

1,26910 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jude Fisher · Accepted Answer · 2013-03-17 10:59:37Z

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:

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.

answered Mar 17, 2013 at 10:59

Jude Fisher

11.3k9 gold badges56 silver badges92 bronze badges

4 Comments

mgs Over a year ago

Do you know why loading the files via require.js solves the problem? What does require.js do better than $.getScript?

Jude Fisher Over a year ago

I don't know, sorry - I'm not even certain require.js doesn't use the same mechanism as $.getScript under the hood. All I can guess is that getScript means the path somehow changes, so the links from the .js file to the .ts and the .map are lost. You could try manually editing them so they are absolute paths, or relative to the html page, and see if that helps.

mgs Over a year ago

Thanks a lot for the answer. I looked at other Javascript loaders, and they were also able to dynamically load the Javascript in a way, so debugging is possible in Chrome.

WhyMe Over a year ago

I loaded the JS script once using $('head').append(...) and once using $.('head')[0].appendChild(..). The first did not allow me to debug the script but the second did. Hope that helps.

Saqib Shakil · Accepted Answer · 2013-09-29 08:46:38Z

0

$.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

answered Sep 29, 2013 at 8:46

Saqib Shakil

1111 silver badge4 bronze badges

Collectives™ on Stack Overflow

Debugging dynamically loaded Javascript being generated from TypeScript in Chrome

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related