在中国,你是无法使用谷歌应用商店,所以你下载插件,要使用一些别的手段,一种是下载源码编译,另一种是通过第三方网站。第一种不适合小白,所以现在介绍第二组。

下载插件网站

国外网站:https://www.crx4chrome.com/

国内网站:http://www.cnplugins.com/

建议使用第一个网址,插件与应用商店同步更新,打开网站后,搜索“Vue.js devtool”。下载后文件如下。

 
 

安装方法


1、在浏览器中打开,更多工具-扩展程序

 
 
 
 

2、在把刚刚下载的文件拖进打开的页面中。

 
 

3、安装后页面如下。同时勾选“开发者模式”。此时会出现插件id:nhdogjmejiglipccpnnnanhbledajbpd。注意,建议勾选“允许访问文件网址”,这个可以允许插件对本地文件进行调试。如:file:///D:/Vue2.x/BookExample/01.hello.html。

 
 
 
 

4、使用id搜索,一般在C盘。选择并打开对应的文件夹。

 
 

5、(可选配置)打开文件夹后,修改两个文件。打开文件manifest.json,把"persistent": false改成"persistent": true;打开文件webpack.config.js,把NODE_ENV: '"production"'改成 NODE_ENV: '"development"'。

 
 
 
manifest.json
 
webpack.config.js

6、点击“F12”,在调试工作中出现vue工具,如下图。现在就可以调试了。

 
 

安装后不能执行的解决方案


问题1:提示Vue.js not detected

 
 

解决方法:

(1)你的页面没有导入vue.js文件,或者不是vue应用。

问题2:提示:Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

 
 

解决方法:

(1)检查自己是否使用压缩后的js,vue.min.js,使用压缩后的js文件,会失去错误提示和警告。也可能会导致上面的问题。

(2)尝试安装方法中的第5步中的配置。

作者:南昌大魔王
链接:https://www.jianshu.com/p/01a61c8c722f
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Vue.js devtool插件下载安装及后续问题解决的更多相关文章

  1. Vue.js devtool插件安装后无法使用的解决办法

    初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后,都会经常有一个疑问.我在chrome浏览器里面已经成功安装好Vue.js devtool插件,怎么点击后提示v ...

  2. Vue.js devtool插件安装后无法使用的解决办法【最简单有效的解决方法】

    在开发vue相关的项目时,使用vue devtools工具是一件极其有趣的事,你所有的操作都马上给你实时反馈. 然而有时候安装好的工具,在chrome中不显示. 在网上找过多次,一直没有找到有效解决方 ...

  3. 【原】无脑操作:Chrome浏览器安装Vue.js devtool

    学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象.组件.事件等. 本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装 ...

  4. JRebel 7.1.5 插件下载 安装 激活 结合 IntelliJ IDEA--自动编译进行热部署---

    Intellij IDEA 安装和配置jrebel进行项目的热部署 https://www.cnblogs.com/a8457013/p/7866625.html Intellij IDEA 使用jr ...

  5. Chrome安装Vue.js devtool F12无效

    要安装 vue-devtools-4.1.4_0 链接: https://pan.baidu.com/s/1aeUxKJEUDW0U_i6uuAZFvQ 提取码: 4btc vue-devtools- ...

  6. VUE.js devtool 安装简易教程(转)

    最简便的方法是用FQ来通过google应用商店进行安装,但是大多数人还是处在非FQ的状态 尝试过安装Node的方法来安装,但是极其不建议用这个方法安装,非常麻烦,而且必须要有node的基础,非常不接地 ...

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

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

  8. Vue.Js添加自定义插件

    基于上篇我们讲了 在window下搭建Vue.Js开发环境 我们可以开发自己的vue.js插件发布到npm上,供大家下载使用. 1.首先打开cmd命令窗口,进入我们的工作目录下 执行 cd E:\vu ...

  9. vue的测试(Vue.js devtool)

    1. 安装chrome插件:Vue.js devtools(https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejigli ...

随机推荐

  1. Nginx 域名跳转

    域名跳转 就是实现URL的跳转和隐藏真实地址,基于Perl语言的正则表达式规范.平时帮助我们实现拟静态,拟目录,域名跳转,防止盗链等 . 域名跳转配置 1.多域名指定一个域名重定向 # 空格分割域名 ...

  2. jQuery图片垂直滚动焦点图

    在线演示 本地下载

  3. 20145222 黄亚奇 《网络对抗》Exp8 Web基础

    20145222 黄亚奇 <网络对抗>Exp8 Web基础 实践具体要求 (1).Web前端HTML(1分) 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法 ...

  4. 网络性能监测工具smokeping

    smokeping简介: smokeping是rrdtool的作者Tobi Oetiker的作品,所以它在图形显示方面有很大优势,也是一个很有特点的opensource工具:多种探测方式,包括fpin ...

  5. Treflection05_扩展习题

    1. package reflectionZ; import java.lang.reflect.Constructor; import java.lang.reflect.Method; publi ...

  6. OpenStack Ceilometer -- 后台数据存储优化之MongoDB的分片存储设置

    https://xiaofandh12.github.io/Mongo-Shard 关于MongoDB MongoDB中的概念与关系型数据库之间的对应: Database --> Databas ...

  7. LeetCode第[29]题(Java):Divide Two Integers

    题目:两整数相除 难度:Medium 题目内容: Given two integers dividend and divisor, divide two integers without using ...

  8. mysql应该看的blog

    一个比较系统的学习mysql的网站:http://www.runoob.com/mysql/mysql-data-types.html

  9. 22个HTML5的初级技巧

    Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰.因此,为了应对即将到来的HTML5,本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助. 1. 新的Doctyp ...

  10. CodeForces - 767C

    花了6个小时,终于成功ac...... 两边dfs,第一遍求子树和,第二遍判断有没有2*t[s]/3和t[s]/3,因为要求的节点可能是在同一条线上,同时要有2*t[s]/3和t[s]/3的情况,且2 ...