调试步骤:

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. Elasticsearch-04-master选举

    3.2 master选举机制 3.2.1 选举算法 1)bully算法 核心思想 假定所有的节点都具有一个可以比较的ID,通过比较这个ID来选举master 流程说明 节点向所有比自己ID大的节点发送 ...

  2. 合并两个有序链表---python

    # Definition for singly-linked list. # class ListNode: # def __init__(self, x): # self.val = x # sel ...

  3. 北京大公司:你是熟悉Map集合吗?

    <对线面试官>系列目前已经连载30篇啦,这是一个讲人话面试系列 [对线面试官]Java注解 [对线面试官]Java泛型 [对线面试官] Java NIO [对线面试官]Java反射 &am ...

  4. PYTHON找色不变移动

    import cv2 import aircv as ac import numpy as np def wmhd(sjh): bzz0=0 bzz1=0 bzz2=0 xxa=0 yya=0 xxb ...

  5. 在Springboot + Mybaitis-plus 项目中利用Jackson实现json对java多态的(反)序列化

    Jackson允许配置多态类型处理,当JSON面对的转换对象是一个接口.抽象类或者一个基类的时候,可以通过一定配置实现JSON的转换.在实际项目中,Controller层接收入参以及在Dao层将对象以 ...

  6. python + pytest基本使用方法(拓展库)

    一.测试钩子配置文件 import pytest# conftest.py 是pytest特有的本地测试配置文件;# 既可以用来设置项目级别的Fixture,也可用来导入外部插件,还可以指定钩子函数# ...

  7. Springboot中注解@Configuration源码分析

    Springboot中注解@Configuration和@Component的区别 1.先说结论,@Configuration注解上面有@Component注解,所以@Component有的功能@Co ...

  8. 前端基础div(六)

    实例 文档中的一个部分会显示为绿色: <div style="color:#00FF00"> <h3>This is a header</h3> ...

  9. Vue__npm run build npm run dev

    npm run build npm run dev 一.以前一直错的做法 以前,git完项目之后就,执行1.npm install 2.npm run build 3.npm run dev.今天ma ...

  10. 获取不到自定义的request的header属性

    java获取headers的代码如下: // 获取http-header里面对应的签名信息 Enumeration<?> headerNames = request.getHeaderNa ...