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 相关文章推荐
JsDom 编程小结
Aug 09 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 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开发GUI
2006/10/09 PHP
php基础学习之变量的使用
2011/06/09 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
node后端服务保活的实现
2019/11/10 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
python使用zip将list转为json的方法
2018/12/31 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
Python底层封装实现方法详解
2020/01/22 Python
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
材料化学应届生求职信
2013/10/09 职场文书
应届生自我鉴定
2013/12/11 职场文书
基督教婚礼主持词
2014/03/14 职场文书
分家协议书
2014/04/21 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS