Search code examples
javascriptangulartypescriptgoogle-chrome-devtoolsdevtools

Chrome DevTools do not show .js files

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.

Solution

  • 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