在 Visual Studio Code 中调试 Angular2 应用程序

Question

我正在尝试使用 VSC 开发一个基本的 angular2 应用程序。代码是用 TypeScript 编写的。它是一个基本的待办事项应用程序，所有代码（.ts、js、.js.map）都在 app/ 子文件夹中。

这是我运行时的 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 或在下拉菜单中选择“针对本地主机启动 Chrome...”）。