在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应用程序代码

回答

相关问题