在Visual Studio中調試Angular2應用程序代碼

我正在嘗試使用VSC開發基本的angular2應用程序。代碼是用TypeScript編寫的。這是一個基本的todo應用程序，所有的代碼（.ts，js，.js.map）都在應用程序/子文件夾中。在Visual Studio中調試Angular2應用程序代碼

這是運行我launch.json配置：

{ 
      "name": "Run", 
      "type": "node", 
      "request": "launch", 
      "program": "${workspaceRoot}/node_modules/lite-server/bin/lite-server", 
      "stopOnEntry": false, 
      "args": [], 
      "cwd": "${workspaceRoot}", 
      "preLaunchTask": null, 
      "runtimeExecutable": null, 
      "runtimeArgs": [ 
       "--nolazy" 
      ], 
      "env": { 
       "NODE_ENV": "development" 
      }, 
      "externalConsole": false, 
      "sourceMaps": false, 
      "outDir": null 
     },

當我運行它，應用程序加載在Chrome，但沒有我的斷點的工作。當我懸停一個斷點時，我看到「斷點被忽略，因爲找不到生成的代碼（源圖問題？）」。

我在/app/todo.component.ts中有一個斷點。在我/app/todo.component.js.map我可以看到：

"file":"todo.component.js","sourceRoot":"/Users/xxx/Documents/webs/angular2-todo/app/","sources":["todo.component.ts"],"names":[],"mappings":";;;;;;;;;;

來源的根和源似乎挺合我意。

任何想法？

來源

2016-06-11 Chux

如果你想使用Chrome擴展，則是指此調試 - http://stackoverflow.com/questions/36494938/debug-run-angular2-typescript-with-visual-studio-code?rq=1 – Sanket

它是否需要擴展chrome？ – Chux

是的......如果你想使用鍍鉻 – Sanket

你要做的：

安裝「Chrome瀏覽器調試器」 - 擴展
刪除launch.json，並創建一個新的（選擇「Chrome瀏覽器」而不是「的Node.js」）。
更改端口3000（如果您使用精簡版的服務器上，就像在巡迴的英雄教程），並添加一個「userDataDir」：

例如：

{ 
    "name": "Launch Chrome against localhost, with sourcemaps", 
    "type": "chrome", 
    "request": "launch", 
    "url": "http://localhost:3000", 
    "sourceMaps": true, 
    "webRoot": "${workspaceRoot}", 
    "userDataDir": "${workspaceRoot}/out/chrome" 
}

用「npm start」（終端窗口或控制檯）啓動服務器。
啓動調試（F5或在下拉菜單中選擇「在本地主機上啓動Chrome ...」）。

來源

2016-08-28 15:11:05

這將打擊ts文件中的斷點。我發現，userDataDir很重要！ –

這適用於https://github.com/angular/quickstart中的「tour-of-heroes-tutorial」項目，但它不適用於使用「ng new projectname」生成的項目，該項目不具有* .js＆ * .js.map文件在其src/app /目錄中。有沒有一種方法可以使用沒有生成src /下的文件的項目結構進行調試？ – kaefert

此外，您可以使用preLaunchTask選項來調用任務https://code.visualstudio.com/docs/editor/tasks，並讓該任務運行「npm start」以使所有工作都與f5 –

在Visual Studio中調試Angular2應用程序代碼

回答

相關問題