使用 VSCode 断点调试

原文链接：https://mp.weixin.qq.com/s/owhEQ6vUOZ1R_Pf1a6uRMQ

说到“断点调试”，好像都是浏览器内置的开发者工具专有功能，或者说都是后端 Java 开发用得比较多，前端开发反而不怎么使用断点调试！

本文编写时使用的 VSCode 版本: 1.102.2

Vue.js

Vue.js 项目启动调试时，不需要安装三方插件。（好像之前要装一个 debugger 插件？）

当然，如果觉得内置的调试功能不够用，也可以考虑安装 JavaScript Debugger (Nightly) 插件，插件地址：https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug-nightly&ssr=false#overview

1、安装依赖，启动项目：

记住项目启动的 IP 和端口号，Vue 默认启动的应该是 http://localhost:5173，本文用的 PPTist 项目启动的是本机IP：http://127.0.0.1:5173。

2、选择 Chrome 浏览器调试

没有 Chrome 也可以选择 Edge 浏览器，Edge 换成 Chromium 内核之后与 Chrome 差不多算是孪生兄弟，没啥区别。

3、修改调试配置

name 没啥用，就是显示到调试面板上的名字，主要是 url 字段，要修改为第一步中的项目启动 IP 和端口号，比如我的启动项目 http://127.0.0.1:5173。

4、启动调试

点击按钮或使用快捷键启动调试，VSCode 会启动浏览器打开网页，以后的断点调试都必须在这个浏览器窗口中完成，其他浏览器窗口是无效的！！

5、添加断点

在 VSCode 编辑器的代码行号边上点击即可添加断点。

6、查看断点数据

程序进入断点之后就会暂停运行，此时就可以查看当前程序的运行数据，可使用操作按钮控制程序前进、跳过等。

基本用法就介绍到这儿，断点调试还可以通过添加监视器查看变量、属性、方法等，有兴趣可以自行尝试一下~~

其他框架调试

除了 Vue 之外，VSCode 也支持其他开发框架调试，比如之前就折腾过的：

1、Nuxt.js

很早之前折腾过 Nuxt.js 项目在 VSCode 中玩断点调试，最后搞出来的 launch.json 长这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debugger",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "program": "${workspaceRoot}/node_modules/nuxt/bin/nuxt.js",
      "stopOnEntry": false,
      "args": [
        "dev",
        "--inspect"
      ],
      "cwd": "${workspaceRoot}",
      "sourceMaps": true,
      "env": {
        "NODE_ENV": "development",
      }
    },
  ]
}

VSCode 也迭代了无数版本了，不清楚上面这种配置还是否有效！！

2、express.js

之前也玩过 express 项目在 VSCode 中的运行和调试，产物 launch.json 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "program": "${workspaceFolder}\\src\\bin\\www"
    }
  ]
}

写在最后

说实话调试前端代码还是习惯用 Chrome 的开发者工具，前端的调试不像后端那么依赖开发工具，后端如果不会断点调试那开发起来是真的痛苦，但前端会了开发者工具基本上能搞定遇到的 80% 问题！！