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 相关文章推荐
JavaScript 撑出页面文字换行
Jun 15 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 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学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Python中一行和多行import模块问题
2018/04/01 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
Django  ORM 练习题及答案
2019/07/19 Python
django 外键创建注意事项说明
2020/05/20 Python
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
Android interview questions
2016/12/25 面试题
医院门卫岗位职责
2013/12/30 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript