首页 前端知识 Vue 项目如何在VSCode中进行断点调试

Vue 项目如何在VSCode中进行断点调试

2024-05-26 00:05:35 前端知识 前端哥 483 618 我要收藏

概要:

简单介绍一下,在VSCode中如何对Vue项目进行断点调试。具体内容包括但不限于:如何配置调试环境、如何在代码中设置断点、如何启动调试以及如何解决在调试过程中可能遇到的问题。


实际开发中,我们的前端项目一般都是在浏览器中的开发者工具中调试。如果想在VS Code中 ,它也能像Visual Studio 中开发一样,直接打断点,就能命中断点。那岂不善哉!!!

一.如何配置调试环境

配置VSCode调试环境相当简单,不比网上其他一些文章,需要配置一堆对新手特别不友好的参数。看不懂,根本看不懂。。。那么,我们不用介绍其他过多配置文件以及如何使用,目前我们只要确保前后端环境都正常运转的情况下:

例如:我的后端项目能正常启用,浏览器直接能访问 http://localhost:7137/swagger/index.html

然后 前端项目也都OK,能正常访问后端。并且显示页面。这样就视为前后端环境都正常,这样就子就OK了。

二.如何在代码中设置断点

接下来,在我们的前端项目中。需要断点的函数前面,单击一下,变成红色点点后。就表明在该处打了断点,程序运行到该函数会命中断点。

三.如何启动VSCode 调试

最重要,也是最关键的地方来了。在VS Code中,点Debug的小图标,然后点击创建 launch.json文件,并且选择调试器,根据本人使用浏览器来。所以我选择了Edge

如下图,就是生成的 launch.json 文件

 上面配置中,大概的意思

  • version 版本号

  • type 启用调试器类型。讲人话就是,你用什么浏览器调试

  • request 启动配置的请求类型,默认 launch

  • name 要显示在“调试启动配置”下拉列表中的名称

  • webRoot 项目源码位置,默认

  • url 这个是重点的重点,即不是填后端的服务地址,也不是随便填一个地址。这个地址,是前端运行起来后的地址。项目使用yarn dev 把前端跑起来,本地服务地址是 http://localhost:6888/  ,然后就是需要把这个地址填在url 上。

前后端服务都正常跑起来后。已万事具备,找到VS Code Debug的小图标,先打断点,再点击开始调试。

这个过程,前端项目一定要在先运行起来,否则遇到各种各样的错误,例如,404或其他找不到页面等错误。

注意:VSCode 已启用调试,在中途打断点,是不会命中断点的。只能先打断点,再启动调试。否则会发现断点怎么老是不起作用。至于为什么会这样,自己去探索吧!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9498.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!