Debug production angular application

Angular
1

Debug production angular applications

1 Like
2

Prerequisites to debug your production Angular app:

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

Here are the steps:

  1. Open the angular.json file and update the sourceMap key. If you’re using Angular 8 or newer, the following configuration should work:
// 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
            }
          }
  1. Save the changes to the file, and then create a new build using the following command:
 ng build --prod

  1. Once the build process completes, locate the dist folder, and you will find that source maps are now generated. Copy the file path for the main.xxxxxx.js.map file.

  2. In Google Chrome, go to your production Angular app and open the Chrome debugger. Then, under the Sources tab, open the main.xxxxxx.js file.

  1. 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.

  1. After following the above steps, you should now see “webpack://” in the left section of the Chrome debugger. Under the “src” directory, you will find the complete source code of your application.

In conclusion, debugging production-ready Angular applications can be challenging because of the obfuscated code that Uglify generates. However, by following the steps mentioned above, you can add source maps to your production Angular apps and enable easy debugging. Remember, it’s crucial to have the exact code base of your Angular application to ensure successful debugging.

1 Like