How to debug Angular with VSCode?

AngularDebuggingWebpackVisual Studio-Code

Angular Problem Overview

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

Angular Solutions

Solution 1 - Angular

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

Solution 2 - Angular

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

Solution 3 - Angular

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

Solution 4 - Angular

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

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

Solution 6 - Angular

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

Solution 7 - Angular

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

Solution 8 - Angular

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:

Categories
Recommended Angular Solutions
Recommended Debugging Solutions
Recommended Webpack Solutions
Recommended Visual Studio-Code Solutions

Previous Solution:

AWS S3 CLI - Could not connect to the endpoint URL

Amazon Web-ServicesAmazon S3

Next Solution:

Make Pandas DataFrame apply() use all cores?

PandasDask

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAsesjixView Question on Stackoverflow
Solution 1 - AngularAsesjixView Answer on Stackoverflow
Solution 2 - AngularLevi FullerView Answer on Stackoverflow
Solution 3 - AngularskryvetsView Answer on Stackoverflow
Solution 4 - AngularVictor IonescuView Answer on Stackoverflow
Solution 5 - AngularAhmad AghazadehView Answer on Stackoverflow
Solution 6 - AngularubiquibaconView Answer on Stackoverflow
Solution 7 - AngularIsak La FleurView Answer on Stackoverflow
Solution 8 - AngularAshView Answer on Stackoverflow