VSC Attach to SSL LocalHost for Angular Debugging

Question

Using the similar launch configuration I'm NOT able to attach to httpS://localhost:4200 from VSC for Angular 11 app, neither Chrome nor Edge.

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Edge",
            "port": 9222,
            "request": "attach",
            "type": "pwa-msedge",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "Attach to pwa-Chrome",
            "port": 9222,
            "request": "attach",
            "type": "pwa-chrome",
            "urlFilter": "https://localhost:4200",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Legacy Chrome",
            "port": 9222,
            "urlFilter": "https://localhost:4200",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "F5 against localhost",
            "port": 4201,
            "url": "https://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Cannot connect to the target at localhost:9222: Could not connect to debug target at http://localhost:9222: Could not find any debuggable target.

Bottom launch works.

Same problem for me on attach - not working with SSL

Gotts
– Gotts

2022-07-03 14:02:58 +00:00
Commented Jul 3, 2022 at 14:02 — Gotts
– Gotts, Commented Jul 3, 2022 at 14:02
@Gotts I'm able to nail it, see answer.

Jeb50
– Jeb50

2022-07-04 16:44:34 +00:00
Commented Jul 4, 2022 at 16:44 — Jeb50
– Jeb50, Commented Jul 4, 2022 at 16:44

Jeb50 · Accepted Answer · 2022-10-13 23:34:22Z

2

If you don't have SSL certificate (self or real), ng serve --ssl will do.

If still not working then use a diff port. Here is my launch.json:

{
    "name": "UI Chrome",
    "request": "launch",
    "type": "chrome",
    "port": 4201,
    "url": "https://localhost:4200",
    "webRoot": "${workspaceFolder}"
}

Update: why 4201? 4201 is to help me bypass error in my original debugging, it did the trick help me continue debugging.

edited Oct 13, 2022 at 23:34

answered Jul 4, 2022 at 16:44

Jeb50

7,13711 gold badges70 silver badges118 bronze badges

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

2 Comments

Alex Over a year ago

Thanks, @Jeb50. This worked, though I'm puzzled by the "port" being 4201 and the port on the "url" being 4200

Jeb50 Over a year ago

@Alex Although my original post was over a year ago, when I did F5 for debugging, I got err told me 4200 is being used. 4201 did the trick help me continue debugging.

Collectives™ on Stack Overflow

VSC Attach to SSL LocalHost for Angular Debugging

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related