Chrome Debugging Shows JS files Instead of TS

[justme1]

Hi,

First of all great tutorial!

Secondly, I'm having a small issue with chrome debugging. If I clone your project everything works fine - even when I debug in Chrome I can see the .ts files when debugging.

However, if I first open the project in Webstorm then Webstorm creates for each of the .ts files a .js file which causes Chrome to display the .js files and not the .ts files.

If I remove the generated .js files Webstorm creates I can see the .ts files when debugging in Chrome.

Why is the creation of the .js files causes this problem to Chrome showing the .js files and not the .ts files?

Thanks!

[ghost]

Hello, I'm glad you like the project. @schempy did a great job.

That's a peculiar issue you are running into. I don't have an answer to your question, but will try to provide some insight and hopefully point you in a better direction.

As far as Webstorm is concerned, I don't use it anymore because I don't fully understand how it works, don't care how it works, and wanted to just use the text editor + command line combo. I do know that Webstorm caches a bunch of files, and this affects the built-in CLI to a certain extent. For instance, in the past I ran my unit tests with karma inside of Webstorm, and after running a couple of iterations I kept seeing the same result even after I changed a file to log something else. I don't know exactly what it caches or the maximum size of the cache. I wrote a script to delete everything in the cache that would run from time-to-time. That doesn't mean it's a bad IDE,;it just means I didn't know how to take full advantage of it.

It sounds like you are using Webstorm to transpile your TypeScript files. There are project-specific npm scripts that take care of transpiling your ts into two js files (one for dependencies and one for your app). If you really want to look at the js for each ts file, then have at it, but just know that it's not needed.

Now, to answer your question: I have no idea :(. Perhaps Chrome uses a "rule of specificity" for displaying files in the debugger. So, since js is a subset of ts, then it only displays the js if both are present... I really have no idea. To me it sounds more like a Chrome debugger issue rather than a Webstorm or TypeScript issue, but that's just my two cents.

Sorry I can't be of much help.

[justme1]

Thanks you very much for your answer - I really appreciate it!

For now I simply removed the files and made sure that this are set:
"compileOnSave": false,
"buildOnSave": false

Since I did that the files weren't generated and everything works smoothly.

Hope it will stay like this - it's really fun!

Thanks again!

[justme1]

Check this out:

webpack/webpack#2404

This issue was with the ordering of extensions: ['', '.ts', '.js'],

Thanks again!

[ghost]

Ah, I didn't think order mattered. Nice catch!

[hermanfransen]

In Webstorm, go to "Preferences" -> "Languages & Frameworks" -> "Typescript".
Here you can disable the typescript compiler.

If you keep in tsconfig.json:
"compileOnSave": false,
"buildOnSave": false

Then WebStorm won't compile anymore even if you enabled automatic typescript compiling.

(You can also change the "default settings" for typescript compile behaviour for every new project)

[ghost]

This issue has been resolved and is safe to close.