CODEWITHSUNDEEP
angulardebuggingwebpackvisual-studio-code
S3bt3r
S3bt3r

Reputation: 4179

How to debug Angular with VSCode?

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

Upvotes: 188

Views: 204500

Answers (11)

Allenile
Allenile

Reputation: 462

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.

Upvotes: 12

Junior
Junior

Reputation: 341

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

Debug Config Files

Upvotes: 0

Sergey Skrynnik
Sergey Skrynnik

Reputation: 21

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 )

Upvotes: 1

Levi Fuller
Levi Fuller

Reputation: 15771

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

Upvotes: 63

S3bt3r
S3bt3r

Reputation: 4179

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

Upvotes: 208

Ash
Ash

Reputation: 6035

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:

Upvotes: 1

ubiquibacon
ubiquibacon

Reputation: 10677

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

Upvotes: 7

Ahmad Aghazadeh
Ahmad Aghazadeh

Reputation: 17131

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

Upvotes: 8

skryvets
skryvets

Reputation: 3049

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

Upvotes: 16

Victor Ionescu
Victor Ionescu

Reputation: 2019

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

Upvotes: 10

Isak La Fleur
Isak La Fleur

Reputation: 4668

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

Upvotes: 2

Related Questions