如何在VS CODE调试Angular

发布时间:2019-06-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了如何在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,内容如下:

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

3、启动 ng serve

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

4、调试

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

结论

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

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

爽……

happy coding!

脚本宝典总结

以上是脚本宝典为你收集整理的如何在VS CODE调试Angular全部内容,希望文章能够帮你解决如何在VS CODE调试Angular所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。