ASP.NET Core知多少(6):VS Code联调Angular + .NetCore
最近在看《程序员的成长课》,讲到程序员如何构建技能树,印象深刻。作为一名后台开发的程序员,深感技能单一,就别说技能树了。作为一名合格的后台程序员,至少要掌握一门静态语言,一门动态语言和一门前端语言。静态语言C#算不上精通,动态语言Python也刚刚入门。但前端却是空白,虽说有了解过jquery、bootstrap,但因为项目无所涉及,早已忘得一干二净。 近几年,前端框架大行其道,Web开发已经是一个不容忽视的大趋势,在这个趋势下对前端框架一无所知,显然是要淘汰的。所以决定拾起前端,选择学习Angular来弥补自己的前端空白。计划使用.Net Core + Angular开发一个任务清单。 .Net Core已经支持Angular模板,我们只需要使用
执行 打开后我们需要安装以下几个VS Code的扩展,以便我们顺利开发调试。 稍后,右下角会弹窗提示我们是否需要调试项目,如下图所示。 点击Yes,就会在项目中为我们创建一个 如果没有弹出上图弹窗,我们也可以按下图步骤添加。 第一次运行时,我们先执行 浏览器访问http://localhost:5000即可看到下图效果。 然后键盘按 因为第三步我们已经创建了默认调试配置。直接F5运行,就可以调试.Net Core代码。但是我们该如何联调Angular代码呢?这就是本节的重点了。我们需要修改下我们的launch.json了。 打开launch.json点击添加配置,然后选择Chrome:Launch,就会添加在配置文件中添加一个节点,如下所示:
我们需要做相应修改。因为.Net Core项目默认绑定端口为5000,所以我们要将上面url的端口号改为5000。并映射webRoot到wwwroot目录下。同时我们要启用sourceMaps。修改后如下所示:
至此我们成功添加一个任务用来启动Chrome,来调试我们的angular。需要简单三步走:
步骤如下图所示: 但是这个时候我们仍然无法做到联调。我们需要要先启动项目,再选具体的某个调试配置进行调试。即同时只能调试Angualr和.NetCore中的一个。那如何二者联调??? 同样我们还是要修改launch.json,添加一个compounds配置节点。这个节点允许我们同时启动多个调试任务。配置如下:
最终的配置如下:
这个配置很简单,就是把我们刚才配置的调试任务组装在一块即可。 回到调试界面,选择.NetCore+Chrome,F5运行,就可以同时在angular和.net core代码中断点并调试。如下图所示: 细心的你可能会发现,通过这种方式虽然可以完成联调,但还是有点小瑕疵。两个调试任务会分别启动一个网页窗口。那有没有办法解决呢?有的,我们再添加一个 本文仅是VS Code开发调试技巧的讲解,希望对你有所帮助。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- asp.net – HttpPostedFileBase.SaveAs方法问题
- ASP.NET MVC ViewEngine ViewLocationCache.GetViewLocatio
- asp.net-mvc – 使用ASP.NET MVC响应REQUEST_METHOD = HEAD
- asp.net-mvc – 将脚本放在MVC _layout页面中的位置
- asp.net-mvc – T4MVC和不同区域的重复控制器名称
- API Test WebApiTestClient工具安装及使用
- asp.net-mvc – 在Generic Repository中定义Default构造函数
- 为什么我应该或不应该将数据集,数据表等作为会话变量存储在
- asp.net-core – 在程序集’ef’上找不到’UserSecretsIdAt
- ASP.NET GridView用法大全