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

查看:26
本文介绍了调试&使用 Visual Studio Code 运行 Angular2 Typescript?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

我正在尝试使用 VS 代码调试 Angular2 打字稿应用程序

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’

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

  2. 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)

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

  4. 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