angular 12 application debugging using visual studio code editor with firefox

Question

I am trying to debug angular 12 application using visual studio code editor. i have firefox on my laptop. Below launch.json and tasks.json files are in .vscode folder.

Somehow application server is not getting started and debugger is not getting attached to code. Am I missing something?

launch.json

{
  "version": "0.2.0",
  "configurations": [
    { "name": "npm start",
      "type": "firefox",
      "request": "launch",
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceRoot}",
      "firefoxExecutable": "/Applications/Firefox 2.app/Contents/MacOS/firefox",
    },
  ]
}

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "start",
            "problemMatcher": [],
            "label": "npm: start",
            "group": {
                "kind": "build",
                "isDefault": true
              }
        }
    ]
  }

Chris · Accepted Answer · 2021-11-24 10:23:08Z

0

These are my configurations, I also left some comments in the configurations:

launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "firefox",
      /**
       * you can use custom profile in firefox
       */
      "profile": "kryshac",
      "request": "launch",
      /**
       * you can use the previous instance of firefox if is not closed
       */
      "reAttach": true,
      "name": "Firefox",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "internalConsoleOptions": "openOnSessionStart",
      /**
       *  preLaunchTask is for opening the tasks
       */
      "preLaunchTask": "npm: start",
      /**
       *  pathMappings is for mapping libraries to the correct path
       */
      "pathMappings": [
        {
          "url": "webpack:///projects/app-dashboard/src",
          "path": "${workspaceFolder}/projects/app-dashboard/src"
        },
        {
          "url": "webpack:///dist/projects/helpers",
          "path": "${workspaceFolder}/projects/helpers"
        },
        {
          "url": "webpack:///dist/projects/auth",
          "path": "${workspaceFolder}/projects/auth"
        },
        {
          "url": "webpack:///projects/dashboard",
          "path": "${workspaceFolder}/projects/dashboard"
        }
      ]
    }
  ]
}

tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      /**
       *  label is the name of the task
       */
      "label": "npm: start",
      "detail": "ng serve --host 0.0.0.0 --port 4200",
      "type": "npm",
      "script": "serve",
      "isBackground": true,
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "fileLocation": [
          "relative",
          "${cwd}"
        ],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            /**
             *  this is the pattern when the task is finished
             */
            "regexp": "Compiled |Failed to compile."
          }
        }
      }
    }
  ]
}

project structure:

root
└── projects
    ├── app-dashboard
    │   ├── src
    │   │   └── ...
    │   └── ...
    ├── helpers
    │   ├── src
    │   │   └── ...
    │   └── ...
    ├── auth
    │   ├── src
    │   │   └── ...
    │   └── ...
    └── dashboard
        ├── src
        │   └── ...
        └── ...

edited Nov 24, 2021 at 10:23

answered Nov 24, 2021 at 9:51

Chris

2,45616 silver badges23 bronze badges

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

5 Comments

vrreddy1234 Over a year ago

Thanks for your comment. I tried running debugger using your files, i see angular development server started and hosted application at 4200 port, and i could see app at localhost:4200; now i cannot do step by step debugging, i enabled breakpoints at certain lines in code, they are not getting hit. Is there something i have to do for step by step debug within source code. please suggest.

Chris Over a year ago

can you put a breakpoint in AppComponent in the constructor?

Chris Over a year ago

@vrreddy1234 it was a problem that I had no path to the application I edited launch.json, can you add the structure of your project?

vrreddy1234 Over a year ago

Somehow the display of below structure is not looking good as its plained out after i save it.. I plan to put breakpoint inside tree-list-component.ts file. ``` project_name ├── src |── app (folder containing below) └── tree-list (folder containing component files) ├── app.component.html │── app.component.ts │── app.module.ts ├── dist (output folder containing bundled js files) ```

vrreddy1234 Over a year ago

The structure of my project is standard angular project which gets created with ng new. I just added one component using ng g c component command. I am trying to put breakpoint inside component ts file and do step by step debug.

Collectives™ on Stack Overflow

angular 12 application debugging using visual studio code editor with firefox

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related