How to debug Angular with VSCode?

Question

How do I get configure Angular and VSCode so that my breakpoints work?

@TylerH, It should be a guide how it works. it does not work without modified launch.json. — Asesjix, Feb 27 '17 at 22:11
To start `ng serve` in background see answer here: [link](https://stackoverflow.com/a/61864986/5770014) — minus one, Feb 04 '21 at 10:41
On this point angular is a mess, horrible first contact with application, you cant simply use the PLAY & DEBUG from you Vscode, because the hippies think Command LINE is FASHION, so if you want simply just run or debug or attach your project, but NO! You have to use CLI + create.json+ create more stuff. Consider the version you are using so configurations you are seeing is going to work. they could even add a simple launch,json when we create the project, but why should they make the developer experience better? Just put more CLI! sh..... — darthRodolfo, Feb 24 '21 at 19:29

score 201 · Accepted Answer · edited Aug 04 '21 at 13:43

Tested with Angular 5 / CLI 1.5.5

Install the Chrome Debugger Extension
Create the launch.json (inside .vscode folder)
Use my launch.json (see below)
Create the tasks.json (inside .vscode folder)
Use my tasks.json (see below)
Press CTRL+SHIFT+B
Press F5

launch.json for angular/cli >= 1.3

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (Test)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (E2E)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/protractor.conf.js"]
    }
  ]
}

tasks.json for angular/cli >= 1.3

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

Tested with Angular 2.4.8

Install the Chrome Debugger Extension
Create the launch.json
Use my launch.json (see below)
Start the NG Live Development Server (ng serve)
Press F5

launch.json for angular/cli >= 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

launch.json for angular/cli < 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Lunch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      },
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}

do you know how to start `NG Live Development Server` and then launch `Chrome` in just one `F5` click? — Merdan Gochmuradov, Apr 17 '17 at 06:53
sorry that is not possible because the task "ng serve" would have to be started in the preLaunchTask. "ng serve" must be running permanently and thus the "preLaunchTask" is not completed which means that the vs code does not start the debug process. but I have added a new configuration that should make the work a bit faster ;-) — Asesjix, Dec 01 '17 at 09:36
Clear and short answer. It would be good if you could explain in short about `launch.json` and `tasks.json` does here. As I understood `launch.json` is to launch the node server and listen to port 8080, and `tasks.json` instructs to use `npm` and execute command `ng serve` to run the application. — Shaiju T, Feb 12 '18 at 06:36
I had the same problem, breakpoints not being set, until finally I realised that my webroot was wrong. I had the default value for webRoot ("webRoot": "${workspaceFolder}") instead of ${workspaceFolder}/my-app-folder — Joseph Simpson, Jul 10 '18 at 12:26
@MerdanGochmuradov - I found a way however it requires you to run debug, stop, and run again. In launch.json within the chrome launch configuration, include this property: "preLaunchTask": "npm: ngstart", then in package.json within scripts include this property: "ngstart": "cd angular-src/ && npm run start". Now in vscode's debug window, run the script to launch chrome. It will not launch, but it will run 'ng serve' in the terminal. Stop the debug and run it again, and now chrome will launch with the prelaunchtask still running in the terminal. Tip: also use "compounds" in launch.json. — ObjectiveTC, Sep 20 '18 at 02:50
for arguments adding for the angular app, in `package.json` add to `scripts->start` `ng serve --poll=2000 --configuration=dev --host 0.0.0.0 --disable-host-check` for example — Pipo, Jan 27 '19 at 13:41
There are problems with new Angular CLI versions (mine is 7.2.2), see https://stackoverflow.com/a/54883663/706012 — Liebster Kamerad, Feb 26 '19 at 13:04
I think there's something missing here: `"preLaunchTask": "ng test",`: it will automatically launch "ng test" for you in vscode — kolypto, Oct 08 '20 at 23:01
Adding the "attach" object to configuration array inside `launch.json` with `sourceMaps: true` did the trick for me. Thanks a lot. — Sixteen, Aug 26 '21 at 09:45

Levi Fuller · Answer 2 · 2021-08-05T17:10:17.847

Looks like the VS Code team is now storing debugging recipes.

