angular - 在 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. 安装“Chrome 调试器”- 扩展
2. 删除 launch.json 并创建一个新的(选择“Chrome”而不是“Node.js”)。
3. 将端口更改为 3000(如果您使用 lite-server，就像在英雄之旅教程中一样)并添加一个“userDataDir”:

例子:

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

1. 使用“npm start”(终端窗口或控制台)启动服务器。

2. 启动调试(F5 或在下拉列表中选择“针对本地主机启动 Chrome...”)。