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 及其插件系统还不熟悉,可以参阅官方文档. 本文包括: 如 ...
随机推荐
- 性能基准DevOps之如何提升脚本执行效率
1.宝路说 宝路最近一直在自我思考:性能基准DevOps工作已经开展一段时间了,目前我们确实已经取得了一些成果,显然这还远远不够.趁闲暇之余跟组员进行了简单的头脑风暴!于是这就有了今天的主题,当然这仅 ...
- JSP核心技术
一.JSP基本概念 JSP是Java Server Page 的简称,跟Servlet 一样可以动态生成HTML响应,文件命名为XXX.jsp JSP 与Servlet 的区别: jsp经编译后就变成 ...
- 【Azure 环境】Azure通知中心(Notification Hub)使用百度推送平台解说
问题描述 在通知中心的页面中显示支持BaiDu,介绍一下支持的是百度(Baidu)的什么吗?Azure的这个功能在国内使用的时候是否可以保证国内安卓手机的信息送达率? 问题解答 通知中心的页面中的Ba ...
- 基于小熊派Hi3861鸿蒙开发的IoT物联网学习【二】
HarmonyOS内核开发-信号量开发案例学习记录 一.LiteOS里面的任务管理介绍: 任务状态通常分为以下四种: 就绪(Ready):该任务在就绪列表中,只等待CPU. 运行(Running) ...
- Linux if[......] then ......else...... fi
条件表达式 if [ -f file ] 如果文件存在if [ -d ... ] 如果目录存在if [ -s file ] 如果文件存在且非空 if [ -r file ] ...
- Altium Designer 21.x中文版安装破解教程
Altium Designer 21.x是一款优秀的PCB设计工具,可以原理图设计.电路仿真.PCB绘制编辑.拓扑逻辑自动布线.信号完整性分析和设计输出等功能,为设计者提供了全新的设计解决方案,提高设 ...
- Capture One 21 Pro 14.0.2.36中文版安装教程
Capture One 21 Pro 14.0.2.36 for windows是一款由丹麦PHASE ONE飞思公司推出的.非常专业强大的图像处理编辑工具. 下载 Capture One 21 Pr ...
- 关于intouch/ifix嵌入视频控件并使用(海康,大华)
2017年下半年项目开始接触利用intouch工控软件来进行项目二次开发.其中关于驱动的问题始终是上位机的重中之重,暂且不表(嘿嘿--),首先遇到的问题就是在弹窗中嵌入视频控件,监控设备的开停状态.经 ...
- .NET 6 预览版 5 发布
很高兴.NET 6 预览版5终于跟大家见面了.我们现在正处于.NET 6 的后半部分,开始整合一些重要的功能. 例如.NET SDK 工作负载,它是我们.NET 统一愿景的基础,可以支持更多类型的应用 ...
- 使用Python玩转阿里云盘
项目地址: https://github.com/foyoux/aligo 这个项目起源于我的一个简单需求, 我有25000个文件, 已经上传了9000个, 但是现在我把这些文件重新整理了, 最后我不 ...