VS Code调试Angular——方便快捷好学

前言

        首先说下我们一直在用的最复杂的方法中用到的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，

    （1）如何创建：

如何添加内容：

  并没有什么特别是的，只需要注意 url 添加项目浏览地址即可。

3、启动 ng serve

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

4、调试

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

结论

这样你会发现，其实我只打开两个窗口，一是VS CODE、一是Chrome，这样如果你是使用多屏幕或window10的多桌面的话，简直可以浪一把。

而且当我在调试时发现错误，可以直接在VSCODE中修改代码，保存后由于 Angular Cli 自动刷新，并同时进入修改代码后的DEBUG。

爽……，希望能对您有所帮助！

happy coding!

                                                                            感谢您的阅读~❀