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 及其插件系统还不熟悉,可以参阅官方文档. 本文包括: 如 ...
随机推荐
- 使用Hugo框架搭建博客的过程 - 页面模板
前言 最初在制作友链界面时,没有学习Hugo框架,一头雾水.网上有关的教程甚少,只能去学一遍Hugo. 在学习Hugo的过程中,了解了列表模板,分类模板.开发了几个功能页面,如:留言板,友链,记忆分类 ...
- B 站崩了,受害程序员聊聊
非吃瓜,B 站事件始末分析 + 防治技术分享 大家好,我是鱼皮,昨天小破站崩了的事情相信很多朋友都听说了. 这要是搁以前,不爱吃瓜的我根本不会去关注这种事,崩了就崩了呗,反正天塌下来有程序员大佬们扛着 ...
- 00JAVA语法基础_六位验证码 01
在网上看了许多的源程序,涉及到的东西也不太一样,多了图形处理的,由于还没理解太明白,只是做了控制台. package Six_Code; import java.util.Random; import ...
- Java基础00-Java概述1
1. Java语言发展史 1.1 Java语言 语言:人与人交流沟通的表达方式 计算机语言:人与计算机之间进行信息交流沟通的一种特殊语言 Java语言是美国Sun公司(Stanford Univers ...
- MapReduce学习总结之Combiner、Partitioner、Jobhistory
一.Combiner 在MapReduce编程模型中,在Mapper和Reducer之间有一个非常重要的组件,主要用于解决MR性能瓶颈问题 combiner其实属于优化方案,由于带宽限制,应该尽量ma ...
- 剖根问底:Java 不能实现真正泛型的原因是什么?
大家好,我是二哥呀! 今天我来给大家讲一下,Java 不能实现真正泛型的原因是什么? 本文已同步至 GitHub <教妹学 Java>专栏,风趣幽默,通俗易懂,对 Java 初学者亲切友善 ...
- Python脚本:删除文件夹下的重复图片,实现图片去重
近期在整理相册的时候,发现相册中有许多重复图片,人工一张张筛查删除太枯燥,便写下这个脚本,用于删除文件夹下重复的图片. 第一部分:判断两张图片是否相同 要查找重复的图片,必然绕不开判断两张图片是否相同 ...
- java类与对象基础篇
java面向对象基础篇 面向对象程序设计(Object Oriented Proframming ,OOP) 面向对象的本质是:以类的方式组织代码,以对象的方式组织(封装)数据. 面向对象的核心思想是 ...
- thinkPHP5 5.0.23 远程代码执行漏洞
修改数据包 POST /index.php?s=captcha HTTP/1.1 Host: 192.168.49.2:8080 User-Agent: Mozilla/5.0 (Macintosh; ...
- Samba 远程命令执行漏洞(CVE-2017-7494)
该漏洞影响Samba 3.5.0之后的所有版本,在4.6.4/4.5.10/4.4.14修复了这个漏洞 use exploit/linux/samba/is_known_pipename set rh ...