首页 开发工具 VSCode vscode如何调试代码

vscode如何调试代码

Dec 12, 2019 pm 05:42 PM
vscode 代码 调试

vscode如何调试代码

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

9c34dbc3ae1172b711eb1c35e89f554.png

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

f7608d1a009a812a06a89c412e8bb62.png

选择Chrome环境

7f6e552d84c385dc98b14ada929a5a4.png

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

1d2e3d8ed306dd7a81e4160b5a35d11.png

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

bf2782352412aba598a90111d43b318.png

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

7c5d620552900b48c97247e7e934b82.png

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

19961d5a0ec4f6f7c85ed9e0764a28d.png

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

acda788ccf541c12500ef54841223e4.png

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

efb4bd87757187e2549ab9087c27307.png

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

d540551a84bda98a033256a9bc8a39b.png

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

相关文章教程推荐:vscode教程

以上是vscode如何调试代码的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vscode怎么开启后台更新 vscode开启后台更新方法 vscode怎么开启后台更新 vscode开启后台更新方法 May 09, 2024 am 09:52 AM

1.首先,打开界面后,点击左上角的文件菜单2.随后,在首选项栏目中点击设置按钮3.接着,在跳转的设置页面中,找到更新板块4.最后,鼠标点击勾选启用在Windows上后台下载和安装新的VSCode版本按钮,并重启程序即可

vscode怎么禁止wsl配置文件 vscode禁止wsl配置文件方法 vscode怎么禁止wsl配置文件 vscode禁止wsl配置文件方法 May 09, 2024 am 10:30 AM

1.首先,打开设置菜单中的settings选项2.随后,在跳转的commonlyused页面中找到terminal栏目3.最后,在该栏目右侧取消勾选usewslprofiles按钮即可

VScode怎么设置动画平滑插入 VScode设置动画平滑插入教程 VScode怎么设置动画平滑插入 VScode设置动画平滑插入教程 May 09, 2024 am 09:49 AM

1.首先,打开界面后,点击工作区界面2.然后,在打开的编辑面板中,点击文件菜单3.随后,点击首选项栏目下的设置按钮4.最后,鼠标点击勾选CursorSmoothCaretAnimation按钮,保存设置即可

Vscode怎么打开工作区信任权限 Vscode打开工作区信任权限方法 Vscode怎么打开工作区信任权限 Vscode打开工作区信任权限方法 May 09, 2024 am 10:34 AM

1.首先,打开编辑窗口后,点击左下角的配置图标2.随后,在打开的子菜单中点击管理工作区信任按钮3.接着,在编辑窗口中找到该页面4.最后,根据自己的办公需求勾选相关指令即可

如何使用LeakSanitizer调试C++内存泄漏? 如何使用LeakSanitizer调试C++内存泄漏? Jun 02, 2024 pm 09:46 PM

如何使用LeakSanitizer调试C++内存泄漏?安装LeakSanitizer。通过编译标志启用LeakSanitizer。运行应用程序并分析LeakSanitizer报告。识别内存分配类型和分配位置。修复内存泄漏,确保释放所有动态分配的内存。

Vscode怎么打开动画 Vscode打开动画的方法介绍 Vscode怎么打开动画 Vscode打开动画的方法介绍 May 09, 2024 am 10:28 AM

1.首先,点击打开更多菜单中的settings选项2.然后,找到Features板块下的terminal栏目3.最后,在栏目右侧,用鼠标点击勾选enableanimation按钮以后,保存设置即可

vscode怎样设置文件图标主题_vscode设置文件图标主题方法 vscode怎样设置文件图标主题_vscode设置文件图标主题方法 May 09, 2024 am 10:00 AM

1.打开界面后,点击左下角的扩展按钮2.在扩展商店中搜索找到vscode-icons插件进行安装3.随后点击左上角文件菜单中的首选项按钮,找到文件图标主题选项4.找到刚刚安装的插件进行设置即可

vscode怎么打开智能提交 vscode打开智能提交的步骤 vscode怎么打开智能提交 vscode打开智能提交的步骤 May 09, 2024 am 10:40 AM

第一步,打开vscode软件界面后,点击下方设置菜单中的settings按钮第二步,找到Extensions栏目下的Git选项第三步,点击勾选enablesmartcommit按钮即可

See all articles