TypeScript - "debugger;" statement does not work while working with QA Environment in Angular

Question

I am working on a angular application with a setup of various environments. I am facing issues when I am trying set up some debug points using debugger;

I am using ng serve -o --webconfiguration==qa to compile node_modules run the server.

However, when I use ng serve -o debug points are hit.

How do I set up my application to hit debug points while working with QA Environment

Here's my configuration - Angular CLI Version - 7.3.8 Node Version - 10.15.3 NPM - 6.4.1 TypeScript - 3.1.6

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Media-Service-Status": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/Media-Service-Status",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "qa": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.qa.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "webvenus":{
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.webvenus.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "aliasuat":{
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.aliasuat.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "websaturn":{
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.websaturn.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "localDev":{
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.localDev.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Media-Service-Status:build",
            "port":58911
          },
          "configurations": {
            "production": {
              "browserTarget": "Media-Service-Status:build:production"
            },
            "webvenus":{
              "browserTarget": "Media-Service-Status:build:webvenus"
            },
            "aliasuat":{
              "browserTarget": "Media-Service-Status:build:aliasuat"
            },
            "websaturn":{
              "browserTarget": "Media-Service-Status:build:websaturn"
            },
            "localDev":{
              "browserTarget": "Media-Service-Status:build:localDev"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Media-Service-Status:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "Media-Service-Status-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "Media-Service-Status:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "Media-Service-Status:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "Media-Service-Status"
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/",
    "inlineSourceMap": true,
    "inlineSources": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

I am expecting debugger; statement to work just as it is intended. Any help is greatly appreciated.

Thanks

tjb's answer solves this for me.

Flávio Etrusco
– Flávio Etrusco

2021-10-20 21:40:14 +00:00
Commented Oct 20, 2021 at 21:40 — Flávio Etrusco
– Flávio Etrusco, Commented Oct 20, 2021 at 21:40

tjb · Accepted Answer · 2021-04-22 10:43:46Z

7

Don't forget the obvious, if your linter disallows the debugger statement you may have to put in a line to ignore it:

//eslint-disable-next-line
debugger

answered Apr 22, 2021 at 10:43

tjb

11.8k9 gold badges74 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

it3xl Over a year ago

or // tslint:disable-next-line:no-debugger

Prateek Jain · Accepted Answer · 2019-05-08 16:42:53Z

4

debugger statement works only when you have Developer tools open. Use Cmd+Opt+I and select the sources pane. Please refer this for more info.

answered May 8, 2019 at 16:42

Prateek Jain

1,5604 gold badges18 silver badges27 bronze badges

4 Comments

curious_debugger Over a year ago

Of course, I am aware of that !! It does not work with dev tools opened up

Johan Aspeling Over a year ago

xD Chuckled at this reply... Mine is also not being hit, I get this behaviour when optimization is set to true in the angular.json file ("optimization": true) under the configuration

AbdolHosein Over a year ago

@KshitijAnilRangari I was like you! but after a short checking and manipulation of Developer Tools, I found that my Developer Tools Debugging was manipulated by me! And I've forgot about that! When I turned the manipulated situations like Deactivating of Breakpoints to defaults (Activating Breakpoints and so etc.), I got it working! and debugger statement started to work as I expected!

WasiF Over a year ago

@KshitijAnilRangari how you fixed/recovered debugging? Can you please explain it step by step.

Sebastian Castaldi · Accepted Answer · 2022-06-14 19:09:49Z

2

It is a good thing that you don't enable debugger; in your QA or PROD environments, for your local or dev environment in angular.json you can change:

optimization: false

if you really need to debug QA then go ahead and change the flag

edited Jun 14, 2022 at 19:09

answered Jun 14, 2022 at 16:39

Sebastian Castaldi

9,1333 gold badges36 silver badges25 bronze badges

Collectives™ on Stack Overflow

TypeScript - "debugger;" statement does not work while working with QA Environment in Angular

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related