Vue Devtools大法好

这是一篇小白friendly教程

Vue Devtools是一款谷歌浏览器插件，专门为调试vue而设计。假设你做了一个vue应用，当你在调试的过程中，打开的控制台是这样的：

满眼都是data-v的这种标签，你的组件在什么位置，可能要一个一个标签点开之后找，你的应用的数据是什么状态，可能要靠console打印出来，给我们的调试带来了很大的不便。。那有没有什么好办法呢？灯灯灯灯！就是这款Vue Devtools。

安装

打开这个Vue Devtools，然后安装。安装完成后，按F12，然后就发现下面这个多出来的标签：

没错，就是它了，假如在一个vue项目下打开，就会看到：

看到的是组件树,而不是DOM树，旁边还有选中组件的data数据,computed等，以及组件所在文件夹的路径，一下子就看透了这个组件，是不是觉得豁然开朗

vuejs之Vue Devtools的更多相关文章

  1. vue 在浏览器控制台怎么调试 谷歌插件vue Devtools

    vue 在浏览器控制台怎么调试 谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...

  2. vue devtools无法使用

    vue devtools无法使用 一.总结 一句话总结: 没显示vue devtools调试工具的原因是用了生产环境的版本或是压缩的vue版本,或是没有勾选:允许访问文件网址 二.vue调试工具Dev ...

  3. 怎样在Chrome浏览器上安装 Vue Devtools 扩展程序

    第一步: 前往 GitHub 下载 Vue Devtools 项目文件 https://github.com/vuejs/vue-devtools 注意: 1. 将分支切换为 master 2. 下载 ...

  4. Vue DevTools 安装应用

    1.https: //github.com/vuejs/vue-devtools  从这上面下载Vue DevTools: 2.npm install(cnpm install) && ...

  5. 【vue】chrome已安装Vue Devtools在控制台却无显示

    chrome已安装Vue Devtools在控制台却无显示的解决: 在点亮Vue Devtools图标后,控制台没有vue解读显示. 原因:脚手架配置NODE_ENV直接定义为了production版 ...

  6. Vue安装以及Vue项目创建以及Vue Devtools安装

    这几天一直在学习Vue.js框架. 因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措. 在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建 ...

  7. vuejs学习——vue+vuex+vue-router项目搭建(三)

    前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...

  8. vuejs学习——vue+vuex+vue-router项目搭建(二)

    前言 最近比较忙,所有第二章发布晚了,不好意思各位. vuejs学习——vue+vuex+vue-router项目搭建(一) 中我们搭建好了vue项目,我相信大家已经体验了vue其中的奥妙了,接下来我 ...

  9. 使用vue Devtools

    第一步: 在谷歌应用商店中查找 vue Devtools 并安装.安装之后,即使我们打开了vue项目发现vue标识是灰色的,说明并没有成功启动vue. 第二步: 默认安装的情况下,找到C:\Users ...

随机推荐

  1. wget批量下载http文件

    eg:http://hgdownload.soe.ucsc.edu/goldenPath/hg19/encodeDCC/wgEncodeAwgDnaseUniform/ 下载该路径下的所有文件 wge ...

  2. Ubuntu下安装pycharm并设置快捷方式

    作者:tongqingliu 转载请注明出处:http://www.cnblogs.com/liutongqing/p/7070327.html Ubuntu下安装pycharm并设置快捷方式 下载P ...

  3. spring mvc使用ModelAndView时发生No request handling method with name '方法 名' in class [类名]的错误

    我日,下午关于标题错误查了好久,网上啥说法都有, 后来发现是ModelAndView的路径引错了 正确路径应该为: import org.springframework.web.servlet.Mod ...

  4. noip第27课作业

    1. 繁忙的都市 [问题描述] 城市C是一个非常繁忙的大都市,城市中的道路十分的拥挤,于是市长决定对其中的道路进行改造.城市C的道路是这样分布的:城市中有n个交叉路口,有些交叉路口之间有道路相连,两个 ...

  5. QOpenglWidget 与QGLWidget的选择

    1. QGLWidget 是Qt OpenGL模块,但是从其官方说明,推荐在Qt5.4 之后,使用QOpenglWidget版本,具体说明如下: Note: This class is part of ...

  6. Uval4726-数形结合的思想

    题意:给定一段01序列,求一段长度不小于L的连续序列,使其平均值最大 思路:一看就想到了斜率优化,但是用基本的推公示一直没推出来,看了别人的代码,像推出斜率的式子一直没弄出来..后来一看别人写的题解, ...

  7. shell 命令 ls -a

    接手其他人的shell脚本时,遇到了一个"."开头的文件目录, ll 始终找不到. 咨询了一下,才知道,"."开头的是隐藏文件. 这时候用 ll -a 或 ls ...

  8. MFC中处理UI界面时的注意点

    最近开发时,在处理界面上遇到了下面的问题: 上位机与下位机通信时,如果出现超时,弹出MessageBox提示的情况下,更新界面上的CStatic控件会出现重影. 经过调查发现 原因是由于在UI线程中处 ...

  9. Python自动化开发 - Django基础

    本节内容 一.什么是web框架 二.MVC和MTV视图 三.Django基本命令 四.路由配置系统 五.编写视图 六.Template 七.ORM 一.什么是web框架 对于所有的web应用,本质上其 ...

  10. [javascript]Three parts of javascript code snippet

    <script> (function(){ /* if (navigator.userAgent.toLowerCase().indexOf("iphone") == ...