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代码
Mar 27 Javascript
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
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
虫族 ZERG 概述
2020/03/14 星际争霸
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
javascript 跳转代码集合
2009/12/03 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
python 实现插入排序算法
2012/06/05 Python
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
介绍Python中的__future__模块
2015/04/27 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
python监控键盘输入实例代码
2018/02/09 Python
NumPy 数组使用大全
2019/04/25 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
出纳岗位职责
2013/11/09 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
班级口号大全
2014/06/09 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python