在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服務

但是，調試這個Angular應用程序是在逃避我。 值得注意的是，我對Angular，Typescript和VSCode一般都是新手。

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調試器找到它們。