https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome with ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch Chrome with ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceRoot}/protractor.conf.js"]
    }      
  ]
}

skryvets · Answer 3 · 2018-07-03T11:50:20.717

There're two different ways of doing that. You can launch a new process or attach to an existing one.

The key point in both processes is to have webpack dev server and VSCode debugger running at the same time.

Launch a process

In your launch.json file add the following configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Angular debugging session",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Run Webpack dev server from Angular CLI by executing npm start
Go to VSCode debugger and run "Angular debugging session" configuration. As a result, new browser window with your application will be opened.

Attach to an existing process

For that you need to run Chrome in the debugger mode with opened port (in my case it will be 9222):

Mac:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Windows:

chrome.exe --remote-debugging-port=9222

launch.json file will look in the following way:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome Attach",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}"
    } 
  ]
}

Run Webpack dev server from Angular CLI by executing npm start
Select "Chrome Attach” configuration and run it.

In this case, debugger attached to the existing Chrome process instead of launching up a new window.

I wrote my own article, where I described this approach with illustrations.

Simple instruction how to configure debugger for Angular in VSCode

Thank you, every time starting the chrome I have to run this command ```chrome.exe --remote-debugging-port=9222```.Is there any alternative for onetime configuration — Saurabh Gangamwar, Apr 21 '20 at 08:15
Depending on your credentials, you may be able to right click on chrome in the windows start menu, hit properties, and add the flag there. This doesn't work for me on my work computer, so I aliased the command in git bash for windows. — vitale232, Jul 14 '20 at 20:23
@Saurabh47g you can add **chrome.exe --remote-debugging-port=9222** to the desktop chrome icon Steps: - Open your desktop - Right Click on Google Chrome - Click on Properties - paste chrome.exe --remote-debugging-port=9222 in the Target Field — Najim Ali, Mar 17 '21 at 06:26
For me, after this still wasn't working, I have to specify the sub directory that the client was running in. It's an obvious thing to check, but here is what I needed: `"webRoot": "${workspaceFolder}/client",` — M H, Jun 06 '23 at 06:34

score 9 · Answer 4 · answered Apr 24 '18 at 08:02

9

This is explained in detail on the Visual Studio Code site: https://code.visualstudio.com/docs/nodejs/angular-tutorial

answered Apr 24 '18 at 08:02

Victor Ionescu

1,967
2
21
24

1

did you mean https://code.visualstudio.com/docs/nodejs/angular-tutorial#_debugging-angular ? the ·#_debugging-angular points directly to the interesting point if you want to edit your answer... – Pipo Jan 27 '19 at 13:15
@Pipo No, I didn't mean nodejs, I don't use nodejs on the server side, so I wouldn't know. – Victor Ionescu Jan 28 '19 at 14:05

Ahmad Aghazadeh · Answer 5 · 2019-05-13T12:54:43.157

8

Can use this config:

{
 "version": "0.2.0",
"configurations": [
{
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
]
}

edited May 13 '19 at 12:54

answered May 13 '19 at 12:27

Ahmad Aghazadeh

16,571
12
101
98

score 7 · Answer 6 · answered Feb 21 '20 at 04:38

7

@Asesjix answer is very thorough, but as some have pointed out, still requires multiple interactions to start ng serve and then launch the Angular app in Chrome. I got this working with a single click using the following configuration. The main difference from @Asesjix's answer is the task type is now shell and the command calls adds start before ng serve so ng serve can exist in its own process and not block the debugger from launching:

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "ng serve",
        "type": "shell",
        "command": "\"start ng serve\""
      },
      {
        "label": "ng test",
        "type": "shell",
        "command": "\"start ng test\"",
      }
    ]
  }

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch in Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng serve"
        }
    ]
}

answered Feb 21 '20 at 04:38

ubiquibacon

10,451
28
109
179

1

This stucks in the shell with running ng serve, without launching the the chrome. – Manuel Jan 15 '21 at 19:44
***start ng serve*** is not a working command – Stephen Pham Jul 28 '21 at 00:24
`start` is a Windows CMD command. `ng serve` is an Angular command. If you are getting a message that `start my serve` isn't valid while using Windows CMD, I would guess you don't have Angular in your path correctly. – ubiquibacon Jul 28 '21 at 04:07
ubiquibacon: Hmm...I followed your steps above, but a file named `ng.ps1` popup. I'm able to run `ng serve` in a folder with Angular project, but a similar file `ng.ps1` popup if I used `start ng serve` – Stephen Pham Jul 29 '21 at 04:07
1

