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