在Vue和Webpack的VS Code中设置调试配置

Question

因此，我正在尝试配置Vue应用以在Visual Studio Code中进行调试。

这是我的package.json

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js",
    "debug-server": "node --inspect-brk=9229 server.js"
},

还有我的launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch webpack",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/movie_rating_app/node_modules/webpack/bin/webpack.js",
            "args":[
                "--inline", "--progress", "--config", "${workspaceFolder}/movie_rating_app/build/webpack.dev.conf.js"
            ]
        },
        {
            "name": "Launch server",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}/movie_rating_app",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run-script", "debug-server"
            ],
            "port": 9229
        },
        {
            "name": "vuejs: chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/movie_rating_app/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}

为了使应用程序运行，我执行以下操作

  

npm run start //执行webpack-dev-server

     

nodemon server.js //启动服务器，连接到MongoDB

然后我可以浏览http://localhost:8080 ...

我正在尝试调试我的应用。

到目前为止，配置Launch server的执行与node server.js相同，我可以在server.js文件上设置断点并进行调试。

配置vue: chrome也可以按预期工作。它会启动浏览器，并且我可以调试*.vue文件

但是我不知道我是否缺少什么。此时，我仍然需要运行npm start来执行webpack-dev-server命令。然后运行“启动webpack”配置，但没有活动的调试会话，它运行了，而vs代码却没有任何反应。

  

C：\ Program Files \ nodejs \ node.exe --inspect-brk = 11310 movie_rating_app \ node_modules \ webpack \ bin \ webpack.js --inline --progress --config C：\ Users \ BFuentes \ Documents \ GitHub \ Javascript \ movie_rating_app / movie_rating_app / build / webpack.dev.conf.js   侦听ws：//127.0.0.1：11310 / 50718d36-6b86-43ad-b7bd-75f57fcf982c的调试器   如需帮助，请参见：https://nodejs.org/en/docs/inspector     0％编译10％构建模块0/1模块1个活动中…rating_app \ movie_rating_app \ src \ main.js

是否真的需要为webpack添加调试配置，或者我可以简单地在常规命令行中运行该命令，然后为vue和server启动两个调试配置？