调试和使用Visual Studio Code运行Angular2 Typescript吗? [英] Debug & Run Angular2 Typescript with Visual Studio Code?

问题描述

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

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

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

解决方案

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

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

1. 安装扩展名为"Chrome调试器".安装完成后，重新启动VS代码.

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

3. 在Launch.json配置部分中，使用以下config

   {
       "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"

5. 使用npm start命令并将Chrome作为默认浏览器运行项目.

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

7. 现在，在打字稿文件中的任意位置放置断点.

再次，使用VS代码转到调试窗口，然后单击运行". 您连接到调试器的选项卡/实例将如下所示.

Debug & Run Angular2 Typescript with Visual Studio Code?

I am trying to debug Angular2 typescript application with VS code https://angular.io/guide/quickstart

Can anyone please share steps to debug & run from VS code?

解决方案

After lot of research, I found these steps-

Before you begin, make sure you have latest version of VS code. You can verify latest version – Help > Check For Updates or About.

1. Install extension called 'Debugger for Chrome'. Once install complete, restart VS code.

2. Go to Debug window, open launch.json using Chrome.

3. In Launch.json configuration section, use below config

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

4. In tsconfig.json, make sure you have "sourceMap": true

This completes your debug environment settings. Now, before you start debugging, make sure all your existing Chrome.exe instances are closed. Verify from Task Manager OR Use DOS command ‘killall chrome’

5. Run your project, using npm start command and Chrome as default browser.

6. Once application is run successfully, you will receive port number. Copy URL from chrome browser and paste into url section above. (NOTE: If you are using routing in your application then url would like above otherwise it will be ending index.html etc)

7. Now, place breakpoints wherever you want in your typescript files.

8. Again, go to debug window in VS code, and hit Run. Your tab/instance connected to debugger will looks like below.

这篇关于调试和使用Visual Studio Code运行Angular2 Typescript吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！