Question

一直试图在Visual Studio Code中设置一个调试器来对我的打字稿进行操作，但是现在已经在墙上敲打了一段时间。首先，这是我的项目结构：

├───.vscode
├───dist
│   ├───client
│   │   └───app
│   │       ├───about
│   │       ├───home
│   │       ├───login
│   │       ├───_css
│   │       ├───_guards
│   │       ├───_helpers
│   │       ├───_models
│   │       └───_services
│   └───server
│       └───routes
└───src
    ├───client
    │   └───app
    │       ├───about
    │       ├───home
    │       ├───login
    │       ├───_css
    │       ├───_guards
    │       ├───_helpers
    │       ├───_models
    │       └───_services
    └───server
        └───routes

所以基本上我已经运行了，并且转换了typescript＆gt; javascript，以及将所有资源（html，css，图像等）移动到“dist”目录。 “client”目录是保存Angular2的所有目录，而“server”目录是运行我的Express服务器的目录。

我的快递服务器服务于“客户端”目录，它似乎工作正常。基本上整个应用程序运行良好...我可以调用我在快递中构建的RESTful端点，我也可以导航到位于客户端目录根目录中的“index.html”。 Angular模块可以很好地加载所有东西。

无论如何，问题是我希望能够从visual studio代码中调试我的所有角度打字稿文件。这是我目前的启动配置：

{
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceRoot}/dist/server/startup.js",
      "sourceMaps": true,
      //"preLaunchTask": "default",
      "outFiles": [
        "${workspaceRoot}/dist/**/*.js",
        "${workspaceRoot}/dist/*.js"
      ],
      "env": {
        "NODE_ENV": "development"
      },
      "protocol": "auto"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Client",
      "sourceMaps": true,
      "port": 5858,
      "address": "localhost",
      "restart": false,
      "localRoot": "${workspaceRoot}/dist/client"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": [
        "Server",
        "Client"
      ]
    }
  ]
}

我正在使用VS Code的复合启动配置来有效地启动两个调试器......一个会打到我的“服务器端”代码，另一个会打到角度方面。但是我不能为我的生活让客户端方面工作。服务器端工作得很好，我可以单步执行所有RESTful端点，而不是在打字稿内。但是，无法单步执行“client”目录中的任何内容。

已经耗尽了无数个小时阅读调试设置并在互联网上搜索其他可能的解决方案。仍然没有运气:(无论如何，有人能指出我正确的方向吗？如何设置“客户端”调试器才能通过角度应用程序？

我希望能够在VS Code中单击一个绿色的“启动”按钮，然后关闭并运行。我是一个懒惰的程序员，不喜欢每次都要运行多个命令。：）

Answer 1

此配置最终为我工作。

{
  "version": "0.2.0",
  "configurations": [

    //node config
    {
      "type": "node",
      "request": "launch",
      "name": "nodemon",
      "runtimeExecutable": "nodemon",
      "program": "${workspaceRoot}/index.js",
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    //angular config
    {
      "type": "chrome",
      "request": "launch",
      "name": "Angular",
      "url": "http://localhost:3000/#",
      "webRoot": "${workspaceRoot}"
    }
  ],
  "compounds": [
    {
      "name": "Compound",
      "configurations": ["nodemon", "Angular"]
    }
  ]
}

唯一需要注意的是我需要在控制台中运行ng build -w，以便更新我的角度变化。

Answer 2

Per @ Mika571请求。这是在我们的设置中用于调试打字稿文件的配置：

{
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "program": "${workspaceRoot}/src/server/server.js",
      "sourceMaps": true,
      "outFiles": [
        "${workspaceRoot}/dist/**/*.js",
        "${workspaceRoot}/dist/*.js"
      ],
      "env": {
        "NODE_ENV": "development"
      },
      "protocol": "auto"
    },
    {
      "name": "Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000/",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}",
      "userDataDir": "${workspaceRoot}/.vscode/chrome"
    }
  ],
  "compounds": [
    {
      "name": "Server/Client",
      "configurations": [
        "Server",
        "Client"
      ]
    }
  ]
}

您还需要确保在VS Code中启用了chrome扩展程序的调试程序。

VS Code：用express来帮助调试角度2

2 个答案: