如何在VS CODE调试Angular

工具>选项>项目和解决方案> Web项目“,取消选中”浏览器窗口关闭时停止调试器“

2、创建 launch.json

在项目根目录下创建 .vscode/launch.json,内容如下:

{
    // Use IntelliSense to learn about possible Node.js debug 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 with ng serve",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

并没有什么特别是的,只需要注意 url金沙官网线上, 添加项目浏览地址即可。

金沙官网线上 1

4、调试

在VSCODE按F5进入调试状态,最后打开 Chrome 刷新页面,会直接在 VSCODE 进入断点。

经 群主指点 (QQ群:18668853) 趴了下官网,阅读了发行文档,终于在ASP.NET博客 中找到了答案,原来有小伙伴同样遇到问题

其实……

使用Chrome 调试闪退,MMP ,一想肯定是VS的锅咯,各种抓头发。。

修改代码 > 打开Dev Tools > 设置断点 > 调试 > 回到VSCODE

OK,完事了,万事大吉,开心撸码吧。。。。。。。。。

我们一般在开发Angular,首先需要在CMD终端 (或VSCODE TERMINAL)启动 ng serve,后打开浏览器,然后打开 Dev Tools,进入断点,此时再回过头VS CODE修改代码;而其实我们在开发过程中需要一直重复以下流程:

为啥 泪奔?

Chrome Dev Tools 绝对是目前最爽的 JavaScript 调试工具之一,一方面可以通过在代码 debugger 或 直接在 Sources 中添加断点,并且可以直接进入 Typescript 源代码,真的无可挑剔。

都勾上后,瞬间跑起来了,但是问题来了,每次会新运行一个Chrome ,各种不爽

3、启动 ng serve

当然这里最好是在 VSCODE TERMINAL 启动 ng serve 了。

本文由金沙官网线上发布于编程,转载请注明出处:如何在VS CODE调试Angular

您可能还会对下面的文章感兴趣: