概要：

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