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

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程序

时间: 2024-10-04 03:45:55

Visual Studio Code 通过 Chrome插件Type Script断点调试Angular 2的相关文章

Visual studio code离线安装插件

公司研发区不能连接公网,使用Visual studio code(vsc)写Golang代码需要安装Go插件,下面介绍下,vsc离线安装插件的步骤.以安装lukehoban.Go为例. 打开官网首页: https://code.visualstudio.com/ 点击 Extentions,然后点击右端的图片链接,进入插件下载页面.(或者直接输入https://marketplace.visualstudio.com/VSCode ) 搜索要安装的插件,打开插件对应的页面, 需要在这个页面提取如

Visual Studio code 前端常用插件集集合

HTML Boilerplate Auto Close Tag         标签提示 HTML CSS Support   标签和样式编辑 View In Browser       从浏览器打开 open in browser 从浏览器打开按照默认浏览器 vscode-vue      主要是vue HTML Snippets 超级实用且初级的 H5代码片段以及提示 HTML CSS Support 让 html 标签上写class 智能提示当前项目所支持的样式 Debugger for

Visual Studio Code 使用 Git插件报错 - Permission denied (publickey)

在使用GitHub的时候,为了避免每次输入用户名密码,都会使用SSH方式代替Https. 按网上教程,大多数使用SSH-KeyGen生成公私钥对,而后上传公钥至Github,并切换Repositorie为SSH. 使用SSH-KeyGen输出如下: Generating public/private rsa key pair. Enter file in which to save the key (/root/.ssh/id_rsa): Created directory '/root/.ss

visual studio 2010 出现问题,不能设置断点调试了,一运行就未响应,然后程序退出

经网络查找原因,怀疑是插件问题: 解决方案: 1.工具->扩展管理 2.禁用或卸载VS2010的插件(扩展程序) 经网络查找原因,怀疑是插件问题: 解决方案: 1.工具->扩展管理 2.禁用或卸载VS2010的插件(扩展程序)

Visual Studio Code如何编写运行C、C++

Visual Studio Code如何编写运行C.C++ 作者:知乎用户链接:https://www.zhihu.com/question/30315894/answer/154979413来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 0. 前言 本文面向初学者(但不是纯小白),分享一点我的经验.毕竟百度"VS Code C"出来的第一条就是这个网页.其实VS Code真的不太适合写C,姑且算一种折腾吧. 本文所有内容均可从VS Code的官方文档:

Visual Studio Code 配置 gulp

原本用的webstorm部署的gulp,后来由于太卡,打算换个编辑器,考虑了一番,之前用的是sublime,配置很是麻烦,最新听说饥人谷老师用的是vsCode,所以打算尝试一下这个编辑器,安装还是很方便的,不需要破解,直接下载,安装,就可以用了,然后开始配置gulp,百度搜了下,有配置gulp的先例,但是配置的过程分享的非常的少,寥寥几字,看后实在不知所措. 前提,我的gulp是全局安装的,gulp相关的插件也在终端上安装好了,所以,就算是换编辑器,我认为也不用再重复安装了. 打开vscode,

我的全栈之路-Java基础之macOS+Visual Studio Code开发Java程序

我的全栈之路-Java基础之macOS+Visual Studio Code开发Java程序 我的全栈之路 3.1 开发环境说明 首先说明下使用软件的版本,操作系统是基于macOS10.14.5,然后在macOS上安装了JDK11.03,如果想要了解macOS下JDK的安装,可以参考我的全栈之路-Java基础之macOS安装JDK,编辑器选用了微软公司开源的Visual Studio Code. 软件名称 软件版本 操作系统 macOS10.14.5 JDK JDK11.0.3 编辑器 Visu

30个极大提高开发效率的Visual Studio Code插件

译者按: 看完这篇文章,我打算从 Sublime Text 转到 Visual Studio Code 了! 原文: Immensely upgrade your development environment with these Visual Studio Code extensions 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 我们的 VSC(VSCode)将会像一个长了五只可以发射激光的独角兽一样!接下来会介绍我每天使用

10.【转】Visual Studio Code 必备插件,主题及语法提示

原文地址:http://www.css88.com/archives/8064 小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货. Visual Studio Code 是由微软开发的一款免费的,跨平台文本编辑器.由于其出色的性能表现和丰富的功能,它很快成为了开发者的最爱. 与大多数 IDE 一样,VSCode 也有一个扩展市场,包含数千个具有不同功能的插件.为了帮助您挑选值得下载的东西,我们收