调试步骤:

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的更多相关文章

  1. VS Code调试.NET Core

    VS Code调试.NET Core应用遇到的坑 为什么会有”坑“ 博客园里有好多介绍怎么使用VS Code以及调试.NET Core的文章,但是都是基于直接构建Asp.Net Core Mvc单项目 ...

  2. VS Code 调试 Angular 和 TypeScript 的配置

    一.安装插件 在 Visual Studio Code 中打开扩展面板(快捷键 Ctrl+Shift+X),搜索安装 Debugger for chrome 插件). 二.配置启动参数 在 Visua ...

  3. Visual Studio Code 调试 PHP

    Visual Studio Code 调试 PHP 2018/12/4 更新 Nginx + php-cgi.exe 下与 Visual Studio Code 配合调试 必需环境 Visual St ...

  4. Visual Studio Code调试node.js:无法在PATH上找到运行时的node

    首先,环境变量Path中加入nodejs的路径: 验证nodejs是否已经加入环境变量: 接着,重新启动Visual Studio Code, 试一下,是不是好了~   附录:Visual Studi ...

  5. 配置 VS Code 调试 JavaScript

    原文:配置 VS Code 调试 JavaScript 1. 安装 Debugger for Chrome 扩展.Open in Browser  扩展.View In Browser 扩展 2.用v ...

  6. Visual Studio Code调试electron主进程

    Visual Studio Code调试electron主进程 作者: jekkay 分类: electron 发布时间: 2017-06-11 14:56  一·概述 此文原出自[水滴石]: htt ...

  7. 配置 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 ...

  8. VS code调试代码快速上手必备知识

    一.通过简单的配置运行一个JavaScript程序 1.打开(创建)一个新的工作空间(文件夹),并创建一个js文件: var name='world'; var s='Hello,${name}!'; ...

  9. VS Code 调试 OneFlow

    VS Code 调试 OneFlow 本文介绍如何配置 VS Code,搭建 OneFlow 的 GUI 开发环境. 如果对于 VS Code 及其插件系统还不熟悉,可以参阅官方文档. 本文包括: 如 ...

随机推荐

  1. [TJOI2007]书架 题解

    文中给了你一些句子,以及让你任意插入某个位置以及查询某个位置的句子. 发现因为是句子很难搞,所以开个 map 离散一下成数字.然后在额外开一个 map 记录这个数字对应的句子. 然后你要写一种支持插入 ...

  2. 在 Intenseye,为什么我们选择 Linkerd2 作为 Service Mesh 工具(Part.1)

    在 Intenseye,我们 follow(跟随) trends(趋势) & hype(最被炒作) 的技术,并在使用时应用最佳实践. 我们在用 Scala.Go.Python 等编写的 Kub ...

  3. IO编程之对象序列化

    对象序列化的目标是将对象保存在磁盘中或者允许在网络中直接传输对象.对象序列化机制循序把内存中的java对象转换成平台无关的二进制流,从而允许把这种二进制流持久的保存在磁盘上,通过网络将这种二进制流传输 ...

  4. 将已经基本完成的项目推送到gitee上管理

    1,首先在gitee上创建仓库,保留一个.gitigonore就行,这样就得到一个远程仓库地址 2,仓库有文件,那么就需要先将这个文件pull下来: 在本地的项目目录中执行:git init git ...

  5. 一张图概括mysql的各种join用法

  6. kubernetes 降本增效标准指南|ProphetPilot:容器智能成本管理引擎

    作者 田奇,腾讯云高级工程师,专注大规模离在线混部,弹性伸缩,云原生成本优化,熟悉Kubernetes,关注云原生大数据.AI. 王孝威,腾讯云容器产品经理,热衷于为客户提供高效的 Kubernete ...

  7. 轮播图 -- view, swiper

    效果图 制作步骤: 一.创建一个page 二.编写demo.wxml写界面元素 <!--miniprogram/pages/demo/demo.wxml--> <view class ...

  8. JDK1.7HashMap死锁

    JDK1.7HashMap多线程问题 Java技术交流群:737698533 在看之前可以先看看JDK1.7的Hashmap的源码 HashMap在多线程情况下是不安全的,一个是数据的准确性问题,一个 ...

  9. TCP协议系列之一一什么是TCP协议,TCP的三次握手,为什么不是2次或4次?

    CP 为什么三次握手而不是两次握手(正解版) https://blog.csdn.net/lengxiao1993/article/details/82771768 自己理解说明一下: 比如说有一条管 ...

  10. ASP.NET Datalist制作显示效果和img的数据库存储

    1. 具体实现效果如下图: 2.首先使用datalist控件编辑模板,在属性面板选择RepeatColumns="3" RepeatDirection="Horizont ...