visual-studio-code - VSC 连接到 SSL LocalHost 以进行角度调试

Question

使用类似的启动配置，我无法从 Angular 11 的 VSC 附加到 httpS://localhost:4200应用程序，既不是 Chrome，也不是 Edge。

启动.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.

底部启动有效。

Answer 1

如果您没有 SSL 证书(自己的或真实的)，ngserve --ssl 即可。

如果仍然不起作用，则使用 diff 端口。这是我的 launch.json:

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

更新:为什么是 4201？ 4201 是为了帮助我绕过原始调试中的错误，它确实帮助我继续调试。