Question

我试图从vs代码运行angular2项目。这是tsconfig，lanuch.json文件。

tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

launch.json

{
    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}/src",
            "sourceMaps": true
            // "runtimeExecutable": "/usr/bin/chromium-browser",
            // "sourceMapPathOverrides": {
            //     "webpack:///*": "/*"
            // }
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src"
            // "sourceMapPathOverrides": {
            //     "webpack:///*": "/*"
            // }
        }
    ]
}

我无法在我的vscode编辑器上设置断点。如果我这样做，由于映射问题，它会自动被禁用。

Answer 1

我在另一个问题中添加了a full explanation，但这是一个快速回顾：

将此添加到您的launch.json：

"diagnosticLogging": true

这会将大量额外信息转储到控制台中。只需查看其中一个TypeScript文件的名称，您就会看到Chrome希望找到源文件的路径。调整sourceMapPathOverrides以帮助它与实际路径相匹配，您就可以了。

VS Code源代码未正确映射

1 个答案: