How do I debug vue js application in VS Code?

Question

I've created new vue.js application using vue init webpack my-test3.

In VS Code (v1.7.1), I am trying to debug this application and default launch.json has program set to:

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

but app.js does not exist. Do I need to create app.js, if so with which content? If not, where do I point program to? Or do I need to do something completely different?

UPDATE 1

Ok, so I tried changing program to point to /src/main.js. That is throwing now ES 2015 error.

(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)

I am looking into babelrc setup. Also if it helps, system is running:

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

Solution

So after some stumbling around, I figured that starting point for debug has to start the server, hence program is set to /build/dev-server.js, in launch.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
        }
    ]
}

Now you can debug vue.js application, either by pressing F5 or by going to Debug sidebar (Ctrl-Shift-D) then selecting "Launch Program" and clicking on green start button. You can toggle debug console window with Ctrl-Shift-Y.

For posterity, launch.json is created first time you try to debug in .vscode folder of your application.

Comments

[Stefano Nepa]

May I ask you the other part of the configuration? Because if this is the case, you will change my debug life :)

[CrnaStena]

I just stepped out, I'll update tomorrow with full launch.json.

[Stefano Nepa]

It will be very appreciated, and also to know how his your dev workflow. Like: - f5 in VSCode - that's it or - npm run dev - vsCode f5 - etc....

[CrnaStena]

OK, just added full contents of the launch.json. I have not used, yet "Attach to Process" option.

[Stefano Nepa]

I'm sorry, but I'm not able to put breakpoint in my .vue files... May I ask you if you can explain more on how do you make it works?

[CrnaStena]

Well, .vue files are templates for front-end, and such are hard to debug on the server. You can do some debugging in chrome. Only way that you can debug in vscode, is to build an extension that is specific for vue. I could be wrong. You might want to ask vue developers/community if they plan to build such extension for vscode.

[paul van bladel]

Any idea how to debug vue tests?