Sorry, I've since abandoned Angular in favor of Flutter so I don't think I'll be much help here. I've purged my memory (and hard drive) of everything related to Angular. – ubiquibacon Jul 29 '21 at 19:46

score 2 · Answer 7 · answered May 25 '17 at 11:45

Here is a bit lighter solution, works with Angular 2+ (I'm using Angular 4)

Also added the settings for the Express Server if you run the MEAN stack.

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Angular Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "runtimeArgs": [
        "--user-data-dir",
        "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "trace": true,
        "webRoot": "${workspaceRoot}/client/",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Express Server",
      "program": "${workspaceRoot}/server/bin/www",
      "outFiles": [
        "${workspaceRoot}/out/**/*.js"
      ]
    }
  ]
}

Can you debug/breakpoint your server side code at the same time as angular with this config? — Mika571, Oct 27 '17 at 12:11
@Mika571 nope unfortunately... I tried this right now. I'd like to debug server and client side at the same time too. — Leniel Maccaferri, May 18 '18 at 04:21

score 1 · Answer 8 · answered Jul 29 '20 at 14:01

In my case I'd not used the original Angular project folder tree and I knew there was something going wrong with the webRoot / {workspaceFolder} bit but all my experimenting yielded no result. Got a tip from another SO answer which I'll link if I find it again.

What helped me was finding the content of the variable {workspaceFolder} at runtime and then modifying it to the location of my "src" folder under which you have "app/*". To find it, I added a preLaunchTask to my launch.json file and a task to output the value of {workspaceFolder}.

launch.json, which appears after installing the Chrome debugger

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/newProjectRoot/",
      "preLaunchTask": "Echo values" //Just to see what the cryptic vs code variables actually are https://code.visualstudio.com/docs/editor/variables-reference
    }
  ]
}

Tasks.json Not present by default. Hit Ctrl+Shift+p and I think it's called 'create task for other command' or something similar. Can't seem to see it after tasks.json is created. You could also just create the file in the same location as launch.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Echo values",
      "command": "echo",
      "args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
      "type": "shell"
    }
  ]
}

Once I knew the value of ${workspaceFolder}, I fixed it to point to my src folder in my new project tree and it all worked. Debugging requires ng serve to have been run either as prelaunch task or as part of the build (examples above) or in a command prompt.

Here is a link to all the variables you can use:

Sergey Skrynnik · Answer 9 · 2023-01-21T12:48:42.120

0

For those who have read all above and does not having its as a working, check your Angular and Node.js version by ng version (within your project folder).

It should Output versions:

enter image description here

If you have Angular version = 15 and Node.js = 18 then you have another issue. There you can find solution (I spend 1 day to figure it out )

edited Jan 21 '23 at 12:48

answered Jan 21 '23 at 10:32

Sergey Skrynnik

11
1
5

score 0 · Answer 10 · answered Jun 14 '23 at 13:19

0

I guess the best and cleanest way is to generate a new project using ng new and then copy the following 3 files:

ng new my-app

Files to copy:

extensions.json
launch.json
tasks.json

answered Jun 14 '23 at 13:19

Junior

313
5
12

score 0 · Answer 11 · answered Jul 03 '23 at 15:07

How to serve your angular app and attach the debugger to it in a single configuration

The compound option in the launch.json file allows you to create a single launch configuration that can start multiple launch configurations simultaneously. This is useful if you want to start your web server and attach the debugger to it for example(and why not also start your backend), or if you have any other specific requirements.

You can use it like this:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Angular Debug",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            },
        },
        {
            "name": "Angular Serve",
            "command": "ng serve --open",
            "request": "launch",
            "type": "node-terminal",
            "cwd": "${workspaceFolder}",
        },
    ],
    "compounds": [
        {
          "name": "Angular Launch",
          "configurations": ["Angular Serve", "Angular Debug"]
        }
      ]
}

Now you have a working debugger that can be launched with a single F5 in VSCode.