I have a file that is dynamically loaded by sapui5 as a controller. I have altered my code so that I can leverage Typescript for Intellisense and fault detection.

My JS file is successfully created, and runs correctly in Chrome. The DevTools/Sources/Network window does not list my 'FinalAssembly.controller.js' file, nor does it list the similarly named 'FinalAssembly.controller.ts' file.

I have found that if I remove the '//# sourceMapURL=' line from the bottom of my file, Chrome will eventually list my JS file.

I had read that use of the '//# sourceURL=' line at the top of my file would cause my file to be listed, but it wasn't, further, I read that use of this directive should allow me to vary the name that is displayed in the Sources list, it doesn't. It appears that Chrome is ignoring this directive.

As of today, Chrome indicates that it is up to date at version 66. I have read lots of articles and Github issues over the last 4 hours that indicate that Source Maps tend to be problematic and can fail in some versions of Chrome.

The map file itself works in Internet Explorer, but I can't really see myself developing with that.

Has anybody debugged JS with a Source Map in Chrome 66? Can anybody suggest how I can debug my map file usage in Chrome?

I have placed a very simple test created via VSCode (tsc.exe) at my website: .htm - on my Chrome 66 this one doesn't seem to download the map file at all (Fiddler didn't see any request for that). Doesn't show any TS view of the code. This is not a dynamically loaded library as per my original problem, but does show that there is a problem.

I have a file that is dynamically loaded by sapui5 as a controller. I have altered my code so that I can leverage Typescript for Intellisense and fault detection.

My JS file is successfully created, and runs correctly in Chrome. The DevTools/Sources/Network window does not list my 'FinalAssembly.controller.js' file, nor does it list the similarly named 'FinalAssembly.controller.ts' file.

I have found that if I remove the '//# sourceMapURL=' line from the bottom of my file, Chrome will eventually list my JS file.

I had read that use of the '//# sourceURL=' line at the top of my file would cause my file to be listed, but it wasn't, further, I read that use of this directive should allow me to vary the name that is displayed in the Sources list, it doesn't. It appears that Chrome is ignoring this directive.

As of today, Chrome indicates that it is up to date at version 66. I have read lots of articles and Github issues over the last 4 hours that indicate that Source Maps tend to be problematic and can fail in some versions of Chrome.

The map file itself works in Internet Explorer, but I can't really see myself developing with that.

Has anybody debugged JS with a Source Map in Chrome 66? Can anybody suggest how I can debug my map file usage in Chrome?

I have placed a very simple test created via VSCode (tsc.exe) at my website: http://www.ia.uk./TypescriptTest/default.htm - on my Chrome 66 this one doesn't seem to download the map file at all (Fiddler didn't see any request for that). Doesn't show any TS view of the code. This is not a dynamically loaded library as per my original problem, but does show that there is a problem.

• javascript
• typescript
• google-chrome
• sapui5

• Can you try put debugger keyword into TypeScript source file in code you are sure is executed? When DevTools are active it should break on that line and show you code via source map. – ahz Commented May 10, 2018 at 18:09
• When I try that without sourceMappingURL=, I get the filename in Sources, but that happens anyway. With sourceMappingURL=, the debugger stops, but the file tab says something like "VM539" (the number varies). There is no file in Sources, but the sourceMappingURL directive has been filled out to an absolute path, so it was clearly processed by the browser. – Mark Rabjohn Commented May 11, 2018 at 8:15
• 1 Well that's weird. Just in case, are you sure you have source maps enabled? And what tooling are you using to create source maps? – ahz Commented May 11, 2018 at 8:48
• The tool that created the troublesome app was VS2017, I think however that the problem that I'm seeing is with Chrome - I've added a very simple example that shows that Typescript debugging is not working even when scripts are not dynamically loaded. Does this work for you? – Mark Rabjohn Commented May 11, 2018 at 9:35
• 1 A colleague ran this in his Chrome 66 and the test.ts file appears alongside test.js, and debugging works, so I'm going to uninstall/reinstall Chrome. – Mark Rabjohn Commented May 11, 2018 at 9:40

3 Answers 3

It turns out that DevTools has it's own set of settings. The preferences tab has a "Enable Javascript Source Maps", which was switched off in my copy. I don't recall ever being in that screen, but obviously this box got unchecked.

For normal JS files as in my small example, both JS and TS files are displayed. When the file is dynamic, only the TS file is displayed. This means that if maps are disabled, you get nothing (because the JS file isn't displayed).

Just open devTools and reset the browser.

Make sure your Angular app is up.

If your Angular app is not up, then you can't see the .ts file in Chrome. So you need to first run the Angular app.