How to debug Angular in prod server?

Question

In the development environment I can debug with the Chrome source tab , but in the prod server I use the dist folder content after running ng build --prod. This

Answer 1

Debugging production build without revealing source maps can be done easily.

You just have to attach your source map from a local or remote server to your production build.

Approach and Concept:

1. Build app without sourcemaps for production deployment

   ng build YOURAPP --prod

2. Deploy production build to your webserver

3. Build app again, this time with sourcemaps option

   ng build YOURAPP --prod --sourceMap

4. Attach sourcemap in your local development environment to your production build in the F12-Development Tools in your browser

Then debug as you are used to do. This way you can even reference sourcemaps from remote devices. For example if you are inspecting a web app on your mobile device (e.g. chrome android) Very useful to detect platform specific behaviour for your apps.

And the best, your sourcemaps never have to be revealed on a public server. They are always kept safe in your development environment.