安装方法1: 需正常打开chrome商店,搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展程序下启用;

方法2: github下载插件,npm包安装依赖,拖入浏览器扩展程序

具体操作:

1 . 下载chrome扩展插件。

在github上下载压缩包并解压到本地,github下载地址:https://github.com/vuejs/vue-devtools

2. npm install

下载完成后打开命令行cmd进入vue-devtools-master文件夹,

1. npm install,安装依赖包;如果安装太慢,请参照文章末尾说明进行操作。

2. npm run build

npm run build 执行完,会在shells>chrome下的src文件夹里生产如上图所示的几个js文件;

若不执行以上命令会报错,无法加载背景脚本"build/background.js",如下图:

3. 打开shells>chrome>manifest.json并把json文件里的"persistent":false改成true

4. 扩展chrome插件

1.打开chrome浏览器,打开更多工具>扩展程序;

2.再点击加载已解压的扩展程序,然后把shells>chrome文件夹放入

5, 测试安装成功

在插件的目录下执行npm run dev,这个时候我们的插件就可以运行了,打开localhost:8080可以看到插件已经安装并运行了。

方法3: 下载chrome插件安装包(.crx文件)离线安装(版本较低不推荐)

下载地址:http://www.cnplugins.com/devtool/vuejs-devtools/download.html

安装方法:http://www.cnplugins.com/tools/how-to-setup-crx.html

在chrome中新开一个TAB,输入:chrome://extensions/ 回车,打开应用管理器,可以看到之前安装的其他应用。将下载后的.crx文件,拖入即可安装。

另附:

1. 建议使用npm淘宝镜像安装依赖包地址:http://npm.taobao.org/

命令行安装npm淘宝镜像:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

之后我们就可以使用cnpm代替npm安装依赖包了

2. chrome插件网地址 http://www.cnplugins.com/, 有需要别的插件的可类似以上操作。

--------------------- 本文来自 chenjiepds 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/chenjiepds/article/details/80034956?utm_source=copy

chrome安装vue-devtools的更多相关文章

  1. 【vue】chrome已安装Vue Devtools在控制台却无显示

    chrome已安装Vue Devtools在控制台却无显示的解决: 在点亮Vue Devtools图标后,控制台没有vue解读显示. 原因:脚手架配置NODE_ENV直接定义为了production版 ...

  2. Vue安装Vue Devtools调试工具提示 Error: Cannot find module '@vue-devtools/build-tools' 解决办法

    我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装, 但是在最终执行编译命令的时候 :npm run build ,提示如下错误: 尝试了很多方法,都不能解决 ...

  3. 怎样在Chrome浏览器上安装 Vue Devtools 扩展程序

    第一步: 前往 GitHub 下载 Vue Devtools 项目文件 https://github.com/vuejs/vue-devtools 注意: 1. 将分支切换为 master 2. 下载 ...

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

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

  5. 在google chrome浏览器上安装 Vue Devtools工具

    [转]https://www.cnblogs.com/tanyongli/p/7554045.html Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的 ...

  6. 在浏览器上安装 Vue Devtools工具

    Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码. 1)首先在github下载devtools源码,地 ...

  7. 浏览器上安装vue devtools

    安装前要检查一下node版本的(node -v),必须将版本提高到>4.4.7.低版本的node在安装devtools时执行npm install 时报错.如何升级node版本,若在window ...

  8. Chrome 扩展 Vue Devtools

    Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码. 1)首先在github下载devtools源码,地 ...

  9. 安装Vue Devtools

    命令行进入vue-devtools\vue-devtools-master执行 cnpm install (貌似npm不太好使,也可能是我网络代理的原因) (淘宝镜像安装 npm install -- ...

  10. vue devtools无法使用

    vue devtools无法使用 一.总结 一句话总结: 没显示vue devtools调试工具的原因是用了生产环境的版本或是压缩的vue版本,或是没有勾选:允许访问文件网址 二.vue调试工具Dev ...

随机推荐

  1. 新男人八题---AStringGame

    终于完成进度男人1/8,为了这题学了sam= = 题意先有一个串,n个子串,两个人轮流每次在子串上加字符,要求加完后还是原串的子串,最后不能加的就是输者,求赢的人 解法:sam之后在构造的状态图上跑s ...

  2. Java中操作Redis

    一.server端安装 1.下载 https://github.com/MSOpenTech/redis 可看到当前可下载版本:redis2.6 下载后的文件为: 解压后,选择当前64位win7系统对 ...

  3. pycharm git 提交使用情况

    在IDEA中进行分支切换时,出现如此错误,导致无法正常切换: error: The following untracked working tree files would be overwritte ...

  4. 验证email是否合法

    https://buluo.qq.com/p/detail.html?bid=339910&pid=6675390-1514450689&from=grp_sub_obj 场景1:验证 ...

  5. sql 日志统计-日、周、月活跃数

    近日网站需求:统计日志表的 日.周.月活跃数.最终研究了出来了,分享给大家看下.  如果有更好的sql语句也可以评论下方. --日活跃量 ), cr.AddTime, )as addtimt,COUN ...

  6. maven_00_资源帖

    一.官方资料 Maven Getting Started Guide 二.精选资料 Maven for building Java applications - Tutorial Maven Tuto ...

  7. Mysql 建表时报错 invalid ON UPDATE clause for 'create_date' column

    这个错误是由于mysql 版本问题导致的 `create_date` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '创建时间', ...

  8. eureka -1 - 介绍

    eureka ,服务发现注册中心 eureka 包含server, client两部分. eureka server,服务发现组件,各个微服务启动的时候会向server注册自己的信息(ip,hostn ...

  9. 各排序算法的Java实现及简单分析

    一,直接插入排序 //直接插入排序的算法时间复杂度分析: //如果输入为正序,则每次比较一次就可以找到元素最终位置,复杂度为O(n) //如果输入为反序,则每次要比较i个元素,复杂度为O(n2) // ...

  10. HashMap resize方法的理解(一)

    对于oldTable中存储的为15.7.4.5.8.1,长度为8的一个数组中,存储位置如下 0 1 2 3 4 5 6 7 8 1 4 5 15 7 当扩容到一倍后,对于新的位置的选择通过e.hash ...