vs code 调试angular2
调试步骤:
1.安装nodejs
2.安装vscode
3.vscode安装debugger for chrome插件
4.选择调试->打开调试配置,选择chrome配置,打开lauch.json,修改如下:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

5.启动项目:npm start
6.vscode打开app.component.ts组件,在app.component.ts的constructor函数中设置断点,在自动打开的浏览器中刷新页面(http://localhost:4200),vscode自动停止断点位置。
7.在vscode的调试控制台中输入this.title,查看组件的变量值
vs code 调试angular2的更多相关文章
- VS Code调试.NET Core
		
VS Code调试.NET Core应用遇到的坑 为什么会有”坑“ 博客园里有好多介绍怎么使用VS Code以及调试.NET Core的文章,但是都是基于直接构建Asp.Net Core Mvc单项目 ...
 - VS Code 调试 Angular 和 TypeScript 的配置
		
一.安装插件 在 Visual Studio Code 中打开扩展面板(快捷键 Ctrl+Shift+X),搜索安装 Debugger for chrome 插件). 二.配置启动参数 在 Visua ...
 - Visual Studio Code 调试 PHP
		
Visual Studio Code 调试 PHP 2018/12/4 更新 Nginx + php-cgi.exe 下与 Visual Studio Code 配合调试 必需环境 Visual St ...
 - Visual Studio Code调试node.js:无法在PATH上找到运行时的node
		
首先,环境变量Path中加入nodejs的路径: 验证nodejs是否已经加入环境变量: 接着,重新启动Visual Studio Code, 试一下,是不是好了~ 附录:Visual Studi ...
 - 配置 VS Code 调试 JavaScript
		
原文:配置 VS Code 调试 JavaScript 1. 安装 Debugger for Chrome 扩展.Open in Browser 扩展.View In Browser 扩展 2.用v ...
 - Visual Studio Code调试electron主进程
		
Visual Studio Code调试electron主进程 作者: jekkay 分类: electron 发布时间: 2017-06-11 14:56 一·概述 此文原出自[水滴石]: htt ...
 - 配置 VS Code 调试 PHP
		
配置 VS Code 调试 PHP 1.下载 xampp 集成服务器wampserver3.1.0-Apache2.4.7_PHP5.6.3-7.0.23-7.1.19_MySQL5.7.19_Mar ...
 - VS code调试代码快速上手必备知识
		
一.通过简单的配置运行一个JavaScript程序 1.打开(创建)一个新的工作空间(文件夹),并创建一个js文件: var name='world'; var s='Hello,${name}!'; ...
 - VS Code 调试 OneFlow
		
VS Code 调试 OneFlow 本文介绍如何配置 VS Code,搭建 OneFlow 的 GUI 开发环境. 如果对于 VS Code 及其插件系统还不熟悉,可以参阅官方文档. 本文包括: 如 ...
 
随机推荐
- java基础---类和对象(4)
			
一. static关键字 使用static关键字修饰成员变量表示静态的含义,此时成员变量由对象层级提升为类层级,整个类共享一份静态成员变量,该成员变量随着类的加载准备就绪,与是否创建对象无关 使用st ...
 - YAOI Round #1 题解
			
前言 比赛网址:http://47.110.12.131:9016/contest/3 总体来说,这次比赛是有一定区分度的, \(\text{ACM}\) 赛制也挺有意思的. 题解 A. 云之彼端,约 ...
 - python pycharm 正则表达式批量替换
			
{accept:application/json, text/plain, */*,accept-encoding:gzip, deflate, br,accept-language:zh-CN,zh ...
 - Token验证详解
			
为什么使用Token验证: 在Web领域基于Token的身份验证随处可见.在大多数使用Web API的互联网公司中,tokens 是多用户下处理认证的最佳方式. 以下几点特性会让你在程序中使用基于To ...
 - 如何快速更新长缓存的 HTTP 资源
			
前言 HTTP 缓存时间一直让开发者头疼.时间太短,性能不够好:时间太长,更新不及时.当遇到严重问题需紧急修复时,尽管后端文件可快速替换,但前端文件仍从本地缓存加载,导致更新长时间无法生效. 对于这个 ...
 - React组件三大属性之state
			
React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...
 - WEB安全新玩法 [8] 阻止订单重复提交
			
交易订单的重复提交虽然通常不会直接影响现金流和商品流,但依然会给网站运营方带来损害,如消耗系统资源.影响正常用户订单生成.制造恶意用户发起纠纷的机会等.倘若订单对象是虚拟商品,也有可能造成实际损失.订 ...
 - P1447能量采集
			
P1447能量采集 定义:(i,j)表示处于(i,j)的植物的贡献 我们发现,点(i,j)与(0,0)的连线所过整点的数目为\(\gcd(i,j)\) 发现要是想记录每个点的答案并不好算.那么怎么好算 ...
 - [HAOI2012]外星人 题解
			
人类智慧题. 首先,只有 \(\varphi(1)=\varphi(2)=1\).再考虑题目中给的提示: \[\varphi\left(\prod_{i = 1}^m p_i^{q_i}\right) ...
 - java跨平台性说明
			
一.举例说明 我们知道,只要是用标准C开发的程序,使用不同的编译器编译后的可执行文件是可以在对应平台运行的,比如windows可以使用VC编译,那编译后的exe文件就可以在windows下运行:liu ...