3

I'm developing a small Angular app and I'm trying to debug it in Chrome DevTools. However, I can only see .ts files there.

How can I see and debug the .js files that .ts files compile to?

My 'Enable JavaScript source map' option in DevTools settings is turned on.

Sofia Bo
  • 679
  • 1
  • 10
  • 20
  • 2
    Any particular reason for this need? – Hugo Noro Dec 28 '19 at 11:19
  • you can check this link https://stackoverflow.com/a/50290220/5146848 – Sifat Haque Dec 28 '19 at 11:19
  • 1
    Does this answer your question? [Chrome sources not showing a file that was generated from Typescript and has a source map](https://stackoverflow.com/questions/50278716/chrome-sources-not-showing-a-file-that-was-generated-from-typescript-and-has-a-s) – Reactgular Dec 28 '19 at 11:46
  • did u build source code in JIT mode? This mode will not encoded your code and allow u to debug by browser. – Hoang Subin Dec 28 '19 at 13:26
  • Any particular reason? Well, wanted to debug the .js code + to see what .ts compiles to. And no, unfortunately, links above did not help. I updated my answer with te information from them. – Sofia Bo Dec 28 '19 at 13:26
  • @HoangTranSon, how can I enable that mode? – Sofia Bo Dec 28 '19 at 13:29
  • @SofiaBo Just build source code normally by `ng build` only or u can open `angular.json` and set property `aot` to `false` for your environment build. – Hoang Subin Dec 28 '19 at 13:31
  • Does this answer your question? [Chrome developer tools do not show all JavaScript files any more](https://stackoverflow.com/questions/31862344/chrome-developer-tools-do-not-show-all-javascript-files-any-more) – Christian Aug 27 '22 at 22:05

1 Answers1

9

You need to disable Javascript Sourcemap:

enter image description here

enter image description here

Not in the question but if you need it for the SCSS/CSS files, there is also a CSS source map option there.

Another obscure way to disable it is if somehow do not want to change Chrome's settings and you have control of your server, you can configure it not to generate the source map line, it depends on your server-side generator/compiler. You need to check the documentation to see how it works. The source map line should be at the end of the generated js file and look like this:

//# sourceMappingURL=/path/to/file.js.map

Luke Vo
  • 17,859
  • 21
  • 105
  • 181
  • Thank you for your answer, but that checkbox was checked. So, there might be another reason for that. – Sofia Bo Dec 28 '19 at 13:27
  • 1
    @SofiaBo you need to uncheck it. – wOxxOm Dec 28 '19 at 14:05
  • @wOxxOm when I uncheck it, I do not see any of the .ts files either. – Sofia Bo Dec 28 '19 at 14:29
  • 1
    @SofiaBo yes, that's correct, the JS file should show up. UNLESS (I am speaking generally, didn't work much with Angular) your server already bundle everything in a single js file, in that case, the code is somewhere inside a bundled JS, which you probably want to debug with TS file instead. – Luke Vo Dec 28 '19 at 14:30
  • @LukeVo so probably webpack bundles it and that's the reason? – Sofia Bo Dec 28 '19 at 14:32
  • Yes. One way to find out is to add a `debugger;` line somewhere in your code and see where it shows up when the code is executed. – Luke Vo Dec 28 '19 at 15:21
  • I do appriciate your answer! Thank you. I've been struggling debugging with that crooked code for couple months until now! Just one tick is enough to see clear code. – Григорий Jul 06 '21 at 16:47