当前位置:   article > 正文

VS Code调试Angular——方便快捷好学_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!

                                                                            感谢您的阅读~❀

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/91118
推荐阅读
相关标签
  

闽ICP备14008679号