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.

4

yeah I got xdebug to work fine but with angular it just says it cant find anything on that port.

@rsp did that work for you at all? I see the webroot is in the legacy wouldnt it be the dist folder?

@pgr I have been able to get away with console logs and adding my own even listeners in my browser but being able to step easily add break points and step through them would make my dev process much easier.

5

What command it being used when you call or run the application? because we cant get this to map correctly and attach.

6

You can use Chrome or any browser’s debugging tools to debug the angular code. Most of the features are similar to VS Code.

7

I don’t remember the command, it’s been a long time, but have a look at yarn, the commands it uses from package.json, and options available. And how that ties in to angular.json

:thinking: let me try a quick grep… Google tells me we should be looking at sourceMap option…

172.19.219.108 | pgr /var/www/Suite8 (feature/low-code-2) $ grep -irn sourceMap *.json
angular.json:17:            "sourceMap": true,
angular.json:91:              "sourceMap": false,
angular.json:192:            "sourceMap": true,
angular.json:219:              "sourceMap": false,
tsconfig.json:6:    "sourceMap": true,

If you figure it out, please come back and tell us

8

I just want to steam line this to be faster especially since most of the time its break point very deep into abstracted services and components.

9

Yeah I will carry on trying this out.