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. 关于css中设置属性的常识

    1.cellspacing 属性规定单元格之间的空间,请勿将该属性与 cellpadding 属性相混淆. 2.cellpadding 属性规定的是单元边沿与单元内容之间的空间. 3.text-ali ...

  2. 创建私有maven服务器

    私服的创建 1.下载nexus服务  nexus-2.12.0-01-bundle https://pan.baidu.com/s/1o8OfieI 2.下载maven工具   apache-mave ...

  3. JAVA作业之两数的加减乘除

    1.设计思路 把输入的字符转化为计算的数字问题,再以对话框的形式输入输出加减乘除的结果问题. 2.程序流程图 3.源代码 4.实验结果

  4. Windows 8.1常见问题

    Windows 8.1常见问题 1. 我想升级Windows 8.1,但是担心软件.硬件不兼容怎么办? 对于已安装的软件及联机的设备,可以在微软网站上下载Windows 8.1升级助手进行检测,会在检 ...

  5. Tencent interview

    1.常见的聚类算法 1):划分法:k-means 2):基于密度的方法: 2.EM 算法 EM算法是在概率模型中寻找参数的最大似然估计或者最大后验概率的算法,其中概率模型依赖于无法观测的隐藏变量.EM ...

  6. Android-Kotlin-单例模式

    先看一个案例,非单例模式的案例: 描述Dog对象: package cn.kotlin.kotlin_oop08 class Dog(var name:String, var color:String ...

  7. Android-Java-死锁

    死锁:程序不往下执行了,程序又没有结束,就一直卡在哪里: 在使用synchronized的时候要避免死锁,synchronized嵌套就可能会引发死锁,需要严格的检查代码,排除死锁发生的可能: 特意演 ...

  8. hdu 1.3.1 FatMouse' Trade

    贪心的运用,主要看其比值,取最大值实现贪心... #include<cstdio> #include<algorithm> #include<vector> usi ...

  9. C#调用haskell遭遇Attempted to read or write protected memory

    1. Haskell的代码如下: 上面的代码中readMarkdown与writeHtmlString是pandoc中的函数,newString的作用是将String转换为IO CString. 2. ...

  10. .net图表之ECharts随笔06-这才是最简单的

    今天搞柱形图的时候,发现了一个更简单的用法.那就是直接使用带all的那个js文件 基本步骤: 1.为ECharts准备一个具备大小(宽高)的Dom 2.ECharts的js文件引入(echarts-a ...