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已打开，但标准＆＃34; ...拒绝连接＆＃34;页面显示：

现在，只是尝试调试其中一个典型的＆＃34;管理模板＆＃34;。我可以通过终端完美地运行它：ng serve

然而，调试这个Angular应用程序正在逃避我。值得注意的是，我对Angular，Typescript和VSCode一般都是全新的。

Answer 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调试器找到它们。

在VSCode中调试Typescript

1 个答案: