脚本宝典收集整理的这篇文章主要介绍了如何在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,请注明来意。