VS Code直接調試Angular代碼

安裝VS Code擴展

安裝Debugger for Chrome

安裝Debugger for Firefox

配置Launch.json文件

Launch.json文件的創建和生成我們可以利用VS Code自動化生成。

1.打開調試頁面，點擊如下圖齒輪狀按鈕。

2.如果你的項目還沒有Launch.json文件會彈出如下選擇菜單，選擇你想要生成的運行配置。

3.把端口改為你項目的啟動配置，Angular默認是4200。

Chrome配置：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Firefox配置：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Firefox localhost",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

啟動調試

啟動Angular

ng serve

啟動調試

 

最后祝你享受你的Angular之旅～

轉載請注明出處：https://www.cnblogs.com/keitsi/p/10707384.html