vue debug 二种方法


Posted in Javascript onSeptember 16, 2018

console.log多了比较烦,用debug就比较清晰了。

可以快速履清代码运行的先后顺序,验证自己的想法是否正确,可以清楚的了解到变量的内容,不用在console.log了。

一,vue devtools

1,chrome应用商店安装vue devtools扩展,并打开vue devtolls扩展
2,启动vue,npm run dev
3,chrome中访问vue网址,打开开发者工具,导行会多出vue,如下图

vue debug 二种方法 

vue devtools

vue devtools,对于数据展示,是非常清楚的。

二,vscode debug

1,修改.vscode/launch.json

查看复制打印?

{ 
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。 
  // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 
  "version": "0.2.0", 
  "configurations": [ 
    { 
      "type": "chrome", 
      "request": "launch", 
      "sourceMaps": true, 
      "name": "assa vue debug", 
      "url": "http://localhost:8080", 
      "webRoot": "${workspaceFolder}" 
    } 
  ] 
}

2,启动vue项目,npm run dev

3,点击vscode debug中的绿色三角启动debug,chrome访问网址就可以debug了

vue debug 二种方法 

vscode debug vue

总结

以上所述是小编给大家介绍的vue debug 二种方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
Javascript倒计时代码
Aug 12 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
如何封装Vue Element的table表格组件
Feb 06 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
Vue刷新修改页面中数据的方法
Sep 16 #Javascript
Vue中使用vux配置代码详解
Sep 16 #Javascript
在vue中安装使用vux的教程详解
Sep 16 #Javascript
React 组件中的 bind(this)示例代码
Sep 16 #Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 #Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 #Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 #Javascript
You might like
php巧获服务器端信息
2006/12/06 PHP
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
玩转python爬虫之正则表达式
2016/02/17 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
八年级英语教学反思
2014/01/09 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python
python使用BeautifulSoup 解析HTML
2022/04/24 Python
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技