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之旅～

轉載請註明出處：http://www.javashuo.com/article/p-dmzvkuis-hd.html