How to debug

Step 1

To debug the application we must have the project configured. Check that the following lines of code exist in the angular.json file.

angular.json

{
  "projects": {
    "samples": { 
      "architect": {
        "build": {
          "configurations": {
          ---------------------------------------
            "debug": {
              "sourceMap": {
                "vendor": true,
                "scripts": true
              },
              "optimization": false,
              "outputHashing": "all",
              "namedChunks": false,
              "aot": false,
              "extractLicenses": false,
              "vendorChunk": false,
              "buildOptimizer": false
            }
          ---------------------------------------
          }
        },
        "serve": {
          "configurations": {
            "production": {
              "browserTarget": "samples:build:production"
            },
          ---------------------------------------------
            "debug": {
              "browserTarget": "samples:build:debug"
            }
          ---------------------------------------------
          }
        }
      }
    }
  }
}

Also verify that you have the following scripts in the package.json file.

package.json

{
  "scripts": {
    "start": "ng serve",
    "debug": "ng build -c debug"
  },
}

Step 2

Now simply run the command "npm run start", this starts a local development server for your application. You should see an application similar to this:

Step 3

To debug the application you need to open DevTools, to do this just press the key combination "Ctrl + Shift + C", you should be seeing something like this:

Step 4

Finally, just go to the Sources Panel. If you press the key combination "Ctrl + P" you can open the file you want to debug.

You can now add breakpoints in your files and debug the application.

If you need to debug a build project, just run the command "npm run debug" instead of "npm run build", and repeat the steps starting from number 3.