6

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
Pang
  • 9,564
  • 146
  • 81
  • 122
CrnaStena
  • 3,017
  • 5
  • 30
  • 48

1 Answers1

2

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.

CrnaStena
  • 3,017
  • 5
  • 30
  • 48
  • May I ask you the other part of the configuration? Because if this is the case, you will change my debug life :) – Stefano Nepa Nov 09 '16 at 20:56
  • I just stepped out, I'll update tomorrow with full launch.json. – CrnaStena Nov 09 '16 at 20:58
  • 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.... – Stefano Nepa Nov 09 '16 at 21:02
  • 1
    OK, just added full contents of the `launch.json`. I have not used, yet "Attach to Process" option. – CrnaStena Nov 10 '16 at 14:20
  • 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? – Stefano Nepa Nov 11 '16 at 01:58
  • 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. – CrnaStena Nov 11 '16 at 16:57
  • Any idea how to debug vue tests? – paul van bladel Mar 17 '17 at 13:18