How to debug a Vue.js project with VS Code?

Introduction

This tutorial will use a brand new Vue.js project as a template for configuration, you can follow the tutorial step by step, or you can follow the tutorial to add the configuration to an existing project.

Warehouse address: https://github.com/mrlmx/debug-vuejs-project-with-vscode

Create project

Create a vue3 project through the create-vue scaffolding provided by vue.

 npm init vue@latest

Note: With the above command, a vite-based project is created, not a webpack-based project.

Then open the created project in VS Code:

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

• code is a command that comes with VS Code. If you are prompted that there is no such command when running, you can set it here .
• debug-vuejs-project-with-vscode is my project name.

Generate sourcemap file

Vite

If it is a project created by create-vue , modify the vite.config.ts configuration file and generate a sourcemap file in the development environment.

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

For more configuration, please refer to: https://vitejs.dev/config/build-options.html#build-sourcemap

Vue Cli

If it is a project created by vue-cli , modify the vue.config.js configuration file to generate a sourcemap file in the development environment.

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

For more configuration, please refer to: https://cli.vuejs.org/guide/webpack.html

Webpack

If it is a project built by yourself, modify the webpack configuration file defined by yourself, and generate a sourcemap file in the development environment.

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

For more configuration, please refer to: https://webpack.js.org/configuration/devtool/#devtool

configuration file

launch.json

Create the launch.json configuration file with the following steps (if this file already exists in your project, you can skip this step)

1. Select the Debug icon in the left menu to open the debug menu.
2. Click create a launch.json file to create a new configuration file.
3. Choose Web App (Edge), of course, you can also choose Web App (Chrome)

The generated launch.json file looks like this (different versions of VS Code may be slightly different):

 {
    // 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}"
        }
    ]
}

Replace the content of the generated launch.json file with the following configuration:

 {
  "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"
    }
  ]
}

In the above configuration, the following points need to be noted:

• type : Debug type of VS Code.

  • msedge means to use Edge browser for debugging.
  • chrome means to use Chrome browser to debug.

• url : The address accessed when the browser starts.

  • It needs to be changed to the development environment address of your project. If it is the same, there is no need to modify it.

• preLaunchTask : Set the tasks to be executed before entering the debug environment.

  • This name corresponds to the label attribute in the tasks.json file in the .vscode directory of the project.
  • The tasks.json file will be created below.

More information:

• For more configuration of the launch.json file, please refer to:

  • https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes

tasks.json

Create a tasks.json file in the project's .vscode directory and paste the following into it:

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

When the above configuration is executed, the running command is: npm run dev , if your project is other startup command, then modify it to the corresponding script name.

Note: Other optional values for ---7b7cba93563d7efb12441b27405f3db3 type are shell or process , don't be foolish to change it to yarn .

type : The type of task. For custom tasks, it can be set to shell or process .

• If set to shell , the command will be interpreted as a shell command (eg: bash, cmd, or PowerShell).
• If set to process , the command will be interpreted as a process to execute.

More information:

• For more configuration of tasks.json file, please refer to:

  • https://code.visualstudio.com/docs/editor/tasks#_custom-tasks
  • https://code.visualstudio.com/docs/editor/tasks-appendix

• For more information about the VS Code tasks function, please refer to:

  • https://code.visualstudio.com/docs/editor/tasks

break point

Let's change the contents of the src/views/AboutView.vue file slightly, and then hit two breakpoints.

 <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>

On lines 13 and 19 , 2 breakpoints are made respectively (on the left side of the corresponding line number, click the left mouse button to break the point):

Precautions

It should be noted that: Be sure to set a breakpoint before starting Debug, otherwise you will not be able to match the breakpoint.

After startup, it is invalid to add a new breakpoint in the source file, and the running compiled file cannot match the new breakpoint, unless the code of the source file is modified to trigger compilation, so that the newly generated compiled file will be mapped to the new breakpoint. point.

我猜测的原因是： *.vue SFC 格式的文件， script ， template ， style 3 个模块Split compilation actually runs the compiled js file, and every time the file is modified or the project is restarted, a new file will be compiled.

If you don't break the point ahead of time, the source file and the compiled file will not be linked.

pop-up prompt

In addition, I found that: regardless of whether the breakpoint is hit in advance, it will prompt at startup:

The task 'xxx' cannot be tracked. Make sure to have a problem matcher defined.

I searched, but I haven't found a particularly perfect solution for the time being. Here are two crappy methods:

Option One:

If you don't care about this prompt, you can click the "Debug Anyway" button every time, or check "Remember my choice for this task", and you will not be prompted every time you run it in the future. bother.

Option II:

Remove the preLaunchTask attribute in the launch.json file, and start the project manually before Debug. Anyway, the purpose of configuring preLaunchTask is to automatically start the project for you, the so-called do-it-yourself food and clothing.

Start Debug

After the above configuration, you can start the project in Debug mode. Let's introduce the two startup methods: "Shortcut Key" and "Manual Start".

Shortcut key: F5

If your project has only one Debug configuration, you can directly start the Debug mode through the F5 shortcut key, which is very simple and convenient, and is recommended for daily use.

Manual start

If your project has multiple Debug configurations, the configurations array of the launch.json file has multiple configuration objects.

At this time F5 the shortcut key starts the first configuration. If you want to start other Debug configuration, you need to manually select it.

As you can see, after clicking the "drop-down menu", two configuration options are displayed: vuejs: msedge and vuejs: chrome

The content of the launch.json configuration file in the example is as follows:

 {
  "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"
    }
  ]
}

Seeing this, you should have configured the debug environment, and now you can start happy debugging.

some problems

In the process of writing this article, I also found a few headaches, which are mentioned here by the way.

Before we start talking about these questions, let's take a look at this picture:

• Note 1: It is our code source file.

• Note 2: It is the compiled file that VS Code automatically opens after the breakpoint is hit at runtime.

  • His name could also be: AboutView.vue?t=1661699383436 .
  • There is a t parameter, which is a millisecond timestamp, which should be cached.
• Note 3: It is the first breakpoint, and the line number is 13.
• Callout 4: is the second breakpoint, and the line number is 19.

1. You must break the point first

We can see that during the running process, the breakpoint hit is actually the compiled file.

We mentioned earlier that adding a new breakpoint to the source file after running the Debug mode will not match under normal circumstances.

So what if I want to add a new breakpoint during debugging?

Method 1: Hit a new breakpoint directly in the "compiled file".

The disadvantage of this method is that it is a one-time breakpoint.

Because the new breakpoint is for this compiled file, if the source file is changed, a new file will be recompiled, then this breakpoint will be invalid and will not be matched in the future.

Method 2: Hit a new breakpoint directly in the "source file".

The downside of this method is that compilation needs to be triggered manually.

As mentioned earlier, after adding a new breakpoint to the source file, the running compiled file cannot be sensed, so the source file must be triggered to recompile and generate a new compiled file, so that all breakpoints in the source file are It will be mapped to the new compiled file synchronously.

The way I trigger recompilation every time is to add a line anywhere console.log("") , and then directly modify the printed content every time.

2. Inconsistent breakpoint locations

The line number of the source file and the compiled file breakpoint is the same, but the corresponding line number is different code, which is inconsistent with our expected breakpoint position:

After comparison, it can be seen that @vue/compiler-sfc automatically converts <script setup> syntactic sugar into Composition API style code, and adds some auxiliary code.

This leads to some problems in simply mapping the breakpoint position based on the line number, and unpredictable dislocation occurs.

My current solution is to manually add debugger to the corresponding position to ensure that I can hit the position I want.

Then in the compiled file after hitting the breakpoint, add other new breakpoints you want.

3. After the change, a new file will be compiled

As mentioned earlier, every time a source file is modified, a new file is compiled. This causes all previous breakpoints in the compiled file to fail.

After a while of debugging, there will be a lot of invalid breakpoint markers in VS Code. Although it does not affect the use, it looks a bit big.

I don't have a good solution for now, so I can only click the "Remove All Breakpoints" button after each debugging to remove all breakpoints.

The above are some of the problems I encountered. If you have a good solution, you can let me know in the comment area, and heart ❤️.

This article was first published at: https://github.com/mrlmx/blogs/issues/3 , if you like it, remember to like it~ 👍

refer to

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