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

前端之家收集整理的这篇文章主要介绍了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!

感谢您的阅读~❀

猜你在找的Angularjs相关文章