Question

我目前在使用Vue.js中的VSCode正确调试测试时遇到一些问题（我正在使用Mocha和Webpack）

我发现使我更接近的第一个配置是这个。

.vscode / launch.json中的

配置

{
        "type": "node",
        "request": "launch",
        "name": "Unit Tests",
        "program": "${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service.js",
        "args": [          
          "test:unit"                    
        ],
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen"
}

现在此解决方案确实附上了，但问题是它只是在vue-cli-service.js（node_modules/@vue/cli-service/bin/vue-cli-service.js）内进行调试。我在这里尝试了很多，但没有走得更近。所以我以为自己会自己编写一个Configuration，因为Vue只是使用Webpack和Mocha，这应该是可能的。现在我已经接近了，但仍然没有找到实际可用的版本。现在，这是我的配置

.vscode / launch.json中的

配置

{
        "name": "Run mocha-webpack",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/node_modules/mocha-webpack/bin/mocha-webpack",
        "args": [
            "--debug-brk", "5858",
            "--timeout", "120000",            
            "--require", "node_modules/@vue/cli-plugin-unit-mocha/setup.js",
            "--webpack-config", "node_modules/@vue/cli-service/webpack.config.js",
            "tests"
        ],
        "sourceMapPathOverrides": {
          "webpack:///./~/*": "${workspaceRoot}/node_modules/*",
          "webpack:///./*": "${workspaceRoot}/*",
          "webpack:///*": "*"
        },
        "stopOnEntry": false,
        "sourceMaps": true,
        "cwd": "${workspaceRoot}",
        "preLaunchTask": null,
        "runtimeExecutable": null,
        "runtimeArgs": [
        ],
        "env": { "NODE_ENV": "test"},
        "console": "integratedTerminal",
        "outFiles": []
}

现在，这使我更近了一步。现在，我至少可以在代码中设置调试器语句，调试器将在此处停止。但是，它仍然不会对我使用VSCode设置的断点做出反应。我猜想这必须与代码的编译和sourceMapping有关，但是到目前为止，我还无法完成这项工作。

Answer 1

根据环境将Webpack配置为有条件的行为。 Working with Webpack的文档Modes and Environment Variables 和Vue CLI中对此进行了描述。

对于test使用的vue-cli-service test:unit模式，请对devtool进行修改以使其不进行代码转换，例如cheap-module-eval-source或eval-source-map。

vue.config.js

module.exports = {
  configureWebpack: config => {
    if ((process.env.NODE_ENV === 'development') || (process.env.NODE_ENV === 'production')) {
      config.devtool = 'source-map'
    }
    else if (process.env.NODE_ENV === 'test') {
      config.devtool = 'cheap-module-eval-source-map'
    }
  }  
}

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "test:unit debug",
      "program": "${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service.js",
      "args": ["test:unit", "--inspect-brk", "--timeout", "900000"],
      "port": 9229
    }
  ]
}

Answer 2

好的，TLDR

vue.config.js

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'test') {
      config.merge({
        devtool: 'cheap-module-eval-source-map',
      });
    }
  }
}

launch.json

{
      "type": "node",
      "request": "launch",
      "name": "Run Unit Tests",
      "program": "${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service.js",
      "args": ["test:unit", "--inspect-brk", "--watch", "--timeout", "999999"],
      "port": 9229
}

您想要做的是链接webpack配置，以便在测试时将devtool更改为不会像“ cheap-module-eval-source”之类的代码。

感谢rustyx在GitHub上指出了这一点。

使用VSCode在Vue.js中调试Mocha单元测试的配置

2 个答案: