关于前端:如何使用-VS-Code-调试-Vuejs-项目

此教程会以一个全新的 Vue.js 我的项目作为模板进行配置，你能够追随教程一步步操作，也能够依照教程将配置增加到已有的我的项目中。

仓库地址：https://github.com/mrlmx/debug-vuejs-project-with-vscode

通过 vue 提供的 create-vue 脚手架，创立一个 vue3 我的项目。

npm init vue@latest

留神：通过上述命令，创立的是基于 vite 的我的项目，而不是基于 webpack 的我的项目。

而后在 VS Code 中关上创立后的我的项目：

code ./debug-vuejs-project-with-vscode

code 是 VS Code 自带的命令，如果你运行时提醒没有此命令，能够看这里设置一下。
debug-vuejs-project-with-vscode 是我的项目名称。

如果是通过 create-vue 创立的我的项目，则批改 vite.config.ts 配置文件，在开发环境生成 sourcemap 文件。

export default defineConfig({
  build: {sourcemap: true,},
  // other configs...
});

更多配置，请参考：https://vitejs.dev/config/build-options.html#build-sourcemap

如果是通过 vue-cli 创立的我的项目，则批改 vue.config.js 配置文件，在开发环境生成 sourcemap 文件。

module.exports = {
  configureWebpack: {devtool: "source-map"}
  // other configs...
};

更多配置，请参考：https://cli.vuejs.org/guide/webpack.html

如果是本人搭建的我的项目，则批改本人定义的 webpack 配置文件，在开发环境生成 sourcemap 文件。

module.exports = {
  devtool: "source-map",
  // other configs...
};

更多配置，请参考：https://webpack.js.org/configuration/devtool/#devtool

通过如下步骤，创立 launch.json 配置文件（如果你的我的项目中曾经存在该文件，则可跳过此步骤）

抉择左侧菜单中的 Debug icon，关上调试菜单。
点击 create a launch.json file，创立一个新的配置文件。
抉择 Web App（Edge），当然，你也能够抉择 Web App（Chrome）

生成的 launch.json 文件大抵长这样（不同版本的 VS Code 可能略有不同）：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-msedge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

将生成的 launch.json 文件内容，替换为下方配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      // 应用 Edge 浏览器调试
      "type": "msedge",
      // 应用 Chrome 浏览器调试
      // "type": "chrome",

      "request": "launch",
      "name": "vuejs: msedge",

      // 我的项目的拜访地址（须要改成你我的项目开发环境对应的地址和端口号）"url": "http://localhost:5173",

      "webRoot": "${workspaceFolder}",
      "pathMapping": {"/_karma_webpack_": "${workspaceFolder}"
      },
      "sourceMapPathOverrides": {"webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      },

      // 设置进入 debug 环境之前须要执行的工作。// 此名称对应我的项目中 .vscode 目录下 tasks.json 文件中的 label 属性）"preLaunchTask": "vuejs: start"
    }
  ]
}

下面的配置中，有以下几点须要留神：

type：VS Code 的 Debug 类型。
- msedge 的意思是应用 Edge 浏览器进行调试。
- chrome 的意思是应用 Chrome 浏览器进行调试。
url：浏览器启动时拜访的地址。
- 须要改为你我的项目的开发环境地址，如果统一则无需批改。
preLaunchTask：设置进入 debug 环境之前须要执行的工作。
- 此名称对应我的项目中 .vscode 目录下 tasks.json 文件中的 label 属性。
- tasks.json 文件上面会创立。

更多信息：

对于 launch.json 文件的更多配置，请参考：
- https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes

在我的项目的 .vscode 目录创立 tasks.json 文件，而后将下方内容粘贴进去：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "vuejs: start",
      "type": "npm",
      // 须要执行的命令（对应于 package.json 中的 scripts 命令）"script": "dev",
      "isBackground": true
    }
  ]
}

下面的配置在执行时，运行的命令是：npm run dev，如果你的我的项目是其余的启动命令，那么批改为对应的 script 名称即可。

