如何在VS Code中调试vue js应用程序?

时间:2016-11-08 14:49:52

标签: node.js debugging vue.js visual-studio-code

我使用vue init webpack my-test3创建了新的vue.js应用程序。

在VS Code(v1.7.1)中,我正在尝试调试此应用程序,默认launch.json已将程序设置为:

"configurations": [
    {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceRoot}/app.js",
        "cwd": "${workspaceRoot}"
    },

app.js不存在。我是否需要创建app.js,如果是,请创建哪些内容?如果没有,我在哪里指向program?或者我需要做一些完全不同的事情吗?

更新1

好的,我尝试将program更改为指向/src/main.js。这就是现在抛出ES 2015错误。

(function (exports, require, module, __filename, __dirname) { import
Vue from 'vue'
                                                              ^^^^^^ SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Timeout.Module.runMain [as _onTimeout] (module.js:604:10)
    at ontimeout (timers.js:365:14)
    at tryOnTimeout (timers.js:237:5)
    at Timer.listOnTimeout (timers.js:207:5)

我正在研究babelrc设置。此外,如果它有帮助,系统正在运行:

node     v6.9.1
npm      v3.10.8
babelrc  v6.18.0

1 个答案:

答案 0 :(得分:2)

所以在经历了一些绊脚石后,我认为调试的起点必须启动服务器,因此program设置为/build/dev-server.jslaunch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/build/dev-server.js",
            "cwd": "${workspaceRoot}"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Process",
            "port": 5858
        }
    ]
}

现在您可以通过按F5或转到Debug侧栏(Ctrl-Shift-D)然后选择“Launch Program”并单击绿色启动按钮来调试vue.js应用程序。您可以使用Ctrl-Shift-Y切换调试控制台窗口。

对于后代,首次尝试在应用程序的launch.json文件夹中调试时会创建.vscode