Angular 如何在VisualStudio代码中成功调试typescript？

我注意到，如果您使用的是Node Package Manager，则通常可以使用您的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

然后

lite服务器托管您的应用程序，typescript编译为javascript。前提是您已经运行了与typescript配置相同的配置，并且具有有效的tsconfig.json。撇开这一点不谈，我想调试打字脚本，然后一堵接一堵地运行它。我知道您可以添加“launch.json”，VS Code使用它来执行多种启动程序的功能。它们中的很多对于我在网上找到的简单应用程序来说都很好，但在我使用它的时候，它们并不是棱角分明的。但是当我尝试在launch.json中执行NPM启动时，类似于：

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

---

它将运行，但随后尝试打开Visual Studio Professional（其他人可能不是这样），然后出现错误，如：“无法连接到运行时进程，10000毫秒后超时-（原因：无法连接到目标：connect EconRefused 127.0.0.1:（端口））。我已经尝试了NPM的其他配置，用于启动和其他操作。我只想在使用Angular完成Typescript时调试它，这在VS代码中是否可行？

在VSCode中按照以下说明操作：

1-下载并安装

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

3-使用

4-创建

launch.jsonfile

以配置VS代码调试器，并将其放入根文件夹中的

.vscode

中

{
“版本”：“0.2.0”，
“配置”：[
{
“类型”：“铬”，
“请求”：“启动”，
“名称”：“使用ng serve发布Chrome”，
“url”：”http://localhost:4200/#",
webRoot:“${workspaceRoot}”
},
{
“类型”：“铬”，
“请求”：“启动”，
“名称”：“通过ng测试启动Chrome”，
“url”：”http://localhost:9876/debug.html",
webRoot:“${workspaceRoot}”
}
]
}

您的标题是visual studio代码，而文本是visual studio，请找出您使用的是哪一个。这对响应非常重要。这是visual studio代码，它无意中打开了visual studio。不知道为什么它会使用我使用的配置进行此操作。为什么您特别需要在visual studio代码中进行调试？使用Chrome developer tools调试器既快捷又简单，这就是为什么大多数开发人员喜欢这样做的原因。你不能在Chrome tools中调试Typescript，对吗？这有点有效。我仍然需要确保Typeings配置设置为进行映射。我需要先运行NPM start，然后才能正确附加。但一旦完成所有操作，它就会自动启动工作。我希望NPM启动配置可以做到这一点。第3点似乎是一个旁白，因为我不需要它，而你的第4点实际上只需要第一个配置就可以有效地调试Typescript。除此之外，尽管你的配置将有效地附加到Typescript，所以如果没有人提供更好的配置你得到了答案。你可以在

package.config

中安装

ng服务器

，然后在调试之前运行npm start，我将把它添加到answer中。你是对的

typescript

映射是必需的，但它与

VSCode

调试无关，即使你想在开发工具中调试，这也是必需的。我一直在挣扎如果你不介意的话，我可以问一下为什么要放在后面吗？

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