在Visual Studio代码中调试Angular2应用程序

Question

我正在尝试使用VSC开发一个基本的angular2应用程序.代码是用TypeScript编写的.它是一个基本的todo应用程序,所有代码(.ts,js,.js.map)都在app /子文件夹中.

这是Run的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":";;;;;;;;;;

源根和来源对我来说似乎没问题.

有任何想法吗？

Answer 1

你必须做:

1. 安装"Debugger for Chrome" - 扩展
2. 删除launch.json并创建一个新的(选择"Chrome"而不是"Node.js").
3. 将端口更改为3000(如果您使用lite-server,就像在tour-of-heroes-tutorial中)并添加"userDataDir":

例:

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

4. 使用"npm start"(终端窗口或控制台)启动服务器.

5. 启动调试(F5或在下拉列表中选择"针对localhost启动Chrome ...").