Question 135210 in Visual Studio Code Question posted in
View the official documentation.

Visual studio code debug Angular with custom localhost

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search