如何在VS代碼中調試vue js應用程序？

我使用vue init webpack my-test3創建了新的vue.js應用程序。如何在VS代碼中調試vue js應用程序？

在VS代碼（V1.7.1），我試圖調試該應用程序和默認launch.json已計劃設置爲：

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

但app.js不存在。我是否需要創建app.js，如果是這樣的內容？如果不是，我在哪裏指向program？還是我需要做一些完全不同的事情？

UPDATE 1

好了，我試圖改變program指向/src/main.js。現在正在拋出ES 2015錯誤。

(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設置。此外，如果有幫助，系統運行：

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

來源

2016-11-08 CrnaStena

所以周圍的一些障礙之後，我計算過，起點調試已啓動服務器，因此program設置爲/build/dev-server.js，在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或調試側欄（Ctrl-Shift-D），然後選擇「啓動程序」並單擊綠色的開始按鈕來調試vue.js應用程序。您可以使用Ctrl-Shift-Y切換調試控制檯窗口。

對於後人，launch.json是在您第一次嘗試在您的應用程序的.vscode文件夾中進行調試時創建的。

來源

2016-11-08 16:08:42 CrnaStena

我可以問你另一部分的配置嗎？因爲如果是這樣的話，你會改變我的調試生活:) –

我剛剛走出去，明天我會用完整的launch.json更新。 – CrnaStena

這將是非常感激，也知道他的你的開發工作流程。像： - F5在VSCode - 這是它或 - NPM運行開發 - vsCode F5 - 等等.... –

如何在VS代碼中調試vue js應用程序？

回答

相關問題