Debug Production Angular applications

If you have ever developed an Angular app, you would know that debugging production Angular applications is not possible. You can’t read the code because of uglify. Even prettify don’t help much. The reason is that in production builds, ng command removes all the source map files(The ones which are ending with .map).

Luckily, there is a hack to Add sourceMap to your production Angular apps and hence enabling debug capabilities:

Prerequisites

You must have the exact code base of the angular application you want to debug.

Here are the steps:

1. In angular.json file, update sourceMap key

// on Angular 8 or up
"configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": {
                "hidden": true,
                "scripts": true,
                "styles": true
              },,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }

2. Save the file and create new build using

 ng build --prod

3. Locate the dist folder and you will find that sourceMaps are now generated. Copy the file path for main.xxxxxx.js.map

4. Now in chrome, Go to your Production app. Open the chrome debugger and then under sources, open main.xxxxx.js file.

5. Right click on the empty space in the source panel and you will find the option to Add Source Maps. Click on it and paste the copied path and Done.

6. Now, you should be able to see webpack:// in the left section of the chrome debugger. under src you will find complete source code of your application.

Happy Debugging:)

Leave a Reply

Exit mobile version