留神：type 的其余可选值是 shell 或者 process，可不要傻乎乎的改成 yarn。

type：工作的类型。对于自定义工作，能够设置为 shell 或 process。

如果设置为 shell，则该命令将被解释为 shell 命令（例如：bash、cmd 或 PowerShell）。

如果设置为 process，则该命令将被解释为要执行的过程。

更多信息：

对于 tasks.json 文件的更多配置，请参考：
- https://code.visualstudio.com/docs/editor/tasks#_custom-tasks
- https://code.visualstudio.com/docs/editor/tasks-appendix
对于 VS Code tasks 性能，更多信息，请参考：
- https://code.visualstudio.com/docs/editor/tasks

咱们将 src/views/AboutView.vue 文件的内容略微改一下，而后打两个断点。

<script lang="ts" setup>
import {reactive, ref} from "vue";

const other = reactive([{ name: "lmx", age: 18},
  {name: "foo", age: 20},
  {name: "bar", age: 12},
]);
const count = ref(0);

const handlePlus = () => {console.log("plus before", count.value);
  count.value++;
  console.log("plus after", count.value);
};

const handleMinus = () => {console.log("minus before", count.value);
  count.value--;
  console.log("minus after", count.value);
};
</script>

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
      <p>{{count}}</p>
      <button @click="handlePlus">plus</button>
      <button @click="handleMinus">minus</button>
      <hr style="margin: 20px 0" />
      <p v-for="item of other" :key="item.name">
        {{item.name}}: {{item.age}}
      </p>
    </div>
  </div>
</template>

在第 13 行和第 19 行，别离打了 2 个断点（在对应行号右边，点击鼠标左键即可打断点）：

须要留神的是：肯定要在启动 Debug 前打好断点，否则你将无奈匹配到断点。

启动之后，在源文件中增加新的断点是有效的，运行中的编译文件无奈匹配到新的断点，除非批改源文件的代码触发编译，这样新生成的编译文件才会映射到新断点。

我猜想的起因是：因为 *.vue 这种 SFC 格局的文件，须要将 script，template，style 这 3 个模块拆分编译，理论运行的是编译后的 js 文件，而且每次文件批改或者重启我的项目之后，都会编译出新的文件。

如果不提前打断点，那么源文件和编译后的文件将不会关联上。

另外，我发现：不论是否提前打了断点，在启动时都会提醒：

The task ‘xxx’ cannot be tracked. Make sure to have a problem matcher defined。

我搜了一下，临时没有找到特地完满的解决方案，这里提供两种糟糕的办法：

计划一：

如果你不在意这个提醒的话，能够每次都点击一下「Debug Anyway」按钮，或者勾选一下「Remember my choice for this task」，当前每次运行的时候就不会提醒了，所谓眼不见心不烦。

计划二：

把 launch.json 文件中的 preLaunchTask 属性去掉，Debug 之前本人手动启动我的项目，反正配置 preLaunchTask 的目标就是主动帮你把我的项目启动起来，所谓本人入手饥寒交迫。

通过上述配置之后，就能够通过 Debug 模式启动我的项目了，咱们来别离介绍一下「快捷键」和「手动启动」这 2 种启动形式。

如果你的我的项目只有 1 个 Debug 配置的话，能够间接通过 F5 快捷键启动 Debug 模式，十分的简略不便，举荐日常应用。

如果你的我的项目有多个 Debug 配置，launch.json 文件的 configurations 数组有多个配置对象。

这个时候 F5 快捷键启动的就是第一个配置，如果你想要启动其余 Debug 配置，就须要通过手动抉择了。

能够看到，点击「下拉菜单」之后，展现了 2 个配置选项：vuejs: msedge 和 vuejs: chrome

