26

By default (and hopefully it's not the only option) when I have a ts file, Chrome only lets me debug the ts code. I.e it does show me the content of both the ts and js files, but when I try to put a break-point in the js file, it immediately transfers me to the ts file and locates the break-point in the right place.

How can I tell Chrome to debug the js file rather than the ts one?

Alon
  • 10,381
  • 23
  • 88
  • 152
  • 4
    maybe you can remove the sourcemaps? I asume those are generated automatically so try to turn them off from tsconfig.json – toskv Jul 06 '16 at 12:13
  • @toskv I don't use tsconfig. Do you know how to do it with command line options? – Alon Jul 06 '16 at 15:52
  • You could try disabling JS sourcemaps in the Chrome developer settings. Open the developer tools, then its settings. You should see an "Enable JavaScript source maps" option. Try disabling this. – Noah Freitas Jul 06 '16 at 20:41
  • @Noah Freitas it works! Please rewrite this as an answer and I'll mark it as the accepted answer. – Alon Jul 06 '16 at 21:08

3 Answers3

32

Since you don't have control over the TS compilation settings, you can disable JavaScript source maps all together in Chrome.

Load the developer tools (Chrome Menu > More Tools > Developer Tools), then load the developer tool settings (Developer Tools Menu > Settings), find the setting for "Enable JavaScript source maps" and disable it.

Noah Freitas
  • 17,240
  • 10
  • 50
  • 67
3

If you are in development mode, you should have source mapping between the TypeScript and the transpiled JavaScript. For debugging, you would put breakpoints on the TypeScript code in DevTools, as that is the code you wrote it in. It makes sense to debug the code you wrote.

If you want to debug only the JavaScript, run the application in the deployed mode (no source map), and set the breakpoint on the resulting JavaScript code.

Gideon Pyzer
  • 22,610
  • 7
  • 62
  • 68
  • How do I run the application in deployed mode? I don't have a tsconfig file. I use command line options instead. – Alon Jul 06 '16 at 19:47
  • @Alon I don't know your set up. I haven't used TypeScript either, but [Webpack](https://webpack.github.io/) or similar can handle developer vs release builds. You can have a config file for each. – Gideon Pyzer Jul 06 '16 at 20:06
0

I assume you are using tsc to compile.

If so, there is a simple parameter that will tell tsc to not create source maps and hence not include the # sourceMappingURL=... directive:

tsc --sourceMap false
Daniel Puiu
  • 962
  • 6
  • 21
  • 29
Bill White
  • 1