前端代码断点调试

不知道你是否依然还在使用console.log(...)调试前端代码，显然这样做效率很低，所以是时候在前端代码调试中也使用断点的方式 debug 了。

这里介绍如何在基于 Vue 的前端项目中使用 VSCode 进行断点调试。

VSCode 使用一个插件 JavaScript Debugger 进行前端代码调试，这个插件已经默认集成在较新版本的 VSCode 中。如果因为其它原因需要安装，可以自行安装：

首先启动一个前端项目，比如：

npm run uat

项目启动后会有一个端口号，比如：

http://localhost:5173/login

在.vscode目录添加启动项配置文件launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5173", // 确保与你的开发服务器地址一致
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

这里的webRoot配置成项目的根目录，一般就是${workspaceFolder}。

按F5即可启动一个调试模式的窗口以及对应的浏览器：

左侧可以查看变量、添加监视、调用堆栈、断点管理等。上侧的状态条可以进行断点调试的常见操作，比如步进、进入、跳出以及重启调试服务等。

与后端调试不同的是，所有的浏览器网络请求和控制台输出也会反映在这个界面中。

现在可以像后端调试一样在 JS/TS 代码中添加断点：

在页面执行操作触发这个断点：

代码执行停止在这里，并且左侧有相应的调试信息。之后就可以像普通后端调试一样一步步 debug 代码。

The End.