调试篇：如何调试vue项目？

平时在开发vue项目的时候，会经常用到debugger调试，本期来探究一下，如何调试vue项目。

前置知识和准备

1、如何打断点？

断点分为很多种，比如普通断点、条件断点、DOM断点、异常断点等等，我这里主要介绍下怎么打最常用的普通断点。

方式一：通过debugger

function test() {
  debugger;
}

在代码中直接加一行debugger，就增加了一个打断点，注意如果要在浏览器中让断点生效，需要先按F12打开控制台，然后再让代码运行。

方式二：通过浏览器打断点
比如在chrome浏览器中，需要打断点的话，可以在sources中找到对应的源码文件，点击行号那里，浏览器会生成一个蓝色标，这就把断点打上了，然后再次点击同样的位置可以取消断点。

方式三：通过vscode编辑器打断点
在vscode中打断点很简单，点击代码行号的左侧，会出现一个小红点，意味着断点已经打上了，如果想取消断点的话，点击小红点即可。

2、在vscode中调试，需安装 JavaScript Debugger 扩展插件

在用vscode调试js之前，要确保先安装并启用了JavaScript Debugger扩展插件。

一、调试vue-cli创建的vue项目

1.1、创建项目

创建vue3项目，如果没安装vue-cli的，需要先执行npm install @vue/cli -g命令安装下。

vue create vue3-demo

这里需要注意下，给这个项目安装依赖的时候，node版本不能太低，比如我node用v12.18.3安装后，会报 Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree 错误，这里介绍下我的本地环境：

• @vue-cli版本：v5.0.8
• node版本：v18.16.0
• npm版本：v9.5.1

1.2、增加断点

我这里用的是setup语法，在App.vue中增加了如下代码：

// App.vue
<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  debugger;
})
</script>

由于我们创建项目的时候，选了eslint, 所以这里增加debugger代码后，在编译时会出现一条eslint报错。

我们先通过修改项目配置，忽略这个错误。

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
+ lintOnSave: false,
})

lintOnSave可以设置以下几个值：

1. default（默认值）：将编译错误输出到浏览器上，并导致编译失败；
2. true/warning：会输出编译警告，但不会导致编译失败；
3. error: 输出编译错误，并导致编译失败。
4. false: 不通过eslint-loader去检测代码。

当然，我们这种解决问题的方式，本质上只是把灰尘扫到地毯下面而已，实际开发中还要通过eslint规则的配置以及针对性修复来解决这些eslint报错，而不是忽略。

接下来我们先通过npm run serve去启动项目，然后通过vscode开始调试了。

1.3、创建vscode的调试文件launch.json

然后就可以开始创建配置文件了。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome", // 用 chrome 来进行调试
            "name": "debugger vue3", // 本次调试的名称
            "url": "http://localhost:8080", // 调试的网页url，这就是我们刚刚通过 npm run serve 跑起来的网页地址
            "request": "launch", // launch 指的是把上面 url 字段对应的网页跑起来
            "webRoot": "${workspaceFolder}" // 工作根目录
        }
    ]
}

通过这个配置文件，在vscode中把调试程序跑起来，如下所示：

会发现这里debugger竟然停在了一个App.vue?91a0的临时文件中。

这里简单解释下，由于vue-cli生成的项目，用的soure-map是eval-cheap-module-source-map，由于带了eval，导致生成的调试文件带了hash，所以只需要把eval去掉就好了。

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
+   configureWebpack: config => {
+     config.devtool = 'source-map';
+   }
})

这样修改完vue.config.js，我们重新运行下npm run serve重启下项目，然后发现就可以正常调试了。

1.4、优化soure-map

不过这样的话，我们用了性能更低的source-map，所以我单独在package.json加了一个调试命令。

// package.json
{
  "scripts": {
    "serve:debug": "vue-cli-service serve --debug"
  }
}

然后调整下vue.config.js的配置：

  // vue.config.js
  const { defineConfig } = require('@vue/cli-service')
+ const isDebug = process.argv.includes('--debug');
  module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    configureWebpack: config => {
-      config.devtool = 'source-map';
+      config.devtool = isDebug ? 'source-map' : 'eval-cheap-module-source-map';
    }
  })

以后我们如果需要调试的话，直接运行npm run serve:debug就行。

vue2的调试跟vue3类似，这里就不多说了。

1.5、假如调试无法启动怎么办？

如果调试启动失败了，很可能是你的路径有问题，由于我们的source-map是经过webpack进行生成的，所以最终可能调试的路径，无法映射到真实的项目路径中，这个时候就需要使用调试配置文件中的sourceMapPathOverrides选项了。

一般通过增加如下配置就能解决问题：

{
    "version": "0.2.0",
    "configurations": [
        {
             "type": "chrome", // 用 chrome 来进行调试
             "name": "debugger vue", // 本次调试的名称
             "url": "http://localhost:8080", // 调试的网页url，这就是我们刚刚通过 npm run serve 跑起来的网页地址
             "request": "launch", // launch 指的是把上面 url 字段对应的网页跑起来
             "webRoot": "${workspaceFolder}" // 工作根目录+
+            "sourceMapPathOverrides": { // sourceMap路径映射
+                "webpack:///src/*": "${workspaceFolder}/src/*",
+                "webpack://项目名字/src/*": "${workspaceFolder}/src/*"
+            }
        }
    ]
}

二、调试vite创建的vue项目

1. 先使用npm init vite@latest命令创建vue3项目
2. 使用npm install安装依赖
3. 使用npm run dev把项目跑起来

创建调试文件：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "debugger vue-vite-project",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

然后直接打断点，启动vscode调试就可以了，比较简单。