1. 引言
最近在看《程序员的成长课》，讲到程序员如何构建技能树，印象深刻。作为一名后台开发的程序员，深感技能单一，就别说技能树了。作为一名合格的后台程序员，至少要掌握一门静态语言，一门动态语言和一门前端语言。静态语言C#算不上精通，动态语言Python也刚刚入门。但前端却是空白，虽说有了解过jquery、bootstrap，但因为项目无所涉及，早已忘得一干二净。
近几年，前端框架大行其道，Web开发已经是一个不容忽视的大趋势，在这个趋势下对前端框架一无所知，显然是要淘汰的。所以决定拾起前端，选择学习Angular来弥补自己的前端空白。计划使用.Net Core + Angular开发一个任务清单。
2. 环境准备
.Net Core已经支持Angular模板，我们只需要使用dotnet new angular -n YourAppName即可创建angualr项目模板。
依次安装：
- Node.js（默认安装，即可安装NPM）
- 执行
npm install -g @angular/cli，安装angular cli。 - 开发工具：Visual Studio Code
- 安装最新.Net Core SDK，目前版本V2.1.101。
3. 创建并启动项目
执行dotnet new angular -n Learning.NetCore.Angular，创建项目后，使用VS Code打开文件夹。项目结构如下图所示。其中ClientApp就是Angular所写的前端部分，实现了前后端分离。
打开后我们需要安装以下几个VS Code的扩展，以便我们顺利开发调试。
稍后，右下角会弹窗提示我们是否需要调试项目，如下图所示。
点击Yes，就会在项目中为我们创建一个.vscode的文件夹。其中包含两个文件，一个是launch.json，一个是tasks.json。其中launch.json用于配置调试相关参数。tasks.json用于配置默认的构建任务。
如果没有弹出上图弹窗，我们也可以按下图步骤添加。
第一次运行时，我们先执行dotnet build来验证项目能否正确构建， 它会恢复npm依赖，可能会耗时几分钟，npm依赖安装完毕后，以后再次运行就很快了。等构建成功，执行dotnet run运行项目。
浏览器访问http://localhost:5000即可看到下图效果。
然后键盘按Ctrl+C停止运行。
4. 项目调试
因为第三步我们已经创建了默认调试配置。直接F5运行，就可以调试.Net Core代码。但是我们该如何联调Angular代码呢？这就是本节的重点了。我们需要修改下我们的launch.json了。
打开launch.json点击添加配置，然后选择Chrome:Launch，就会添加在配置文件中添加一个节点，如下所示：
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
我们需要做相应修改。因为.Net Core项目默认绑定端口为5000，所以我们要将上面url的端口号改为5000。并映射webRoot到wwwroot目录下。同时我们要启用sourceMaps。修改后如下所示：
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:5000",
"webRoot": "${workspaceFolder}/wwwroot",
"sourceMaps": true
},
至此我们成功添加一个任务用来启动Chrome，来调试我们的angular。需要简单三步走：
- 终端执行
dotnet run，运行项目 - 切换到debug按钮，选择Launch Chrome配置，F5运行。
- 断点ts文件。
步骤如下图所示：
但是这个时候我们仍然无法做到联调。我们需要要先启动项目，再选具体的某个调试配置进行调试。即同时只能调试Angualr和.NetCore中的一个。那如何二者联调？？？
5. 联调Angualr&&.NetCore
同样我们还是要修改launch.json，添加一个compounds配置节点。这个节点允许我们同时启动多个调试任务。配置如下：
"compounds": [
{
"name": ".Net Core + Chrome",
"configurations": [".NET Core Launch (web)","Launch Chrome"]
}
],
"configurations": [
//省略
]
最终的配置如下：
"compounds": [
{
"name": ".NetCore+Chrome",
"configurations": [ ".NET Core Launch (web)", "Launch Chrome" ]
}
],
"configurations": [
{
// chrome debugger
},
{
// .Net Core Launch (web)
},
]
这个配置很简单，就是把我们刚才配置的调试任务组装在一块即可。
回到调试界面，选择.NetCore+Chrome，F5运行，就可以同时在angular和.net core代码中断点并调试。如下图所示：
细心的你可能会发现，通过这种方式虽然可以完成联调，但还是有点小瑕疵。两个调试任务会分别启动一个网页窗口。那有没有办法解决呢？有的，我们再添加一个.Net Core Launch (console)的调试任务，这个调试任务就不会启动网页窗口。然后再将.Net Core Launch (console)和Launch Chrome组装在一起即可。具体配置看下图：
6. 最后
本文仅是VS Code开发调试技巧的讲解，希望对你有所帮助。
