VSC Attach to SSL LocalHost for Angular Debugging - visual-studio-code

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.

Answer 1

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.