使用 VSCode 调试 Vue 项目

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 VSCode 调试 Vue 项目相关的知识,希望对你有一定的参考价值。

参考技术A launch.json :

vue.config.js :

按 F5 启动 chrome 开始调试

VSCode调试vue项目

先决条件


 

你必须安装好 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配置,将内容替换成以下内容

 

技术分享图片

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

 

设置断点


 

此处response返回数据

技术分享图片

 

 启动调试


 

在终端使用如下命令开启这个应用

 

npm start

 

进入Debug视图,选择‘vuejs:chrome’配置,然后按F5或点击绿色的play按钮

 

随着一个新的 Chrome 实例打开 http://localhost:8080,你的断点现在应该被命中了。

技术分享图片

 

 更多内容请参考官方文档:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

 

以上是关于使用 VSCode 调试 Vue 项目的主要内容,如果未能解决你的问题,请参考以下文章

VSCode调试vue项目

总结vscode调试vue,nodejs的各种方法

vscode运行项目出现一堆版本

vscode 调试vue.js程序

使用 VS Code 调试 Vue.js 应用程序。错误未验证断点

Vue提供的三种调试方式