VScode 配置前端项目 debugging 中断调试模式

最近开始学习新框架开发，与传统webform开发，完全是不一样的开发模式，而现如今的开发模式是前后端分离的模式，完全不是同一种概念。

首先，我们要了解传统 webform 是种什么样的开发模式，只要打开 vsstudio 软件，点击运行，整个项目无论前端后台都在同一个项目里边，方便的调试跟开发，对于开发人员来说，简直是再友好不过了。简单易学，可以快速集中到业务上边，更多的精力集中在开发上边。
当今主流前后端开发模式，前端angular + typescript 来进行开发，后端 asp.net core 开发的业务接口，这就是现在要学习的开发模式。
这无疑是增加了前期的开发学习成本，主要要学习前端框架配置，还要适应新的开发习惯，无疑是重新开始了，入门成本比较高。
对于以前在vsstudio 里边，只要点击调试，就可以方便的调试后台业务代码，而使用vscode 这里我们就需要简单的配置。
launch.json 里边的配置

{

// 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 Chrome",

"type": "chrome",

"request": "launch",

"url": "http://localhost:4200/#",

"webRoot": "${workspaceFolder}/projects/aa/projects/bb/"

}

]

}

"webRoot": "${workspaceFolder}/projects/aa/projects/bb/" 注意，这里要是在根目录下边，只要配置 ${workspaceFolder} 这个占位就可以了，不需要加上额外的路径。

配置完成之后，如下图

我们可以看到，我们配置的选项就在这边显示出来了，直接按F5，就可以直接调试该前端项目了，又可以像以前一样，非常顺利的调试项目。

以上是自己的做为资深开发的一些个人经历，把这些经验分享给大家，希望以后大家在从事开发中，可以避免不必要的麻烦，跟浪费时间精力。

要是大家喜欢我的文章的话，可以在文章下留言或是联系我，共同进步，共同探讨开发的一些案例，促进彼此间的交流，分享一些日常的开发趣事。

归档