网站建设资讯

NEWS

网站建设资讯

vscode怎样调试代码

这篇文章主要介绍了vscode怎样调试代码,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

目前创新互联已为成百上千的企业提供了网站建设、域名、虚拟主机、网站托管维护、企业网站设计、屏山网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

首先安装扩展调试插件debugger for chrome

vscode怎样调试代码

点击瓢虫按钮,进行调试项目的配置,点击配置按钮

vscode怎样调试代码

选择Chrome环境

vscode怎样调试代码

会弹出Chrome调试配置文件launch.json,修改下端口即可

vscode怎样调试代码

若是没有lauch.json配置文件产生,也可以通过以下方式进行配置文件的打开。选择添加配置

vscode怎样调试代码

再选择Chrome:Launch,修改下端口即可

vscode怎样调试代码

打开项目,通过ctrl+`【注意该`为Tab键上的`】输入ng serve启动项目

vscode怎样调试代码

切换到瓢虫界面,比如我们在app.component.ts里头设置了一个断点

vscode怎样调试代码

启动调试按钮,会自动弹出浏览器页面

vscode怎样调试代码

刷新页面之后,会发现,程序运行到,断点位置

vscode怎样调试代码

我们可以进行变量的查看,异常捕获,调用堆栈等调试。

感谢你能够认真阅读完这篇文章,希望小编分享vscode怎样调试代码内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!


名称栏目:vscode怎样调试代码
URL标题:http://njwzjz.com/article/ieigco.html