如何在 Visual Studio Code 中成功调试 typescript？

Question

我注意到，如果您通常使用 Node 包管理器，您的 package.json 可以有如下内容：

(dependencies and devDependencies omitted)..
"scripts": {
    "start": "concurrently \"npm run tscwatch\" \"npm run lite\" ",
    "tsc": "tsc",
    "tscwatch": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  }

然后您只需进入您所在文件夹的级别并输入

npm install

然后

npm start

精简版服务器托管您的应用程序，并且 typescript 编译为 javascript。前提是你已经运行了相当于你的 typescript 配置并且有一个有效的 tsconfig.json。除此之外，我还想调试 Typescript，然后一堵墙让它工作。我知道您可以添加 VS Code 用来执行多种类型的启动程序的能力的“launch.json”。它们中的很多都适用于我在网上找到的简单应用程序，但对于我使用的 Angular 却不适用。但是当我尝试在 launch.json 中执行 NPM Start 时：

 {
        "type": "node",
        "request": "launch",
        "name": "Launch via NPM ProAngular Example",
        "runtimeExecutable": "npm",
        "args": ["${relativeFile}"],
        "runtimeArgs": [
            "start"
        ]
    }

它将运行，但随后尝试打开 Visual Studio Professional（其他人可能不是这种情况），然后出现如下错误：“无法连接到运行时进程，10000 毫秒后超时 - （原因：无法连接到目标: 连接 ECONNREFUSED 127.0.0.1:(port))。我已经尝试了 NPM 的其他配置来启动和其他事情。我只想在使用 Angular 完成后调试 Typescript，在 VS Code 中可以吗？

Answer 1

按照 VSCode 中的以下说明进行操作：

1- 下载latest release of VS Code 并安装Chrome debugger

2- 确保 Chrome 至少是 59 版（请参阅issue）

3- 使用 angular-cli 创建您的 Angular 应用

4- 创建一个 launch.jsonfile 来配置 VS Code 调试器并将其放在根文件夹的 .vscode 中。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome with ng serve",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceRoot}"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome with ng test",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    }
  ]
}

5. 通过在您最喜欢的终端中运行 ng serve 来启动您的 Angular 应用程序。

6. 在 VS Code 中按F5 或转到调试部分选择Launch Chrome with ng serve 然后单击绿色调试图标开始调试。