在 VSCode 中調試 Angular 應用程序再次不起作用

Question

我按照官方文檔： https://code.visualstudio.com/docs/nodejs/angular-tutorial#_debugging-angular

• 使用ng new my-app創建了一個新的 Angular 應用程序。
• 在 VSCode 中打開應用程序。
• 檢查應用程序是否運行： ng serve 。 都好。
• 已安裝的 Chrome 調試器
• 按照說明添加launch.json配置
• 按 F5 開始調試...

根據文檔，它必須啟動應用程序並達到我的斷點。 相反，我得到這個：

我不知道為什么這不起作用。 請指教。 謝謝。

另外，為什么我們需要這個擴展？

看起來調試模塊現在內置在 VSCode 中，並且功能完全相同：

但也不工作（這里我禁用了擴展並使用了內置調試器）：

Answer 1

1. 從工作區中的 .vscode 文件夾中刪除任何現有的 launch.json。
2. 按 F5（在您的 vscode 工作區中）並選擇“Chrome”。 注意 launch.json 正在重新創建。
3. 從終端啟動您的 angular 應用程序：'ng serve --port=8080'。 等它起來。
4. Go 回到你的 vscode 工作區。 按 F5 以調試模式啟動 chrome。 您的應用應該會在 Chrome 中加載。
5. 現在您可以在 vscode的源代碼中設置斷點。 像往常一樣與您的應用程序交互。 當您遇到斷點時，vscode 應該暫停。

Answer 2

我曾經有你的問題。 我會努力尋找解決方案，然后再過一段時間再做同樣的事情。 從 VS Code 調試時總是出現一些令人困惑的錯誤。

我開始直接從瀏覽器調試我的 angular 應用程序，我總是很高興。 Chrome 和 Firefox 在調試過程中從未讓我失望過。

請記住，由於某些奇怪的原因webpack將所有文件放在. 源文件夾

這是結構的圖片以及如何直接從 Chrome 中找到要調試的文件

您還可以移動到console選項卡並執行您想要的每條語句。

此外，在代碼上移動鼠標將為您提供變量在執行期間保持的值。

Answer 3

安裝

npm 安裝 --global @azure/static-web-apps-cli@latest

將您的 launch.json 設置為

{
linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "SWA: Run Angular",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:4280",
            "preLaunchTask": "swa: start Angular",
            "webRoot": "${workspaceFolder}/",
            "timeout": 30000
        }
    ]
}

現在 go 調試它