Question

我正在尝试使用VSC开发一个基本的angular2应用程序。代码是用TypeScript编写的。它是一个基本的待办事项应用程序，所有代码（.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

你必须这样做：

为Chrome＆＃34; -Extension
删除launch.json并创建一个新的（选择＆＃34; Chrome＆＃34;而不是＆＃34; Node.js＆＃34;）。
将端口更改为3000（如果您使用lite-server，就像在tour-of-heroes-tutorial中一样）并添加＆＃34; userDataDir＆＃34;：

示例：

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

使用＆＃34; npm start＆＃34;启动服务器（终端窗口或控制台）。
启动调试（F5或选择＆＃34;针对localhost启动Chrome ...＆＃34;在下拉列表中）。

在Visual Studio代码

1 个答案: