码迷,mamicode.com
首页 > 其他好文 > 详细

Visual Studio Code 通过 Chrome插件Type Script断点调试Angular 2

时间:2017-12-12 23:59:18      阅读:401      评论:0      收藏:0      [点我收藏+]

标签:c#   als   config   code   web   out   alt   conf   lin   

1、 下载Visual Studio Code (https://code.visualstudio.com/

2、 安装插件Debugger for chrome

 技术分享图片

 

3、 确定tsconfig.json配置 "sourceMap": true

{

  "compileOnSave": false,

  "compilerOptions": {

    "outDir": "./dist/out-tsc",

    "sourceMap": true,

    "declaration": false,

    "moduleResolution": "node",

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "target": "es5",

    "typeRoots": [

      "node_modules/@types"

    ]

  }

}

 

4、 生成调试配置文件launch.json

 技术分享图片

{

    // 使用 IntelliSense 了解相关属性。

    // 悬停以查看现有属性的描述。

    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387

    "version": "0.2.0",

    "configurations": [

    {

        "type": "chrome",

        "request": "launch",

        "name": "Launch Chrome",

        "url": "http://localhost:4200",

        "webRoot": "${workspaceRoot}"

    },

        {

            "type": "chrome",

            "request": "launch",

            "name": "Launch Chrome against localhost",

            "url": "http://localhost:4200",

            "webRoot": "${workspaceRoot}"

        }

    ]

}

 

5、 设置断点进行调试 快捷键和C#语言一致 F10、F11

注:调试前请先npm start程序

技术分享图片

技术分享图片

技术分享图片

 

Visual Studio Code 通过 Chrome插件Type Script断点调试Angular 2

标签:c#   als   config   code   web   out   alt   conf   lin   

原文地址:http://www.cnblogs.com/donaldtdz/p/8029954.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!