Angular2使用vscode断点调试ts文件的方法


Posted in Javascript onDecember 13, 2017

VSCode自带debugger工具,管理后台项目使用angular2,试了下调试ts文件十分方便。下面是具体的实现步骤以及踩的坑。当你调试出来后,回头看这个设置还是十分简单的。我使用的是ng-cli创建的项目。后面再补充一般项目的调试,感觉也差不多。

解决了 “由于未找到生成的代码,已忽略断点(是否是源映射问题?) ” ,参考下面的 我的环境配置

我的环境配置

1. node v7.3.0

2. npm 3.10.10

3. ng >= 1.3 // 这一点非常重要,我一开始的版本低于这个版本,就一直报 “由于未找到生成的代码,已忽略断点(是否是源映射问题?) ”

4. 在vscode中安装 vscode for chome 插件, 版本要3.1.4以上

5. 生成launch.json, 文件内容改为以下内容

{
 "version": "0.2.0",
 "configurations": [ // 这个数组里包含了可以包含多个配置对象
  {
   "name": "ng serve", // 配置对象的名称,你可以选择其中一个配置运行调试
   "type": "chrome", 
   "request": "launch",
   "url": "http://localhost:4200/#",
   "webRoot": "${workspaceRoot}"
  },
  {
   "name": "ng test",
   "type": "chrome",
   "request": "launch",
   "url": "http://localhost:9876/debug.html",
   "webRoot": "${workspaceRoot}"
  },
  {
   "name": "ng e2e",
   "type": "node",
   "request": "launch",
   "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
   "protocol": "inspector",
   "args": ["${workspaceRoot}/protractor.conf.js"]
  }   
 ]
}

1. ng-cli版本更新

//1. 先卸载
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
//2. 全局安装
npm uninstall -g @angular/cli
npm cache clean
# if npm version is > 5 then use `npm cache verify` to avoid errors (or to avoid using --force)
npm install -g @angular/cli@latest
//3. 本地安装
npm install --save-dev @angular/cli@latest

2. launch.json配置修改

第一步先要安装vscode for chrome这个插件:

Angular2使用vscode断点调试ts文件的方法

插件安装

第二步修改launch.json配置:

Angular2使用vscode断点调试ts文件的方法

在项目中生成chrome的launch.json文件

第三步更改lauch.json文件配置:

Angular2使用vscode断点调试ts文件的方法

更改后的launch.json

第四步启动调试:

注意:该调试需要你在vscode的终端中已经执行过ng serve启动过项目,否则无法调试

这里会生成三个select选项,依次是launch.json里三个对象的name

Angular2使用vscode断点调试ts文件的方法

启动调试

第五步启动后展示:

先在需要调试的ts页面中打下断点,点击启动调试按钮后, 会为项目打开一个新的chrome页面,然后需要刷新页面才能开始断点调试

Angular2使用vscode断点调试ts文件的方法

vscode自动打开新的chrome窗口页面,刷新该页面后即可如下调试

Angular2使用vscode断点调试ts文件的方法

这是最后可调试的页面

Angular2使用vscode断点调试ts文件的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.post用法关于type设置问题补充
Jan 03 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
树结构之JavaScript
Jan 24 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 #Javascript
JS+canvas画一个圆锥实例代码
Dec 13 #Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 #Javascript
实例分析js事件循环机制
Dec 13 #Javascript
javascript实现QQ空间相册展示源码
Dec 12 #Javascript
自定义PC微信扫码登录样式写法
Dec 12 #Javascript
基于模板引擎Jade的应用(详解)
Dec 12 #Javascript
You might like
PHP基础知识回顾
2012/08/16 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
php格式化金额函数分享
2015/02/02 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python如何定义有默认参数的函数
2020/08/10 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
主管会计岗位职责
2014/03/13 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
预备党员公开承诺书
2014/05/28 职场文书
放飞理想演讲稿
2014/09/09 职场文书
预备党员介绍人意见
2015/06/01 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
何时使用Map来代替普通的JS对象
2021/04/29 Javascript