vscode调试vite项目断点（debugger）

一、配置launch.json文件

1. 首先看一下项目根目录下，是否存在launch.json文件

2. 如果不存在，则点击vscode左侧工具栏里点击“运行和调试”，选择添加配置。如果是用chrome浏览器，就选择图片所示的“Web 应用(chrome)”。如果是用edge，选择下一个选项。本文章采用chrome。

下图是默认生成的launch.json文件的默认内容。

参数	含义	默认值
type	配置的调试类型	‘chrome’
request	请求配置类型。可以是“启动”或“附加”。	Attach/Launch
name	配置名称；显示在启动配置下拉菜单中。（显示在下拉菜单中选择的启动命令的名字）	Launch Chrome against localhost
url	是要调试的地址。url里的端口地址需要修改一下，与你的项目一致，可能是5173，也可能是8080等等。	http://localhost:8080
webRoot	此设置指定 Web 服务器根的工作区绝对路径。默认是工作区根目录。	${workspaceFolder}

二、启动vite项目

示例项目是vite项目，启动后地址为： “http://localhost:5173”

三、修改launch.json文件

第一步生成的默认文件需要对应的修改url地址和端口等配置。修改后的代码为：

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5173/", // 修改为你的本地服务地址
      "webRoot": "${workspaceFolder}/front/src", // 指向项目源码目录
    }
  ]
}

注意！注意！注意！"webRoot"的值改动了，这个是因为我的vite项目不是根目录，而是某级子目录，如图所示：

四、启动debugger调试

点击调试功能栏里的调试，选择绿色的三角箭头，启动调试

启动后，会有一个悬浮的调试工具栏。上面有一些按钮可以操作，有快捷键，鼠标悬浮即可看到。

五、验证调试效果

在代码的行数前面，点击鼠标左键，可以打断点，如果可以正常调试了，那么断点的颜色就是红色的，vscode左下角的“断点”里会出现一行数据，对应刚才打的断点，并且颜色也是红色的。如果调试模式未成功，颜色则会是灰色的，事实上断点不会触发。

页面效果：箭头指向的是页面的加载进度条

到目前这个步骤，断点就生效了。

但是但是但是，如果vite项目在浏览器里的页面，如“http://localhost:5173”开启了F12控制台，断点就会走在浏览器里，而不是vscode里。如果关闭F12，断点就会走在vscode里，而不是浏览器的F12里