How do I setup VS Code for Angular Debugging?

Question

I'm trying to setup Visual Studio Code for debugging Angular. If I just use the out-of-the-box version of launch.json and point it to the /js/app.js file, it returns:

ReferenceError: angular is not defined

So, I tried to use gulp-connect to start a server. This starts the app just fine, but the debugger isn't attached and it never stops at breakpoints.

Can someone show me how to debug an angular web with VS Code?

PS. Here is my launch.json:

{
  "version": "0.2.0",
  "configurations": [
  {
    "name": "Launch Debug with gulp.js",
    "type": "node",
    "request": "launch",
    "program": "js/app.js",
    "stopOnEntry": false,
    "args": [],
    "cwd": ".",
    "runtimeExecutable": null,
    "runtimeArgs": [
        "--nolazy"
    ],
    "env": {
        "NODE_ENV": "development"
    },
    "externalConsole": false,
    "sourceMaps": false,
    "outDir": null
  },
  {
    "name": "Attach",
    "type": "node",
    "request": "attach",
    "port": 5858
  }
  ]
}

if you want angular not defined to go away you need to import the angular.d.ts file. — atsituab
– atsituab, Commented Dec 5, 2015 at 15:28
I'd like to debug from the ide if possible. The browser is just clunky (imho). I'll try importing the ts file. Thanks for the tip! — Dicer
– Dicer, Commented Dec 5, 2015 at 17:39

Dicer · Accepted Answer · 2015-12-07 19:50:51Z

1

Okay, with the help of the @code folks, I got it working. I'm now able to fully debug an Angular client from the IDE! Hopefully, this will help someone else...

First, you need to download the "Debugger for Chrome Extension." You do this by typing this:

F1
ext Install Extensions
debug (then select Debugger For Chrome)

Once that is installed, I used MSFT's instructions found here:

https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome

I only can get the "attach" method working, so I use that with Chrome. Here is the final version of the launch.son file I use:

{
    "version": "0.2.0",
    "configurations": [
        {
            // Use this to get debug version of Chrome running:
            // /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
            "name": "Attach",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "webRoot": "./www"
        }
    ]
}

Also, don't forget to start Chrome in debug mode with this (for Mac):

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

answered Dec 7, 2015 at 19:50

Dicer

4267 silver badges14 bronze badges

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

1 Comment

LP13 Over a year ago

if you are using Visual Code to attach, how are you starting the application? are you following the steps 1>start server manually ( eg from console window) 2>browse application in chrome ( eg localhost:4000\home) 3>run VS debugger with attach option

Collectives™ on Stack Overflow

How do I setup VS Code for Angular Debugging?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related