VS Code 调试vue项目

VS Code调试vue项目

准备工作

1. Debugger for Chrome

在调试Vue前端项目前, 需要先安装VS Code插件: Debugger for Chrome

安装过程, 这里就不再复述了.

2. 配置lanuch.json

点击侧边栏的调试图标, 打开调试页面。

在调试页面点击添加配置(Add configuragion), Chrome Debugger会生成一个.vscode/launch.json。可以在这个文件中添加调试启动参数。

比如我的项目中的配置如下（每次运行调试都会打开一个新的Chrome进程）：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",  
      "name": "vuejs:launch Chrome",  // 此项配置的名字，显示在调试页的配置选择下拉框中。
      "url": "http://localhost:8080",  // chrome 自动启动时打开的网址(开发环境启动的本地调试入口)。
      "webRoot": "${workspaceFolder}",  // 静态文件所在的本机目录(一般是项目根目录)。
      "sourceMaps": true
    }
  ]
}

Chrome Debugger需要知道项目代码存放的位置，因此需要配置webRoot，若在webpack的配置中做了特别处理(如: context: path.resolve(__dirname, 'somePath')或devServer:{contentBase: 'somePath'})，否则配置为项目根目录(${workspaceFolder})就可以了。

3. 配置devtool: "source-map"

本例中使用的vue前端工程是通过@vue/cli 3.0构建的, 配置devtool: "source-map", 则需要在根目录下的vue.config.js中添加以下配置:

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

调试代码

1. 运行本地调试环境

和正常开发流程一样, 开启本地调试环境: yarn serve.

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.102:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

注意: 开启的本地调试环境的入口地址: http://localhost:8080/ 须与launch.json中配置的url一致.

2. 调试代码

本例中, 我将App.vue中的createdHandler方法中打了一个断点. 如下图所示:

按下F5启动调试, 此时会主动打开一个chrome浏览器, 并转至: http://localhost:8080/, 过一会儿, 即会进入至断点处停下来. 这里我添加了一个watch: this.$route, 即可看到当前this.$route相关的属性及值, 如下图所示:

至此, 即可开始愉快的调试代码了!

VS Code调试@vue/cli 插件

今天项目当中, 碰巧需要对webpack插件或@vue/cli插件进行调试, 因此记录了下来

添加如下配置至launch.json, 如上方法一样, 在需要打断点的代码处打上标记, 按F5进行调试, 即可.

  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "plugin debugger",
      "program": "${workspaceFolder}/node_modules\\@vue\\cli-service\\bin\\vue-cli-service.js",
      "args": [
        "build",
        "--mode",
        "wcm"
      ]
    }
  ]
}