概要:
简单介绍一下,在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 已启用调试,在中途打断点,是不会命中断点的。只能先打断点,再启动调试。否则会发现断点怎么老是不起作用。至于为什么会这样,自己去探索吧!