Visual studio code debug Angular with custom localhost-CodePudding

I've initialized a blank angular project with ng new and configured the launch.json in visual studio code with default chrome launch

"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost-app.myapp.com:4200",
"webRoot": "${workspaceFolder}"
}
]

I've mapped in my host file 127.0.0.1 to this custom url and modified in package.json the start script with

"start": "ng serve --disable-host-check",

application work calling custom URL but VSC debugger does not bind breakpoints.

If I set localhost in launch.json and remove --disable-host-check, debugger works as usual launched on localhost.

Is there any way to make VSC debugger work on localhost-app.myapp.com my custom host?

CodePudding user response：

If it helps, I solve my problem removing vs code proxy configuration.

Proxy blocks source map discovery and does not load sourcemaps.

So, check your proxy conf if you have one

CodePudding user response：

The launch.json file should look like this, with values changed to reflect your environment:

        "version": "0.2.0",
        "configurations": [
            {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome against localhost",
                "url": "http://localhost:4200",
                "webRoot": "${workspaceFolder}"
            },
            {
                "type": "chrome",
                "request": "attach",
                "name": "Attach to Chrome",
                "port": 9222,
                "webRoot": "${workspaceFolder}"
            }
        ]

You can reffer to more info here:

https://automationpanda.com/2018/01/12/debugging-angular-apps-through-visual-studio-code/