angular - 使用 Visual Studio Code 调试和运行 Angular 2 Typescript？

Question

使用 Visual Studio Code 调试和运行 Angular2 Typescript？

我正在尝试使用 VS 代码调试 Angular2 typescript 应用程序 https://angular.io/guide/quickstart

任何人都可以分享从 VS 代码调试和运行的步骤吗？

Answer 1

经过大量研究，我发现了这些步骤-

开始之前，请确保您拥有最新版本的 VS 代码。您可以验证最新版本 - 帮助 > 检查更新或关于。

1. 安装名为“Chrome 调试器”的扩展程序。安装完成后，重新启动 VS 代码。

2. 转到“调试”窗口，使用 Chrome 打开 launch.json。

3. 在 Launch.json 配置部分，使用下面的配置

   {
       "name": "Launch localhost with sourcemaps",
       "type": "chrome",
       "request": "launch",
       "url": "http://localhost:3000/Welcome",
       "sourceMaps": true,
       "webRoot": "${workspaceRoot}"
   }
   

4. 在 tsconfig.json 中，确保你有 "sourceMap": true

这样就完成了您的调试环境设置。现在，在开始调试之前，确保所有现有的 Chrome.exe 实例都已关闭。从任务管理器验证或使用 DOS 命令“killall chrome”

1. 运行您的项目，使用 npm start 命令并使用 Chrome 作为默认浏览器。

2. 应用程序成功运行后，您将收到端口号。从 chrome 浏览器复制 URL 并粘贴到上面的 url 部分。(注意:如果您在应用程序中使用路由，那么 url 会像上面那样，否则它将以 index.html 等结尾)

3. 现在，在 typescript 文件中的任意位置放置断点。

4. 再次，转到 VS 代码中的调试窗口，然后点击“运行”。您连接到调试器的选项卡/实例如下所示。