menu

Questions & Answers

How to debug Angular with VSCode?

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

Comments:
2023-01-21 10:42:02
what do you mean? How do they not work?
2023-01-21 10:42:02
@TylerH, It should be a guide how it works. it does not work without modified launch.json.
2023-01-21 10:42:02
To start ng serve in background see answer here: link
2023-01-21 10:42:02
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.....
Answers(9) :

Tested with Angular 5 / CLI 1.5.5

  1. Install the Chrome Debugger Extension
  2. Create the launch.json (inside .vscode folder)
  3. Use my launch.json (see below)
  4. Create the tasks.json (inside .vscode folder)
  5. Use my tasks.json (see below)
  6. Press CTRL+SHIFT+B
  7. 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

  1. Install the Chrome Debugger Extension
  2. Create the launch.json
  3. Use my launch.json (see below)
  4. Start the NG Live Development Server (ng serve)
  5. 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/*"
      }
    }
  ]
}
Comments:
2023-01-21 10:42:02
do you know how to start NG Live Development Server and then launch Chrome in just one F5 click?
2023-01-21 10:42:02
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 ;-)
2023-01-21 10:42:02
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.
2023-01-21 10:42:02
@Zachscs which angular version did you use?
2023-01-21 10:42:02
The latest, angular 5.
2023-01-21 10:42:02
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
2023-01-21 10:42:02
@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.
2023-01-21 10:42:02
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
2023-01-21 10:42:02
There are problems with new Angular CLI versions (mine is 7.2.2), see stackoverflow.com/a/54883663/706012
2023-01-21 10:42:02
How to do the same for firefox?
2023-01-21 10:42:02
I think there's something missing here: "preLaunchTask": "ng test",: it will automatically launch "ng test" for you in vscode
2023-01-21 10:42:02
The chrome debugger extension is now deprecated
2023-01-21 10:42:02
Adding the "attach" object to configuration array inside launch.json with sourceMaps: true did the trick for me. Thanks a lot.

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"
      ]
    }
  ]
}
Comments:
2023-01-21 10:42:02
Can you debug/breakpoint your server side code at the same time as angular with this config?
2023-01-21 10:42:02
@Mika571 nope unfortunately... I tried this right now. I'd like to debug server and client side at the same time too.

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"]
    }      
  ]
}

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

Comments:
2023-01-21 10:42:02
did you mean code.visualstudio.com/docs/nodejs/… ? the ·#_debugging-angular points directly to the interesting point if you want to edit your answer...
2023-01-21 10:42:02
@Pipo No, I didn't mean nodejs, I don't use nodejs on the server side, so I wouldn't know.

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

  1. 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}"
        }
      ]
    }
    
  2. Run Webpack dev server from Angular CLI by executing npm start

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

  1. 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
    
  2. 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}"
        } 
      ]
    }
    
  3. Run Webpack dev server from Angular CLI by executing npm start
  4. 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

Comments:
2023-01-21 10:42:02
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
2023-01-21 10:42:02
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.
2023-01-21 10:42:02
@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

@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"
        }
    ]
}
Comments:
2023-01-21 10:42:02
This stucks in the shell with running ng serve, without launching the the chrome.
2023-01-21 10:42:02
start ng serve is not a working command
2023-01-21 10:42:02
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.
2023-01-21 10:42:02
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
2023-01-21 10:42:02
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.

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}"
      }
]
}

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:

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 out it)