如何在VS CODE调试Angular

最新推荐文章于 2023-05-09 18:47:57 发布

weixin_34137799

最新推荐文章于 2023-05-09 18:47:57 发布

阅读量101

点赞数

文章标签：开发工具 json python

原文链接：https://my.oschina.net/u/3298482/blog/1536505

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

然……

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

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

当定位到错误总是需要一直在 Chrome 与 VSCODE 切换。

其实……

我们可以简化这一过程，只需要把调试在VSCODE里面完成，这样当定位错误的时候可以直接修改代码。

怎么做？

两步骤即可。

1、安装 Debugger for Chrome

直接在市场中找就行了。

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 添加项目浏览地址即可。