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

下载插件网站

国外网站: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. offset,client,scroll,style,getBoundingClientRect相关笔记

    1.offsetTop 功能:获取元素上外缘与最近的定位父元素内壁的距离,如果没有定位父元素,则是与文档上内壁的距离 使用方法:js document.querySelector(...).offse ...

  2. iOS基于XMPP实现即时通讯之一、环境的搭建

    移动端访问不佳,请访问我的个人博客 使用XMPP已经有一段时间了,但是一直都没深入研究过,只是使用SDK做一些简单的操作,看了许多大神的博客,自己总结一下,准备写一系列关于XMPP的使用博客,以便于自 ...

  3. Elasticsearch6.4.3文档的映射

    已经把ElasticSearch的核心概念和关系数据库做了一个对比,索引(index)相当于数据库,类型(type)相当于数据表,映射(Mapping)相当于数据表的表结构.ElasticSearch ...

  4. JavaScript常用知识点整理——思维导图

    如图 思维导图图片链接 http://www.edrawsoft.cn/viewer/public/s/b8327462051289 有道云笔记图片链接 http://note.youdao.com/ ...

  5. Git和GitHub相关

    组员从GitHub上下载项目并上传项目的步骤如下 .组员接收到组长发的项目地址,组员需要从GitHub上把项目克隆下来,首先组员 需要在本地的一个文件夹里打开git,然后运行如下代码:git clon ...

  6. CentOS 5 上使用yum同时安装32位和64位包的解决方法

    在centos上使用yum在线安装软件包的时候,有时候会同时安装32位和64位的包.并且在update的时候也会更新双份. 其实让yum只安装64位的包,只要在 /etc/yum.conf 中加个 e ...

  7. File类之常用方法

    package IoDemo; import java.io.File; import java.io.IOException; /** * @Title:FileTest * @Descriptio ...

  8. java-四则运算-四

    题目要求:查找数组连成环形的和最大的连续子数组 实验代码: package zuoYe; import java.util.Scanner; public class MaxSubArray { pu ...

  9. 为什么font-size推荐使用具体数值?

    1.font-size的单位 font-size通常用的单位是px/em/rem,px就不说了,em/rem 主要用在移动端,原因的根据根元素大小进行适配,简而言之,em相对于父级定义基础字号,rem ...

  10. HDU 4725 建图

    http://acm.hdu.edu.cn/showproblem.php?pid=4725 The Shortest Path in Nya Graph Time Limit: 2000/1000 ...