在 VSCode 中调试打字稿答案

【问题标题】：Debugging Typescript in VSCode在 VSCode 中调试打字稿
【发布时间】：2018-03-10 13:17:01
【问题描述】：

我看到很多关于似乎是旧版本的 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 完全陌生。

【问题讨论】：

标签： angular typescript visual-studio-code vscode-settings

【解决方案1】：

您是否尝试将配置的outFiles 属性指定为：

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

根据this docs 设置"sourceMaps": true 告诉vscode 将生成的*.js 与*.ts 文件映射。此外，您需要设置outFiles 属性来告诉vscode 如果它们不在同一个目录中，它应该在哪里查找那些*.js 文件。

来自文档：

如果生成的（转译的）JavaScript 文件不在其源代码旁边而是在单独的目录中，您必须通过设置outFiles 属性帮助 VS Code 调试器找到它们。 p>

【讨论】：