CODEWITHSUNDEEP
node.jsdebuggingvue.jsvisual-studio-code
CrnaStena
CrnaStena

Reputation: 3167

How do I debug vue js application in VS Code?

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

Upvotes: 6

Views: 14907

Answers (1)

CrnaStena
CrnaStena

Reputation: 3167

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.

Upvotes: 2

Related Questions