如何在VS代码中调试vue js应用程序? [英] How do I debug vue js application in VS Code?

查看:2348
本文介绍了如何在VS代码中调试vue js应用程序?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

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

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}"
    },

app.js 不存在。我需要创建 app.js ,如果是这样的内容?如果没有,我在哪里指向程序?还是需要做一些完全不同的事情?

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?

更新1

Ok ,所以我尝试更改程序指向 /src/main.js 。这就是现在抛出 ES 2015 错误。

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


(function(exports,模块__filename,__dirname){import
Vue from'vue'
^^^^^ SyntaxError:意外的令牌导入
在Object.exports.runInThisContext(vm.js:76:16 )
在Module._compile(module.js:542:28)
在Object.Module._extensions..js(module.js:579:10)
在Module.load(模块.js:487:32)
在tryModuleLoad(module.js:446:12)
在Function.Module._load(module.js:438:3)
在Timeout.Module。 runMain [as _onTimeout](module.js:604:10)
ontimeout(timers.js:365:14)
在tryOnTimeout(timers.js:237:5)
在定时器.listOnTimeout(timers.js:207:5)

(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设置,而且如果有帮助,系统正在运行:

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


推荐答案

所以经过一些绊倒,我认为调试的起点必须启动服务器,因此程序设置为 /build/dev-server.js ,在 launch.json

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
        }
    ]
}

现在您可以通过按F5或进入Debug侧栏( Ctrl-Shift-D )来调试vue.js应用程序,然后选择Launch Pro克并点击绿色开始按钮。您可以使用 Ctrl-Shift-Y 切换调试控制台窗口。

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.

对于后代,在您的应用程序的 .vscode 文件夹中第一次尝试调试launch.json

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

这篇关于如何在VS代码中调试vue js应用程序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