VS CODE debugger for angular side of project

👨‍💻 Development Help
1

I have been able to add the xdebug vs code config and it works fine for the php stuff. I want to now be able to attach a debugger for the angular side of things.

Does anyone know the correct config to be used in the launch.json to do this?

2

How did you add xdebug & code config? :thinking:

Maybe useful:

Install the Debugger for Chrome” in VS Code

Browser debugging in VS Code
Make sure you are serving SuiteCRM front-end locally

Example launch.json Configuration

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Angular Frontend (SuiteCRM)",
      "url": "http://localhost:4200", 
      "webRoot": "${workspaceFolder}/public/legacy", 
      "sourceMaps": true,
      "trace": true,
      "skipFiles": ["node_modules/**"],
      "runtimeArgs": [
        "--remote-debugging-port=9222"
      ]
    }
  ]
}

Start Chrome with remote debugging enabled

google-chrome --remote-debugging-port=9222

3

Just general guidelines, I don’t know much about this, but I believe you need to build angular so that it generates mappings (slower builds) which are basically a list of how each compiled JavaScript line maps back to the original TypeScript line.

Then you can use a browser such as Chrome as a debugger.

I have sometimes debugged compiled code directly; for simple things, it can be done, if you have some notion of where you are in the sources, so that you can understand where you’re currently stepping through the code (by resemblance of source and compiled code) and this is sometimes enough to check some variable and figure out what you should be fixing.