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如何调试代码的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3043835.html

(0)
上一篇 2025年3月13日 15:03:35
下一篇 2025年2月26日 08:20:57

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vscode配置c语言编译环境

    一、下载mingw-w64 gcc-8.1.0编译器(本文安装 x86_64-win32-seh) 二、环境配置 打开你的mingw-w64安装目录,我是默认安装的在C:Program Files (x86),里面的MinGW-W64就是安…

    2025年3月13日 编程技术
    200
  • vscode有中文版吗

    vscode有中文版吗? 百度搜索 VSCODE软件下载进入官网页面,根据电脑选择型号,安装稳定版,小编是64位系统。下载文件后打开,一步一步根据要求下一步安装就可以。 相关推荐:vscode教程 安装后运行vscode,按Ctrl + S…

    2025年3月13日 编程技术
    200
  • vscode怎么编写和调试.net项目

    安装插件 使用VSCode编写dotnet core项目除了其 默认的功能外,我推荐还要安装一些非常有特色,并且有用的扩展,正是因为VSCode的插件机制,才让它变得更加强大,满足我们各式各样的需求。 1、C#语言扩展 这个是使用VSCod…

    2025年3月13日 编程技术
    200
  • vscode设置python代码中函数括号自动补全

    1、打开设置界面 2、点击大括号setting.json图标,如下图: 3、搜索配置项python.autoComplete.addBrackets 立即学习“Python免费学习笔记(深入)”; 4、修改值为true 注意:点击小笔按钮修…

    2025年3月13日 编程技术
    200
  • 如何打开vscode中的用户自定义配置

    打开编辑器,点击左下方的齿轮状图标,这里是设置菜单 在弹出菜单中,点击【settings】子菜单 在settings界面,点击右上方的三个点的图标 在弹出的菜单中,点击【Open settings.json】子菜单 打开的settings.…

    2025年3月13日 编程技术
    200
  • vscode中的eslint插件不起作用

    最近在用vue进行开发,但是vscode中的eslint插件装上之后不起作用。 解决方法: 1、vsCode打开“设置”,选择”settings.json” 2、输入如下脚本 “eslint.validate”: […

    2025年3月13日
    200
  • vscode怎么创建自定义代码模板

    本文以vue的创建为例,不过这个vue是在html中创建的。 初学Vue,我们一般都是在.html文件中引入vue包,然后编写自己的vue代码。 因为我们创建的模板是在.html文件下,所以我们的模板也得是在html.json中来进行编写。…

    2025年3月13日 编程技术
    200
  • vscode怎么更改rem

    vscode怎么更改rem? 在开发h5页面时,我们需要使用到rem单位,那么vscode中如何将px转rem呢? 相关推荐:vscode教程 此处我选择的是px to rem插件,使用步骤: 首先安装px to rem插件; 然后在设置-…

    2025年3月13日
    200
  • vscode可以运行c语言吗

    vscode可以运行c语言吗?  首先,安装VScode,直接上官网下载安装包安装即可,这里不再赘述。然后,安装插件扩展: 相关推荐:vscode入门教程 立即学习“C语言免费学习笔记(深入)”; 然后安装mingw-w64,对应自己电脑装…

    2025年3月13日 编程技术
    200
  • vscode如何运行py文件?

    vscode如何运行py文件? 1、首先需要确保安装了VScode的Python插件,打开Python脚本,可以直接拖入,点击文件,点击首选项里的用户设置,这时候会出现用户设置配置文件。 2、然后在左边文件Ctrl+F搜索Python关键字…

    2025年3月13日 编程技术
    200

发表回复

登录后才能评论