在VSCode中调试Typescript

Question

我看到了很多关于旧版本VSCode（v1.16.1 - 这篇文章发布时的最新版本）或launch.json文件中已经弃用的属性的信息。

我尝试了许多配置属性，查看了GitHub论坛上的一些旧信息（由于这些属性已经消失或被弃用，有些不可行）。我正在尝试在VSCode中直接调试并命中Typescript代码中的断点。

目前，这是我的tsconfig.json文件：

    {
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/",
    "baseUrl": "src",
    "module": "commonjs",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "include": [
      "src/**/*.ts"
  ],
    "exclude": [
      "node_modules"
  ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

我在 Visual Studio Code 中的 launch.json 文件如下：

{
  "version": "0.2.0",
  "configurations": [
      {
          "name": "Launch Chrome",
          "type": "chrome",
          "request": "launch",
          "url": "http://localhost:3000/",
          "sourceMaps": true,
          "trace": true,
          "webRoot": "${workspaceRoot}/src",
          "userDataDir": "${workspaceRoot}/.vscode/chrome",
          "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*"
          }
      }
  ]
}

Chrome打开了，但是显示了标准的“...拒绝连接”页面： 现在，我只是试图调试一个典型的“管理模板”。我可以通过终端完美地运行它：ng serve。

然而，调试这个Angular应用程序让我困惑。值得注意的是，我完全不熟悉Angular、TypeScript和VSCode。

- SiriusBits

Answer 1

你是否尝试将配置文件中的outFiles属性指定为类似以下内容：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "sourceMaps": true,
            "outFiles": [
                "${workspaceRoot}/out/**/*.js"
            ]
        }
    ]
}

根据此文档，设置"sourceMaps": true可以告诉 vscode 将生成的 *.js 文件与 *.ts 文件进行映射。另外，还需要设置 outFiles 属性来告诉 vscode 在哪里查找这些 *.js 文件，如果它们不在同一个目录下。

从文档中得知:

如果生成的（编译后的）JavaScript文件不在其源文件旁边，而是在单独的目录中，则必须使用outFiles属性来帮助VS Code调试器找到它们。

- HaaLeo