VSCode调试vue项目

最新推荐文章于 2025-06-07 09:06:49 发布

原创最新推荐文章于 2025-06-07 09:06:49 发布 · 5.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前端专栏收录该内容

5 篇文章

订阅专栏

本文指导如何在VSCode中配置并使用Debugger for Chrome扩展来调试Vue应用，包括更新webpack配置以构建sourcemap，设置VSCode调试配置，以及如何在代码中设置断点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先决条件

你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。

在可以从 VS Code 调试你的 Vue 组件之前，你需要更新 webpack 配置以构建 source map。做了这件事之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系。

打开 config/index.js 并找到 devtool 属性。将其更新为：

devtool: 'source-map',

如果使用 vue-cli3 你需要设置 vue.config.js 内的 devtool 属性：

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

进入Debugger视图，添加Chrome配置，将内容替换成以下内容
Alt

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}