使用自定義本地主機的 Visual Studio 代碼調試 Angular

Question

我已經用ng new初始化了一個空白的 angular 項目，並在 visual studio 代碼中配置了 launch.json 和默認的 chrome 啟動

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

我已將我的主機文件 127.0.0.1 映射到此自定義 url 並在package.json中修改了啟動腳本

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

應用程序工作調用自定義 URL 但 VSC 調試器不綁定斷點。

如果我在 launch.json 中設置localhost並刪除--disable-host-check ，調試器將像往常一樣在 localhost 上啟動。

有什么方法可以讓 VSC 調試器在我的自定義主機localhost-app.myapp.com上工作？

Answer 1

如果有幫助，我解決了刪除 vs 代碼代理配置的問題。

代理阻止源 map 發現並且不加載源映射。

所以，檢查你的代理 conf 如果你有一個

Answer 2

launch.json 文件應如下所示，其中的值已更改以反映您的環境：

        "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}"
            }
        ]
    

您可以在此處參考更多信息：

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