Vue项目中使用Vue.js devTools这款调试神器，可以极大程度的提高我们的开发效率。

安装

1、打开Chrome网上应用商店安装插件（自墙）,直接搜索devTools安装即可。贵宾传送阵，请戳这里→Chrome网上应用商店

2、从github上下载到本地。贵宾传送阵，请戳这里→vue-devtools

1)、进入到/vue-devtools目录下(npm install或者cnpm install)安装项目所需依赖。

2)、安装完依赖后(npm run build或者cnpm run build)编译项目。

3)、编译完项目后，在/vue-devtools/shell/chrome/manifest.json中修改persistent参数false为true。

4)、在chrome扩展程序页面，打开“开发者模式”，点击“加载已解压的扩展程序”按钮，选择你本地的.../vue-devtools/shell/chrome文件夹, 添加完成后，勾选允许文件地址是否访问。

安装完成后devTools的图标会出现在浏览器的菜单栏中。

以上两种安装方式告一段落。下面让我们在vue项目中体验一下这款调试神器吧。

使用

运行Vue项目，在Chrome浏览器中展示项目（浏览器菜单栏中的devTools图标会亮起），按F12打开开发者工具，在开发者工具的菜单栏最后面会看到Vue，选中它就可以尽情的使用了。

当然这样一顿行云流水的操作下来，有些人会一次成功，而有些人则不会成功，浏览器菜单中的devTools图标亮滴鸭批，但是就是在开发者工具的菜单栏最后面看不到Vue。嗯~~~，怎么肥事小老弟？

请查看项目的index.html中，对vue.js的引用。你肯定使用了压缩版的vue.min.js，使用vue.min.js默认为生产环境，会导致devTools不显示，改为vue.js即可。

原文地址：https://segmentfault.com/a/1190000017195452

Vue调试神器之Vue.js devTools的更多相关文章

  1. 手机网站调试神器之chrome控制台

    现在真是一个信息化的时代,每个人手里都拿着一款智能机,上班下班走路坐车之余都会玩玩手机,上上网.于是作为广大网站媒体来说,争抢手机市场无疑是刻不容缓.对于我们Web前端工程师来说,了解并掌握手机编程的 ...

  2. chrome调试vue.js的插件：vue.js devtools

    1.什么是vue.js devtools? vue.js devtools是chrome的一款插件,用来调试vue的一款神器. 2.为什么下载vue.js devtools? 由于vue是数据驱动的, ...

  3. chrome浏览器的VUE调试插件Vue.js devtools

      chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...

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

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

  5. 1.1 vue.js devtools使用教程

    1. vue.js devtools使用教程

  6. 安装Vue.js devtools

    1.下载安装 https://github.com/vuejs/vue-devtools#vue-devtools 通过以上地址下载安装包,解压以后进入文件,按住shift,点击鼠标右键打开命令窗口 ...

  7. 解决游览器安装Vue.js devtools插件无效的问题

    一: 打开自己写的一个vue.js网页,发现这个图标并没有亮起来,还是灰色 解决方案:  1.我们先看看Vue.js devtools是否生效,打开Bilibili(https://www.bilib ...

  8. 添加谷歌拓展程序 vue.js devtools过程中的问题

    在用vue做项目过程中,需要用到vue.js devtools,在从github上面clone下来代码,然后再npm install ,过程报错,然后更新npm包也是会有问题,以下是install的问 ...

  9. 谷歌浏览器安装Vue.js devtools

    第一步:访问谷歌商店 在之前的博客中已经谈到了这一点的实现方式 https://www.cnblogs.com/10134dz/p/13552777.html 第二步:下载Vue.js devtool ...

随机推荐

  1. js (function(){}()),(function(){})(),$(function(){});之间的区别

    参考:https://blog.csdn.net/stpice/article/details/80586444 (function(){}()), (function(){})() 均为立即执行函数 ...

  2. elasticsearch 中文API 记数(八)

    计数API 计数API允许开发者简单的执行一个查询,返回和查询条件相匹配的文档的总数.它可以跨多个索引以及跨多个类型执行. import static org.elasticsearch.index. ...

  3. python基础-迭代器

    1.迭代:指的是一个重复的过程,每一次重复称为一次迭代,并且每一次重复的结果 是下一次重复的初始值 2.为什么要有迭代器 对于序列类型:str list tuple 可以依赖索引来迭代取值,但是对于d ...

  4. hdu2516

    hdu2516斐波那契博弈,也是一堆博弈的一种,第一个人第一次可以拿任意多,但是不能取完,第二个人拿至少一个,但不能超过上一个人拿的两倍 #include<iostream> #inclu ...

  5. HZOI20190818模拟25题解

    题面:https://www.cnblogs.com/Juve/articles/11372379.html A:字符串 其实是CATALAN数水题... 和网格一毛一样:https://www.cn ...

  6. Django项目：CMDB(服务器硬件资产自动采集系统)--07--06CMDB测试Linux系统采集硬件数据的命令02

    #settings.py """ Django settings for AutoCmdb project. Generated by 'django-admin sta ...

  7. 微信小程序——简易动画案例

    wxml: <view class="container"> <view animation="{{animation}}" class=&q ...

  8. 转：linux进程间通信的几种机制的比较及适用场合

    源地址:http://blog.csdn.net/f_x_p0324/article/details/6878081 socket 1. # 管道( pipe ):管道是一种半双工的通信方式,数据只能 ...

  9. 60行JavaScript代码俄罗斯方块

    教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏   早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下( ...

  10. 封装MySQL C API 基本操作

    根据我的以前的文章 http://blog.csdn.net/skyhuangdan/article/details/21099929 链接数据库成功后进行封装. 我封装类使用的是VS2005下的wi ...