Debugging TypeScript transpiled in the browser using WebStorm

[kawazoe]

There seems to be an issue with this plugin that causes the WebStorm's ability to debug TypeScript code to break because it uses invalid file names as source files.

One of the neat features of this plugin is that it makes it easy to differentiate the final file from the original source by appending the !transpiled string at the end of the source file name. Since the bang character has no special meaning in a URL, the debugger will also include it when trying to load the original source file. This means that for a source file named foo.ts, it will get transpiled to foo.js with a source map of foo.ts!transpiled. WebStorm will then attempt to load a file called foo.ts!transpile which does not exists on the disk and will fail to map breakpoints to the TypeScript code.

As a workaround, I currently use the remote debugging feature of WebStorm which lets me specify a remote URL to load the files. I configured it to use my local web server. This server is setup to strip the !transpiled part of all requests and will then return the original file instead. This is very convoluted and I feel there might be a better way to fix this issue.

Would it be possible to use the # character instead of a ! to annotate the file name? I believe that since a # is a standard URL character with a semantic that prevents it to be sent to the server, debuggers would simply ignore the suffix and work as expected.

[frankwallis]

The !transpiled extension is being added by SystemJS, so I think you need to raise this issue over there.