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. vue @scroll

    参考: https://blog.csdn.net/qq449736038/article/details/80769507

  2. 搭建一个Semantic-ui项目

    一.进入到项目目录 npm init 二.安装semantic-ui npm install semantic-ui --save 三.编译输出semantic-ui cd  ./semantic g ...

  3. c++容器的操作方法总结

    一.map 1.创建 typedef map<int,string> descrbe_map_; descrbe_map_ devMap; 或者 map<string,string& ...

  4. 19-10-15-Night-E

    信心赛??高考赛…… 过程 T1码了暴力+随机化. T2没码完.$Kuku$了 T3写了暴力+ puts("86400\n-1"); 骗了点分. T1 ××你告诉我CF E题是T1 ...

  5. springboot核心技术(一)-----入门、配置

    Hello World 1.创建一个maven工程:(jar) 2.导入spring boot相关的依赖 <parent> <groupId>org.springframewo ...

  6. 原生JS制作验证码（优化）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 013- unittest单元测试框架

    unittest单元测试框架 重要的概念 1. TestCase TestCase 是最小的测试单元,用于检查特定输入集合的特定返回值.unittest提供了TestCase基类,我们创建的测试类需要 ...

  8. hbase 聚合操作

    hbase本身提供了 聚合方法可以服务端聚合操作 hbase中的CoprocessorProtocol机制. CoprocessorProtocol的原理比较简单,近似于一个mapreduce框架.由 ...

  9. 差分进化算法（DE）的C++面向对象方法实现

    代码来源于网络,写得非常棒 /*DE_test *对相应的Matlab程序进行测试 */ #include <iostream> #include <cmath> #inclu ...

  10. 【python之路33】开发模式单例模式及简单的服务器请求框架原理

    1.单例模式指的是创建单个实例,例如:数据库连接池中包含10个数据库连接,用户访问数据时随机从连接池中拿出一个进行连接,其他用户再次访问时不再创建对象进行连接 #!usr/bin/env python ...