示例中 launch.json 配置文件的内容是这样的：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "vuejs: msedge",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}",
      "pathMapping": {"/_karma_webpack_": "${workspaceFolder}"
      },
      "sourceMapPathOverrides": {"webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      },
      "preLaunchTask": "vuejs: start"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}",
      "pathMapping": {"/_karma_webpack_": "${workspaceFolder}"
      },
      "sourceMapPathOverrides": {"webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      },
      "preLaunchTask": "vuejs: start"
    }
  ]
}

看到这里，你应该曾经把 debug 的环境配置好了，当初能够开始欢快的调试了。

在我写这篇文章的过程中，也发现了几个让我头痛的问题，这里顺带提一下。

在开始说这些问题之前，咱们先看一下这张图：

标注 1：是咱们的代码源文件。
标注 2：是运行时命中断点后，VS Code 主动关上的编译后的文件。
- 他的名字也有可能是：AboutView.vue?t=1661699383436。
- 有一个 t 参数，是一个毫秒工夫戳，应该是防止缓存的。
标注 3：是第一个断点，行号是 13。
标注 4：是第二个断点，行号是 19。

咱们能够看到，在运行过程中，其实断点命中是编译后的文件。

后面咱们提到，在运行 Debug 模式之后再去源文件中增加新断点，失常状况下是无奈匹配的。

那如果我在调试过程中，想要增加新断点该怎么办呢？

办法 1： 间接在「编译后的文件」中打新断点。

此办法的弊病是：他是个一次性的断点。

因为新断点是针对这个编译文件的，如果源文件改变后，会从新编译出新的文件，那么这个断点将会生效，后续将不会被匹配到。

办法 2： 间接在「源文件」中打新断点。

此办法的弊病是：须要手动触发编译。

后面也提到过，在源文件中增加新断点之后，运行中的编译文件是无奈感知到的，所以必须让源文件触发从新编译，生成新的编译文件，这样源文件的所有断点就会同步映射到新的编译文件中了。

我每次触发从新编译的形式是，轻易在某个中央增加一行 console.log("")，而后每次间接批改打印的内容即可。

源文件和编译后的文件断点的行号统一，然而对应的行号却是不同的代码，和咱们预期的断点地位不统一：

比照之后能够看出，@vue/compiler-sfc 主动将 <script setup> 语法糖转换为了 Composition API 格调代码，并且增加了一些辅助代码。

这就导致单纯的依据行号映射断点地位会有些问题，呈现了无奈预知的错位状况。

我目前的解决方案是，手动在对应的地位加上 debugger，确保可能肯定命中在我想要的地位上。

而后在命中断点后的编译文件中，加上其余想要的新断点。

后面曾经提到过，在每次批改完源文件后，都会编译出新的文件。这就导致之前在编译文件中的断点全副生效。

一顿调试之后，VS Code 中会有大量的有效断点标记，虽说不影响应用，然而看起来有拍板大。

我临时没有什么好的解决方案，所以只能在每次调试完结之后，点击「Remove All Breakpoints」按钮，移除所有断点。

以上就是我遇到的一些问题，如果你有好的解决方案，能够在评论区告知一下，比心 ❤️。

本文首发于：https://github.com/mrlmx/blogs/issues/3，如果喜爱，记得去点个赞哦~ 👍

https://vuejs.org/guide/quick-start.html
https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli

关于前端:如何使用-VS-Code-调试-Vuejs-项目

简介

创立我的项目

生成 sourcemap 文件

Vite

Vue Cli

Webpack

配置文件

launch.json

tasks.json

打断点

注意事项

弹窗提醒

启动 Debug

快捷键：F5

手动启动

一些问题

1. 必须先打断点

2. 断点地位不统一

3. 改变后会编译出新文件

参考

Just My Socks（注册教程内含优惠码）

关于前端:如何使用-VS-Code-调试-Vuejs-项目

简介

创立我的项目

生成 sourcemap 文件

Vite

Vue Cli

Webpack

配置文件

launch.json

tasks.json

打断点

注意事项

弹窗提醒

启动 Debug

快捷键：F5

手动启动

一些问题

1. 必须先打断点

2. 断点地位不统一

3. 改变后会编译出新文件

参考

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）