How to debug vue js application in VS Code?

Question

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

In VS code (v1.7.1), I try to debug this application, and by default launch.json has a program installed on:

 "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 what content? If not, where should I point the program to? Or do I need to do something completely different?

UPDATE 1

So, I tried changing the program to point to /src/main.js . This is now causing 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 learning babelrc setup. Also, if this helps, the system works:

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

Answer 1

So, after some stumbling, I realized that the starting point for debugging is to start the server, so program installed in /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 the vue.js application by pressing F5 or by going to the Debug sidebar ( Ctrl-Shift-D ), then selecting “Launch Program” and pressing the green launch button. You can switch the debug console window using Ctrl-Shift-Y .

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